1. 학습한 내용
- 7월 18일, 이제까지 진행한 리소프트 메인페이지를 클론코딩 완성 후 조별로 발표
- 대부분은 ppt를 준비했지만 그렇지 않고 직접 시연하면서 설명한 팀들도 다수 존재
- 개인적으로 코드를 말로 설명하기보다는 이미지로 보여주는게 직관적으로 이해하는데 훨씬 편하다고 생각되었다
- 특히, 한송이님과 김소연님의 ppt가 가독성이 좋고 발표도 좋았다
- 이정현님의 경우 ppt도 좋았지만 자신이 사용한 코드가 어떻게 사용되었고 어떤 기능을 구현하였는지 정확하고 명확하게 설명하시는 모습에서 대단하다고 느꼈다
- 전체적으로 자신들이 겪은 문제와 그것을 어떻게 해결하였는지를 설명하는 방법이 코드를 이해하는데 효과적이었다
- 일부는 자신들이 클론코딩한 부분에서 좀 더 응용까지 해서 꾸미거나 다르게 바꾸는 모습을 볼 수 있었는데 확실히 잘 하시는 분들은 다른 것 같다는 느낌을 받았다
- 무엇보다 팀이 서로 피드백하며 부족하다 느껴지는 부분을 지적하고 해결해나간 팀들의 모습은 본 받을만 했다
- 내가 맡은 파트와 같은 아이콘 파트를 클론코딩하지 않고 jQuery를 사용하지 않고 자바스크립트로만 구현하신 분이 계셨는데 정말 놀랐다, 함수 부분을 그렇게까지 구현하실 수 있는 분이 있다는 부분도 놀라웠지만 이해도가 확실히 높아보였다
- 이미지 압축을 통한 애니메이션 효과 시간을 줄이는 부분이나 웹 표준을 사용해서 에러를 잡는 부분들을 멘토님에게서 배울 수 있었다
-
현업에서 일하고 계시는 PM분의 현업에 대한 생생한 강의를 들을 수 있었다
-
나보다 10년은 빠르게 일하고 커리어를 쌓고있는 모습이 그저 부럽기만 하다
-
이후 7조 팀원들과 모여서 한 달짜리 새로운 프로젝트에 대해서 상의하였다
-
우선적으로 첫 주는 메인페이지를 다 같이 작성하기로 각자 파트를 분배하였다
-
내가 맡은 파트는 메인페이지 Header, 중요한 부분이기도 하지만 처음 맡아보는 부분이기에 생각보다 기본적인 html,css를 작성하는데 시간이 걸렸다
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="https://kit.fontawesome.com/01f338039f.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="header">
<nav class="header-nav">
<div class="nav-logo">
<img src="./img/resoft logo.png">
</div>
<ul id="nav-ul">
<li a href="#">회사소개</li>
<li a href="#">사업현황</li>
<li a href="#">정보마당</li>
<li a href="#" class="ham">
<i class="fa-solid fa-bars"></i>
</li>
</ul>
</nav>
</div>
<div class="text-box">
<div class="hd-1">
<p class="main-text">Evolution<br />With New Software</p>
<p class="sub-text">
<span>Mobile APP(Android/iOS) Development, </span>
<span>AI Bigdata Analysis, MetaVerse, </span>
<span>Responsive WEBsite, Brand Design Launch, </span>
<span>ICT Consulting</span>
</p>
<img src="./img/Icon ionic-ios-arrow-round-back.svg" class="left">
<img src="./img/play.svg" class="center">
<img src="./img/Icon ionic-ios-arrow-round-back-1.svg" class="right">
</div>
</div>
</div>
</header>
</body>
</html>@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+KR&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
box-sizing: border-box;
vertical-align: baseline;
}
body {
max-width: 1920px;
}
/********************************* 헤더부분 *************************************/
/* 헤더부분 */
header {
width: 100%;
height: 900px;
background: url("./img/Head-back-img.png") no-repeat center center/cover, rgba(0, 0, 0, 0.5);
background-blend-mode: multiply;
position: fixed;
z-index: 1000;
}
.header-nav {
height: 80px;
border: 1px solid #ffff;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.nav-logo {
top: 25px;
left: 360px;
width: 133px;
height: 30px;
padding-top: 20px;
padding-left: 45px;
}
.nav-logo img {
width: 133px;
height: 30px;
}
.header-nav li {
display: inline-block;
color: white;
font-size: 20px;
font-weight: bold;
margin-left: 80px;
}
#nav-ul {
width: calc(100% / 4);
margin-right: -20px;
margin-left: 80px;
padding-top: 20px;
}
.header-nav li {
margin-left: 50px;
letter-spacing: -1px;
}
.header-nav li i{
font-size: 32px;
}
.text-box {
position: relative;
height: 100%;
}
.hd-1 {
position: absolute;
top: 462px;
left: 240px;
}
.hd-1 p:first-child {
font-size: 40px;
font-weight: bolder;
line-height: 120%;
}
.hd-1 p:last-child {
margin-top: 30px;
word-break: normal;
width: 60%;
font-size: 18px;
}
.hd-1 img {
margin-top: 115px;
opacity: 0.5;
}
.hd-1 img.left{
width: 60px;
height: 40px;
}
.hd-1 img.center{
width: 15px;
height: 21px;
margin-bottom: 10px;
margin-left: 15px;
margin-right: 15px;
}
.hd-1 img.right{
width: 60px;
height: 40px;
}
- 가장 기본적인 부분만 구현했고 애니메이션, hover시 바뀌는 부분, 메뉴var부분, 추가할게 많다
2. 학습한 내용 중 어려웠던 점
- 생각보다 포지션 위치 잡는게 쉽지 않았다, 아직 미디어쿼리도 적용하지 않았는데 나름 고생했다
- adove xd에서 많은 부분을 제공해주긴 하지만 직접적인 코드를 제공해주는게 아니기 때문에 보면서 위치를 확인하고 비교하면서 진행하니 생각보다 시간이 걸린것 같다
- 내가 아직 adove xd를 정확히 사용하는 법을 잘 모르는 것 같다는 느낌이 많이 들긴 하지만 내가 할 수 있는 선에서 최대한 움직여야하니 비효율적이라도 이렇게 할 수밖에 없다
- 다른 분들이 어떤 식으로 코딩하는지 궁금하다
3. 해결방법
- 난 생각보다 좀 무식하게 접근했다
- 대강의 위치를 잡고 세부적으로 비교하면서 조금씩 css를 수정했다
- 미디어쿼리 쪽으로가면 좀 더 문제가 생길 것 같은데 진행하면서 해결해야겠다
4. 학습소감
- 내가 맡았던 파트가 아닌 새로운 부분을 만들어보니 흥미도 생기고 재미도 있는 것 같다. 그래도 맨땅에 헤딩하는 코딩은 아니라서 좀 편한 것 같기도 하다
- 물론 애니메이션이나 미디어쿼리쪽으로가면 좀 더 복잡해져서 이런 생각이 안들 것 같기도 하다
- 할 수 있는 만큼 최대한 노력하면서 프로젝트를 진행하고 다른 팀들처럼 뭔가 더 할 수 있는 부분들에 손 댈수 있도록 시간을 최대한 벌어보자
코딩공부중