개발새발

3주 차 교육

5/16 margin-collapsing, flex box, 카카오톡 화면 구현 1

5/17 카카오톡 화면 구현 2, animation, JS 시작

5/18 CSS : filter, white-space / JS : 변수, 데이터 타입, 템플릿 리터럴, 객체

5/19 JS 원시타입 참조타입, 연산자, 제어문 

5/20 JS 제어문, SCSS 활용

3주차 교육 후 느낀점

이번 주에는 CSS 반응형 페이지 위주로 실습하고 JS 기초 문법을 배웠다.

HTML 끝나고 CSS 시작할 때 CSS 가 어려워서 HTML 이 너무 수월하고 재밌었는데

이제 JS 를 배우기 시작하니 CSS 가 재밌고 JS 는 죽도록 어렵다.

그래도 원래는 강사님이랑 페이지를 만들어보거나 강사님이 직접 만들어보라고 하면

다 만들지도 못하고 허덕대다가 강사님이 설명하는 걸 듣고 이해하기 바빴는데

이제는 시간 안에 끝낼 수 있다는 것에 너무 뿌듯하다.

나도 성장이라는 걸 하긴 하는구나 라는 생각이 든다.

매번 벼락치기만 했지 공부를 열심히 해보는 건 처음이라서 요령없이 무작정 달려들기만 하고 있는데

주위에서 격려도 많이 해주고 포기하지 않도록 도움도 많이 줘서 그나마 포기하지 않고 다닐 수 있는 것 같다.

솔직히 처음에는 내가 잘할 수 있을까 정녕 내가 이걸 좋아해서 하는 게 맞나 고민도 많고 두려웠는데

물론 아직 겨우 3주뿐이지만 지금은 페이지 만드는 게 재밌고

다른 사이트를 들어가 볼때마다 어떻게 구현할까 고민하고 있는 내가 신기하다.

앞으로 배울 것들이 아무리 어렵더라도 포기하지 않고 싶다. 버텨보고 싶다. 

배우는 게 느리고 한계에 부딪혀서 주저 앉더라도 이대로 포기하기는 싫다. 

이제 CSS 는 깔끔하진 않지만 어느정도 내가 원하는대로 구현할 수 있게 되었는데 JS 가 문제다.

아직 기초 문법밖에 배우지 않았는데 머리가 포화상태다.

원시 타입과 참조 타입은 왜 설명하는 거고

연산자들은 다 비슷한 것 같은데 왜 이렇게 종류가 많은지 

구문 하나만 작성해도 머리가 아픈데 여러 개를 중첩해서 어떻게 써야 하는지 머리가 아프다.

일단 나중에 활용하기 용이하도록 외우고 있다.

3주차 기반 실습 진행

저번 실습 마무리 때 상단의 나머지를 만들어본다고 했었는데 결국 못했다...

그래도 이번에 강사님이 내준 과제 예제를 활용해서 목록은 없지만 유명한 SNS 페이지 하나를 구현해봤다.

HTML

<header> <!-- 상단 -->
    <div class="inner">
        <h1><a href="#">HI's tagram</a></h1>
        <div class="head-icon">
            <i class="fa-regular fa-newspaper"></i>
            <i class="fa-regular fa-user"></i>
        </div>
    </div>
