[1214 테킷] CSS :: Flex 정복하기

블로그 리뷰

덩어리 전체 몇개인지? 한 개.

margin: auto auto; 가 안되는 이유?

박스엘리먼츠의 생태계에는 위아래 여백이 없어요

 

문제당착 1.

가운데 정렬이 안됨.

body에 height 값을 준다.

viewport 등장!

viewport란? 브라우저에서 보이는 창을 의미.

viewport units: vw, vh, vmin, vmax

height: 100%는 부모 요소의 100%이기 때문에 그냥 넣으면 안된다.

height: 100vh;

(높이를 바디에 100vh로 넣어주는 것.)

- 근데 페이지가 오직 한 개만 있는 것이 아니기 때문에 확장성을 고려해서 마크업을 설정해야하 한다.

 

문제당착 2.

잔디밭은 마크업으로 굳이 넣을 필요가 없다. 왜냐하면 시멘틱한 부분이 없기 때문이다.

 

문제당착 3. 이미지인 곰이 살짝 떠있다.

이 경우, 이미지 리셋을 할 필요가 있는데 display: block은 추천하지 않는다. 왜냐면 text-align같은 프로퍼티 적용이 모두 없어지는 것이기 때문이다.

vertical-align: top; (baseline을 벗어나기만 하면 되기 때문에 이 부분은 한 번 더 알아보는 게 중요 ! )

 

문제당착 4.

h1은 reset할때 

h1 {

margin: unset;

font-weight: unset;

font-size: unset;

}

 

새로운 지식

:root {

 font-family: 'arial', 'impact', sans-serif;

}

 

min-height

최소 높이 규정

바디에 그냥 height 100vh라고 설정 시켜 놓으면 확장성에 한계가 있기 때문에 min-height를 권장.

backgroun-repeat: repeat-x; (이것 역시 확장성을 고려한 것)

 

[pixel perfection]

1. 똑같이 디자인 시안을 맞추어주는 것

2. 유연하게 만드는 것, 확장성

 

콘텐츠의 유동성 까지 고려해서 습관이 되게 만드는 것이 나중을 생각하면 가장 편한 길이다. 

 

flex-direction은 어떤 방향성에 대한 이야기이다. 

flex-direction: column;은 약간 전체적인 방향성도 달라지게 함.

align-items 적용이 row 했을때랑 다르게 들어감 

 

.movie:nth-child(even){

}

div를 따로 설정하지 않아도 되니까 행복하다~