1교시 : vieo-section + others
코드리뷰 :
a. .video-section .video-wrap .image-wrap :
position: relative; / width: 333px; / height: 186px;
b. .video-section .video-wrap .image-wrap img :
position: absolute; / width: 100%; / height: 100%; / transition: transform 0.15s linear;
지금까지 해온 것처럼 position: rel(부모) + posiiton: abs(자식)으로 전체를 구성하였다.
c. .video-section .video-wrap .image-wrap:hover img :
transform: translate(10px, -10px);
위 태그에서 transition : transform 0.15s linear 를 사용했다.
transform 을 이용해서 x축으로 10px y축으로 -10px를 사용했다.
코드리뷰 :
a. .video-section .btn-more :
position: absolute; / text-align: center; / line-height: 30px; /
text-align + line-height (태그내 글자의 x축 y축 정렬)
bottom: -16px; / left: 50%; / transform: translateX(-50%);
(2) category + footer
a. footer .txt-wrap : text-align: center;
div태그(block요소)안에 span(inline)문자열이 있는 경우
p(block요소) 안에 img(inline)를 정렬하려는 경우
div태그(block요소) 안에 p태그(block요소) 안에 있는 inline요소 (텍스트 등등)있는 경우
b.footer ul li a:after :
content: ""; / display: inline-block; / width: 1px; / height: 12px; / background-color: grey; / margin: 0 8px; / position: relative; / top: 1px;