대구 AI 스쿨 42일차

1교시 : vieo-section + others

1. 서비스 화면

2. html

3. css
   (1) video-section
   
   코드리뷰 :
   a. .video-section :
   position: relative; / padding-top: 60px; / padding-bottom: 40px; / border-bottom: solid 1px grey;

코드리뷰 :
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;

• text-align 속성을 적용할 수 있는 예시

1. div태그(block요소)안에 span(inline)문자열이 있는 경우

2. p(block요소) 안에 img(inline)를 정렬하려는 경우

3. 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;