1교시 : twich-main
1. 서비스 화면
-
html
-
css
코드리뷰 :
a. .content :
overflow-y: auto; / position: absolute; / top: 50px; / left: 240px; / bottom: 0; / right: 0;
메인 컨텐츠 영역에 대해서 스크롤과 영역을 만들었다. 그런데 여기서 왜 position: abs를 사용한 이유는 무었일까??? position: abs를 사용한 이유는 header영역과 left-area영역에 position : fixed를 사용했다. 그래서 메인 컨텐츠 영역에 abs를 적용하고 3차원 속성을 가지고 영역를 만들었다.
b. .content #content-banner :
position: relative; / width: 100%; / height: 350px; / background: url("../img/notebook.jpg") no-repeat center; / background-size: cover;
position을 relative를 사용하고 banner영역에 적용되는 img를 적용하였다.
여기서 특징이 몇가지 있는데 background: url()과 그 다음 no-repeat, center를 적용했다. 여기서 center속성을 적용한 이유는 사용할 이미지의 중심이 배너 영역에 오도록 하였다. background-size : cover는 img사이즈가 너무 커서 문제가 될 때 사용한다.
코드리뷰 :
a. .content #content-banner .layer .txt-wrap :
position: absolute; / top: 170px; / right: 200px;
b. .content .content-container :
width: 1240px; / margin: 0 auto;를 적용해서 naver와 비슷하게 컨텐츠가 중앙정렬이 되도록 한다.