</header> 
<main>
    <div class="wrap">  <!-- 메인을 감싸는 wrap -->
        <section class="main-left">  <!-- 메인 왼쪽 -->
            <div class="main1">  <!-- 메인 1단 -->
                <div class="main1-inner">
                    <div class="me"></div>
                    <input type="text" placeholder="오늘 무슨 일이 있었나요?">
                </div>
                <a href="#"><i class="fa-regular fa-image"></i></a>
            </div>
            <div class="main2">  <!-- 메인 2단 -->
                <div class="user">
                    <div class="me"></div>
                    <div class="user-main">
                        <p>HI</p>
                        <span>11:27pm, yesterday</span>
                    </div>
                </div>
                <p class="main2-txt">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quod, doloremque tempora cum iusto error sed aliquam. Ab vitae possimus iste pariatur earum impedit odio ut, non, assumenda eos minus.
                </p>
                <div class="icons">
                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
                    <span>25k</span>
                    <a href="#"><i class="fa-regular fa-message"></i></a>
                    <span>10k</span>
                </div>
            </div>
            <div class="main3">  <!-- 메인 3단 -->
                <div class="user">
                    <div class="me"></div>
                    <div class="user-main">
                        <p>HI</p>
                        <span>11:27pm, yesterday</span>
                    </div>
                </div>
                <p class="main3-txt">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium non odio vitae, reiciendis alias corrupti sunt, vel ducimus neque quia voluptatem earum unde quis quaerat. Excepturi repellat eaque accusamus recusandae.
                </p>
                <img src="images/maldives.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
                    <span>25k</span>
                    <a href="#"><i class="fa-regular fa-message"></i></a>
                    <span>10k</span>
                </div>
            </div>
            <div class="main3">  <!-- (사진만 다른) 메인 3단 복사붙여넣기 -->
                <div class="user">
                    <div class="me"></div>
                    <div class="user-main">
                        <p>HI</p>
                        <span>11:27pm, yesterday</span>
                    </div>
                </div>
                <p class="main3-txt">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium non odio vitae, reiciendis alias corrupti sunt, vel ducimus neque quia voluptatem earum unde quis quaerat. Excepturi repellat eaque accusamus xrecusandae.
                </p>
                <img src="images/beach.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
                    <span>25k</span>
                    <a href="#"><i class="fa-regular fa-message"></i></a>
                    <span>10k</span>
                </div>
            </div>
        </section>
        <section class="main-right"> <!-- 메인 오른쪽 -->
            <a href="#">
                <div class="profile">
                    <div class="me"></div>
                    <p>HI</p>
                </div>
            </a>
            <p>나의 친구</p>
            <a href="#">
                <div class="profile">
                    <div class="cate"></div>
                    <p>Cate Blanchett</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="hem"></div>
                    <p>Hemtube</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="hea"></div>
                    <p>HeaJooo</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="kristen"></div>
                    <p>Kristen Stewart</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="eva"></div>
                    <p>Eva Green</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="dia"></div>
                    <p>Diamonds</p>
                </div>
            </a>
        </section>
    </div>
</main> <!-- 메인 끝 -->
<footer>
    <address><i>&copy; HI's tagram co.</i></address>
</footer>  <!-- 하단 끝 -->

CSS

