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 도 들어가 있고,
초기화의 의미도 정확히 모른 채 작성하여 전체적으로 정리가 많이 안 되어 있었다.
이런 단점을 보완하기 위해 남은 예제를 많이 풀어 보고 세세하게 코드를 해설해 봐야 겠다는 생각이 들었다.
'🌱 SeSac > 실습 기록' 카테고리의 다른 글
| [새싹 DT 프론트엔드 프로그램] 3주차 마무리 실습 (0) | 2022.05.23 |
|---|---|
| [새싹 DT 프론트엔드 프로그램] 2주차 마무리 실습 (0) | 2022.05.16 |