body{height: 100%; background-color: #f4f3f383;}

/* 상단 */
header{
    width: 100%;
    background-color: #fff;
}
header .inner{
    width: 800px;
    margin: auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
}
.inner>h1{
    font-size: 15px;
    font-weight: bold;
}
.inner .head-icon>i{
    margin-left: 10px;
    color: gray;
}

/* main, 중복 적용(me, user)*/
.wrap{
    display: flex;
    width: 800px;
    margin: auto;
}
.me{
    width: 40px; height: 40px;
    background: url(../images/tomato.png) no-repeat center / cover;
    border-radius: 100%;
}
.user{display: flex; align-items: center; margin-bottom: 30px;}
.user .user-main{margin-left: 10px;}
.user .user-main>p{font-size: 14px; font-weight: bold;}
.user .user-main>span{font-size: 10px; color: #bbb;}

/* 메인 왼쪽 1단 */
.main-left{
    width: 70%;
}
.main-left .main1{
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.main-left .main1-inner{
    display: flex;
}
.main-left .main1-inner>input{
    outline: none;
    border: none;
    margin-left: 10px;
}
.main-left .main1-inner>input::placeholder{
    color: #aaaa;
    font-size: 11px;
}
.main1>a{
    margin-top: 10px;
    font-size: 18px;
    color: #dddd;
}

/* 메인 왼쪽 2단 */
.main-left .main2{
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}
.main2 .main2-txt{
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 20px;
}
.main2 .icons{
    color: #bbb;
    width: 23%;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
}

/* 메인 왼쪽 3단, 중복 */
.main-left .main3{
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}
.main3 .main3-txt{
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 20px;
}
.main3>img{
    width: 100%;
    margin-bottom: 20px;
}
.main3 .icons{
    color: #bbb;
    width: 23%;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
}

/* 메인 오른쪽 */
.main-right{
    width: 30%;
    height: 360px;
    margin-left: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
}
.main-right .profile{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.main-right .profile>p{
    margin-left: 10px;
    font-size: 13px;
}
.main-right>p{
    font-size: 11px;
    margin-bottom: 10px;
}
.profile .cate{
    width: 40px; height: 40px;
    background: url(../images/cate.png) no-repeat center / cover;
    border-radius: 100%;
}
.profile .hem{
    width: 40px; height: 40px;
    background: url(../images/hem.png) no-repeat center / cover;
    border-radius: 100%;
}
.profile .hea{
    width: 40px; height: 40px;
    background: url(../images/hea.jpg) no-repeat center / cover;
    border-radius: 100%;
}
.profile .kristen{
    width: 40px; height: 40px;
    background: url(../images/kri.jpg) no-repeat center / cover;
    border-radius: 100%;
}
.profile .eva{
    width: 40px; height: 40px;
    background: url(../images/eva.jpg) no-repeat center / cover;
    border-radius: 100%;
}
.profile .dia{
    width: 40px; height: 40px;
    background: url(../images/dia.jpg) no-repeat center / cover;
    border-radius: 100%;
}

/* 하단 */
footer{
    text-align: center;
    background-color: #fff;
    padding: 10px 0;
    font-size: 12px;
}

실습에 대한 해설 

1. HTML

먼저 <header> , <main> , <footer> 를 만들어 줬다. 

상단

- <header> 상단의 위치를 중간으로 잡아주기 위해 <div> 로 inner 를 만들어주고 로고를 <h1> 안의 <a> 로 홈페이지로 이동하도록 만들어줬다.

- 로고와 함께 flex 를 쓰기 편하도록 <div> 로 아이콘들을 묶어주었다.

 메인

- <main> 의 위치를 잡기 위해 <div> 로 wrap 감싸줬고

- <section> 으로 글들이 있는 메인 왼쪽, 친구 프로필이 있는 메인 오른쪽으로 나눠 줬다.

- 메인 왼쪽은 <div> 로 'main1, main2, main3, main3 중복' 4단으로 나눠줬고 

- main1 은 오른쪽 끝 아이콘과 함께 flex를 쓰기 편하도록 main1-inner 를 프로필 사진과 <input>을 묶어줬다.

- main2 는 <div> 로 상단의 user, <p> 로 중간의 텍스트, <div> 로 하단의 아이콘 총 3단으로 나눠줬다.

- main3 은 main2 와 동일하게 만들고 텍스트와 아이콘 사이에 사진만 추가해줬다.

- 메인 오른쪽은 각 프로필로 이동하도록 <a> 로 먼저 감싸고 <div> 로 profile 부분은 감싸주어 flex 하기 편하도록 만들어줬다.

- <p> 로 중간에 나의 친구 부분을 만들어줬다.

 하단

<address> 로 저작권 표시를 해줬다.

2. CSS

먼저 <body> 에 브라우저에 맞게 넓이가 변하도록 넓이를 100% 로 설정하고 배경색을 살짝 회색으로 잡아줬다.

상단

- <header> 에 브라우저에 맞게 넓이가 변하도록 넓이를 100% 로 설정하고 배경과 구분되도록 흰색으로 잡아줬다.

- 상단이 중앙으로 오도록 inner 에 넓이값을 800px 정도로 잡아주고 중앙으로 오도록 바깥 여백은 auto 로 설정했다. 메인과의 여백을 위해 바깥 아래쪽에 여백을 주고 flex 처리한 후 자식 요소들을 양쪽 끝으로 보내줬다. 중앙으로 오도록 line-height 를 부여해줬다.

- <h1> 로고에는 글씨 크기와 굵게 설정해줬다.

- 아이콘들 사이에 공간을 주기 위해 바깥 왼쪽에 여백을 주고 색깔을 줬다.

메인, 중복 컨텐츠 설정

- <section> 을 감싸는 wrap 에 flex 를 적용해 수평 정렬을 해주고 중앙에 오도록 넓이값을 주고 바깥 여백은 auto 로 설정했다.

- 메인의 중복되는 프로필 사진은 동일한 클래스를 주어 미리 설정해줬다. 높이와 넓이를 부여하고 background 에 프로필 사진을 넣고 반복없이, 중앙으로, 꽉 차도록 설정하고 테두리를 둥글게 해줬다.

- 메인 왼쪽의 중복되는 user 부분도 동일한 클래스를 주어 미리 설정해줬다. 프로필사진과 글씨 부분을 수평 정렬 해주고 교차축 기준으로 중앙으로 처리해주고 바깥 여백을 부여해줬다. 그 사이 공간을 위해 바깥 여백을 넣어줬고 글씨들의 스타일도 설정해줬다.

메인 왼쪽

- 메인 왼쪽의 넓이값을 부모인 .wrap 의 70% 정도로 부여해줬다.

메인 왼쪽 1단

- 전체 테두리를 잡아주고 <body> 와 확실한 구분을 위해 흰색으로 부여했다. 안쪽 여백으로 컨텐츠와의 여백을 잡아주고 자식 요소들을 수평 정렬 해준 뒤 양쪽 끝으로 보냈다. 2단과의 공간을 위해 바깥 아래쪽에 여백을 줬다.

- 프로필 사진과 <input> 을 수평 정렬해줬다.

- <input> 테두리들을 없애주고 프로필과의 공간을 위해 바깥 왼쪽에 여백을 줬다. 문구에도 스타일을 지정해줬다.

- 아이콘이 중앙으로 오도록 바깥 위쪽 여백을 주고 스타일을 지정해줬다.

메인 왼쪽 2단

- 1단과 동일하게 테두리, 안쪽 여백, 3단 과의 공간을 위한 바깥 아래쪽 여백을 부여해줬다.

-  txt 는 글자 크기, 줄 간격, 아이콘들과의 공간을 위해 바깥 아래쪽 여백을 줬다.

- 하단의 아이콘들에는 색깔과 글자 사이즈를 설정해주고 아이콘들 사이 넓이의 조절을 위해 값을 퍼센트로 지정해줬다. flex 처리로 수평정렬, 주축 정렬로 자식 요소들 간의 공간을 줬다.

메인 왼쪽 3단, 사진만 다른 3단 중복 단

- 1단과 동일하게 테두리, 안쪽 여백, 아래 3단 중복 단과의 공간을 위한 바깥 아래쪽 여백을 부여해줬다.

- <img> 에는 부모 요소의 넓이에 맞게 100% 로 지정해주고 아이콘과의 공간을 위해 바깥 아래쪽 여백을 줬다.

- 이하 2단과 동일

메인 오른쪽 

- 메인 오른쪽의 넓이값을 부모인 .wrap 의 30%로 잡아주고 높이값도 잡아줬다. 메인 왼쪽과의 공간을 위해 바깥 왼쪽 여백을 주고 테두리, 배경색, 안쪽 여백도 줬다.

- .profile 에 모두 동일하게 flex 처리로 수평 정렬해주고 중앙으로 맞춰주기 위해 교차축을 중앙으로 정렬해줬다. 각 프로필과의 거리를 위해 바깥 아래쪽 여백을 줬다.

- .profile 에 <p> 에는 프로필 사진과의 거리를 위해 바깥 왼쪽 여백을 주고 글씨 크기를 설정했다.

- '나의 친구' 부분에는 글씨 크기와 .profile 과의 공간 주기 위해 바깥 아래쪽 여백을 줬다.

- '나의 친구' 하단의 프로필 사진에는 모두 동일하게 넓이, 높이 값을 주고 배경 이미지를 반복없이, 중앙으로 꽉차게, 테두리는 원형으로 되도록 줬다.

하단

- <address> 를 중앙으로 오도록 중앙 정렬해주고 배경, 폰트 지정해주고 안쪽 상하 여백을 줬다.

실습 후 느낀점 및 고칠점

페이지를 만드는 건 얼마 안 걸렸는데 이것저것 다 설명하려다 보니 글을 하루 온종일 쓴 것 같다. 

아무래도 글 쓰는 데에 시간이 뺏기니 막상 다른 공부를 못하고 있다.

다음 주차 실습 때는 글자 스타일이나 배경색 같은 기본적인 건 빼고 설명해야 겠다.

글 쓰는 게 좀 오래 걸리더라도 해설을 쓰고 있으면 고칠 점이나 부족한 점이 확연히 보여서 좋다.

메인 오른쪽의 경우 <ul> <li> 를 썼으면 좀 더 편하고 적합했을텐데 그 점이 아쉽고 높이값을 주지 않고 안의 컨텐츠 크기만큼 높이를 잡고 싶었는데 display : inline 이나 inline-block 을 줘도 잘 작동이 되지 않고 box-sizing : border-box 로 해도 잘 작동이 되지 않아서 답답했다.

하단의 저작권 부분에 원래 자동으로 이탤릭체가 나오는데 나오지 않아서 따로 html 에 <i> 태그를 줬다.

아마 reset.css 에서 font-style : nomal 로 되어 있어서 그런 것 같다.

그리고 3주차 마지막날 scss 를 배울 때 중복되는 스타일에 @extend 나 @mixin 을 사용했다면 더 편리했을 것 같다는 생각을 했는데 안 그래도 강사님이 이 sns 페이지 과제를 나중에 scss 로 같이 적용해보자는 말씀을 하셨다. 

나중에 강사님과 함께 풀어볼 때 확실히 배워서 더 편리하게 css 를 작업할 수 있었으면 좋겠다.

2주차 교육

5/9 탭 만들어보기, transform, transition, box-shadow

5/10 그라데이션, vender prefix, 웹 폰트, 이미지 맵, form, 시멘틱 태그

5/11 재플린을 활용한 페이지 제작 1

5/12 재플린을 활용한 페이지 제작 2

5/13 재플린을 활용한 모바일 페이지 제작

2주차 교육 후 느낀점

2주차부터 본격적으로 웹페이지 제작에 들어갔다.

지마켓 페이지를 이용해 상단과 하단을 만들어보고 재플린을 이용해 웹페이지를 구현해봤다.

본문은 1주차부터 계속 반복해서 오래걸리고 지저분하지만 구현은 할 수 있었다.

하지만 상단이 문제였다.

<transform> 을 이용하여 위치를 잡거나 <a>, <img> 등이 추가되어 복잡해진 레이아웃에 정신이 없었다.

강사님이랑 같이 만들 때는 이해가 갔는데 로고와 목록, 회원가입 위치를 잡기가 어려워서 계속 헤맸다. 

지마켓, 이솝, 모바일까지 했는데도 이해가 충분히 되지 않았는지 계속 강사님의 코드를 보면서 복습을 했다.

기초를 잘 다지지 않고 넘어간 것 같아서 내가 원하는 것을 만들어보며 연습을 해보기로 했다.

우선 상단을 자주 만들어 보는 것이 좋을 것 같아 일단 목록부터 실습하기로 했다.

2주차 기반 실습 진행

5/13 까지 배운 것을 바탕으로 대학교 페이지 목록을 만들어 봤고 이게 그 결과물이다.

HTML

<body>
    <ul class="gnb">
        <li class="depth1">
            <a href="#">학교소개</a> <!--큰 목록-->
            <ul class="depth2">
                <li><a href="#">대학기구</a></li>
                <li><a href="#">대학현황</a></li>
                <li><a href="#">캠퍼스 안내</a></li>
                <li><a href="#">홍보갤러리</a></li> <!--작은 목록-->
            </ul>
        </li>
        <li class="depth1">
             <a href="#">입시안내</a> <!--큰 목록-->
             <ul class="depth2">
                <li><a href="#">수시 모집요강</a></li>
                <li><a href="#">정시 모집요강</a></li>
                <li><a href="#">편입학 모집요강</a></li>
                <li><a href="#">입시관련 묻고 답하기</a></li>
                <li><a href="#">대학원 입학</a></li> <!--작은 목록-->
             </ul>
        </li>
        <li class="depth1">
            <a href="#">대학/대학원</a> <!--큰 목록-->
            <ul class="depth2">
                <li><a href="#">대학 안내</a></li>
                <li><a href="#">대학원 안내</a></li>
                <li><a href="#">평생교육원</a></li> <!--작은 목록-->
             </ul>
        </li>
        <li class="depth1">
            <a href="#">학사종합안내</a> <!--큰 목록-->
            <ul class="depth2">
                <li><a href="#">학사정보</a></li>
                <li><a href="#">교수전용</a></li>
                <li><a href="#">장학정보</a></li>
                <li><a href="#">학자금대출</a></li>
                <li><a href="#">등록</a></li> <!--작은 목록-->
            </ul>
        </li>
        <li class="depth1">
            <a href="#">취업정보</a> <!--큰 목록-->
            <ul class="depth2">
                <li><a href="#">공지사항</a></li>
                <li><a href="#">취업진로지원처</a></li>
                <li><a href="#">구인·구직정보</a></li>
                <li><a href="#">채용 정보 사이트</a></li> <!--작은 목록-->
            </ul>
        </li>
    </ul>
</body>

CSS

/*큰 목록 설정*/
.gnb{
	width: 1000px; margin: 50px auto;
    }
.gnb .depth1{
	float: left; 
    width: 200px; 
    text-align: center;
    }
.gnb .depth1>a{
	display: block; 
    font-size: 20px; 
    font-weight: bold; 
    line-height: 50px; 
    background-color: #fff;
    color: #000;
    }
.gnb .depth1:hover>a{color: #4c4cc3;}

/*작은 목록 설정*/
.gnb .depth2{
    padding: 30px 0; 
    background-color: #4c4cc3;
    border: 1px solid #4c4cc3;
    border-radius: 10%;
    color: #ebebeb; font-size: 14px;
	display: none;
    }
.gnb .depth2>li{padding-bottom: 15px;}
.gnb .depth2>li:last-child{padding-bottom: 0;}
.gnb .depth2>li:hover{color: black;}

.gnb .depth1:hover>.depth2{display: block;}

실습에 대한 해설 

1. HTML

 - <ul> 안에 5개의 <li> 를 만들어 줬다.

 - <a> 로 큰 목록을 만들어 주고 하단의 작은 목록은  그 아래에 <ul>, <li> 로 만들어 줬다.

 - 불러오기 편하도록 <ul>, <li> 에 각 class 를 부여해줬다.

2. CSS

 - reset.css 파일을 따로 만들어 초기화를 먼저 했다.

 - .gnb 에 넓이와 상하좌우 바깥 여백을 잡아줬다.

 - .depth1 안에 수직으로 되어있는 큰 목록과 작은 목록을 수평 처리해줬다. 목록 사이 여백을 위해 넓이값을 주고 중앙으로 정렬해줬다.

 - 큰 목록은 인라인 태그라 블록 처리를 해줬고 폰트는 20px, 굵게해주고 줄 간격 50px 로 여백을 만들어줬다. 배경은 흰색, 글자색은 검정으로 잡아줬다.

 - .depth1 에 갖다대면 큰 목록의 글자색을 파란색으로 되도록 만들어줬다.

 - .depth2 은 안쪽 여백 상하단을 잡아주고 배경색과 테두리색을 동일하게 잡은 다음 둥글게 모양을 만들어 줬다. 글자색과 글자 크기를 지정해주고 보이지 않게 처리 해줬다.

 - .depth2 의 각 <li> 에 안쪽 아래 여백을 잡아줬다.

 - .depth2 의 마지막 <li> 에 안쪽 아래 여백은 잡히지 않도록 처리해줬다.

 - .depth2 <li> 에 갖다대면 글자색은 검정색으로 잡아줬다.

 - .depth1 에 갖다대면 .depth2 가 나타나도록 처리해줬다.

실습 후 느낀점 및 고칠점

실습하기 전에는 내가 뭘 모르는지 어느 곳을 잘 이해 못하는지 잘 몰랐는데 실습을 하니 그런 부분들이 보였다.

사실 평일에는 그날 하루 배운 것도 이해하고 복기해보기 바빠서 따로 실습할 여력이 없었는데

주말에 실습을 진행해보면서 알게 되어 다행이라는 생각이 든다.

만약 실습을 하며 공부해보지 않았다면 나중에 프로젝트를 진행할 때 많은 어려움을 겪었을 것 같다.

시간상 여력이 되지 않을 것 같아 상단의 목록만 만들어봤는데

만들면서 로고나 회원가입 아이콘 부분 같은 걸 넣어보고 싶은 욕심이 들었다. 

3주차 중간에 상단의 나머지를 채워볼 예정이다. (아마 못할 것 같다.)

html 은 괜찮은데 css 는 아직도 순서가 뒤죽박죽 정신 없이 코딩이 되는 것 같다.

언제쯤 강사님처럼 깔끔한 코드를 작성할 수 있을까?

css 를 작성할 때 한 클래스 완성하고 확인하고 싶은데 계속 한 속성 작성하고 확인하는 작업을 반복한다.

충분한 연습이 필요할 것 같다.

그래도 처음엔 html 마크업하는 것도 헤맸는데 이렇게 할 수 있는 건 그래도 발전이 있다는 뜻이겠지.

1주차 교육

5/2 웹표준과 웹접근성 & 기본 HTML 태그

5/3 CSS 기초 문법, box model, background

5/4 CSS table, 선택자, 레이아웃, position, float

5/6 CSS clear, 가상선택자

1주차 교육 후 느낀점

레이아웃을 잡는 방법이 너무 어려웠고 float, clearfix, position 부분이 잘 이해가 되지 않아 수업 중간에 애를 먹었었다.

5/6 수업이 끝나고 주말동안 '유노코딩' 의 CSS 기초강의를 보면서 부족한 부분을 학습했다.

이해가 되지 않았던 건 이 부분이었다.

float 속성은 문서의 일반적인 흐름에서 제외되어 지정한 위치에 배치되지만 필요한 공간은 차지하고 있는 것이다.

그래서 여러 개를 float 하면 float 을 하지 않을 나머지 요소도 겹쳐지는 현상이 나타나는데

clear 속성은 그런 현상을 해제하여 float 요소 아래로 내려가게 할 수 있다.

내가 풀었던 예제에서는 .clearfix 를 이용하여 영역을 잡아주었는데

잘 이해가 되지 않아 이해하는데 오랜 시간이 걸렸고 결국 개발자 검사를 통해 이해가 가능했다.

1주차 기반 실습 진행

5/6 까지 배운 것을 바탕으로 강사님과 함께 풀지 못한 예제를 이용해 직접 실습을 해봤다.

결과물을 먼저 보여주자면

HTML

<body>
    <div class="wrap"> <!--wrap-->
        <ul class="cf"> <!--각 list를 감쌈-->
            <li class="list"> <!--list 1-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/1.png" alt="">
                    </div>
                    <div class="text">
                        <p>웹이 처음? HTML로!</p>
                    </div>
                </a>
            </li>
            <li class="list"> <!--list 2-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/1.png" alt="">
                    </div>
                    <div class="text">
                        <p>HTML을 탄탄히 배우고 싶다면?</p>
                    </div>
                </a>
            </li>
            <li class="list"> <!--list 3-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/1.png" alt="">
                    </div>
                    <div class="text">
                        <p>HTML 완료! <br> 그 다음엔?</p>
                    </div>
                </a>
            </li>
            <li class="list"> <!--list 4-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/2.png" alt="">
                    </div>
                    <div class="text">
                        <p>CSS가 아직 어렵다면?</p>
                    </div>
                </a>
            </li>
            <li class="list"> <!--list 5-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/2.png" alt="">
                    </div>
                    <div class="text">
                        <p>CSS가 가진 매력! Fallow me~</p>
                    </div>
                </a>
            </li>
            <li class="list"> <!--list 6-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/2.png" alt="">
                    </div>
                    <div class="text">
                        <p>CSS 타파! <br> 그 다음엔?</p>
                    </div>
                </a>
            </li>
            <li class="list"> <!--list 7-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/3.png" alt="">
                    </div>
                    <div class="text">
                        <p>JavaScript? <br> 그게 뭐야?</p>
                    </div>
                </a>
            </li>
            <li class="list"> <!--list 8-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/3.png" alt="">
                    </div>
                    <div class="text">
                        <p>JavaScript의 매력이 뭘까?</p>
                    </div>
                </a>
            </li>
            <li class="list"> <!--list 9-->
                <a href="#">
                    <div class="img">
                        <img src="img/practice/3.png" alt="">
                    </div>
                    <div class="text">
                        <p>JavaScript가 끝? 과연 그럴까?</p>
                    </div>
                </a>
            </li>
        </ul> 
    </div> <!--끝-->
</body>

CSS

@charset "utf-8";
/*초기화*/
body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p{margin:0;padding:0;}
li{list-style: none;}
a{text-decoration: none;color: inherit;}
h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 100%;}
body{line-height: 1;}
table{border-collapse: collapse;}

.wrap{border: 2px solid rgb(223, 223, 223); width: 350px; margin: 50px auto;} /*전체 border*/

.cf{padding: 15px 15px 0;} /*전체 list를 감쌈*/

/*각 list, text*/
.list{float: left; width: 100px;height: 187px; text-align: center; word-break: keep-all;
	  font-size: 12px; margin-right: 10px;}
.list:nth-child(3n){margin-right: 0;}
.list>a>.text{padding-top: 10px; line-height: 15px;}

/*전체 border의 영역 지정*/
.cf::after{content: ""; width: 0;height: 0; display: block; clear: both;}

실습에 대한 해설 

1. 먼저 html 로 전체 윤곽을 잡아줬다.

2. <div> 로 전체를 감싸고 <ul> 밑에 9개의 <li> 를 만들어 줬다.

3. 각 <li> 밑에 두 개의 <div> 태그를 만들어 각각 이미지와 텍스트를 만들었다.

4. <div>, <ul>, <li> 에 각각 class 를 부여해줬다.

5. css 로 스타일을 잡아줬다.

6. 초기화를 먼저 진행해주고 전체 테두리 선을 잡아줬다. 넓이와 바깥 여백을 상하 50px, 좌우는 auto 로 지정해줬다.

7. 각 <li> 를 감싸는 <ul> 태그에 안쪽에 여백을 상 15px, 좌우 15px, 하 0px 로 잡아줬다.

8. 각 <li> 에 float 을 왼쪽으로 처리하여 넓이에 맞게 세개씩 3줄로 나열해주었고 넓이와 높이를 지정해 자리를 잡았다.

그 안의 텍스트는 중앙으로 정렬해줬다. 또 보기 좋게 자동으로 줄바꿈하도록 설정했지만 몇몇은 내가 원하는대로 나오지 않아 <br> 로 줄바꿈을 해줬다. 글자 크기는 12px로 지정해주고 각 list 가 띄워지도록 오른쪽에 바깥 여백을 줬다.

9. 이미 여백이 있는 각 줄의 3번째 list 에는 오른쪽 여백이 없도록 0 으로 설정해줬다.

10. 이미지와 텍스트 사이에 여백을 주기 위해 안쪽 위에 여백을 주고 line-height 로 텍스트 각 줄에 간격을 줬다.

11. 마지막으로 끌려올라간 테두리의 영역을 잡아주기 위해 .clearfix 를 적용했다.

실습 후 느낀점 및 고칠점

사실 완벽히 이해하고 코드를 작성했다고 하면 거짓말이고

다 맞게 작성했다고 생각해서 결과물을 보면 예제와 달라서 중간에 수정도 많이 거치고 개발자 모드로도 많이 봤다.

아직도 width, height 를 어떻게 적용해야 하는지, padding 과 margin 은 어떤 부분에 적용해야 적절히 레이아웃을 잡을 수 있을지 헷갈렸다.

또 감싸는 박스들이 많아질수록 padding 과 margin 값을 각각 맞게 적용해줘야 하다 보니 여러가지가 복잡하고 어려웠다.

wrap 에 height 값을 잡았다가 .clearfix 를 적용해서 height 를 다시 지우기도 하고,

cf 에 padding 값을 지정하지 않아 헤매기도 하고,

글자 크기는 text 쪽에 속성을 넣었는데 적용이 되지 않아 list 에 넣어버리고,

각 list 의 높이를 높게 잡아서 사이 간격이 너무 넓어 wrap 에 높이값을 부여해서 줄여보기도 했다.

이 글을 쓰면서 내 코드를 복기하다 보니 CSS에 순서도 뒤죽박죽이고, 굳이 넣지 않아도 될 class 도 들어가 있고, 

초기화의 의미도 정확히 모른 채 작성하여 전체적으로 정리가 많이 안 되어 있었다.

이런 단점을 보완하기 위해 남은 예제를 많이 풀어 보고 세세하게 코드를 해설해 봐야 겠다는 생각이 들었다.