03/08 HTML/CSS (두 번째, 세 번째)방 설정, Flex

 

두 번째 방 설정 ( 박스의 기본 크기 / 박스 수평정렬 )

 

 

 

 

 

헤더의 안쪽 내용을 div로 묶어준다.

 

 

헤더>div에 따로 스타일

 

 

100% :  부모의 높이를 그대로 차지함

 

header의 높이가 px가 아니고 %라면 부모%의 %.. (누적된다)

min-height같은 경우 %로 할때 적용이 되지 않아서 inherit사용해주면 된다

 

 

 

 

위의 코드로 만들었을 때

왼쪽 정렬되어 있음

 

 

 

 

아무것도 쓰지 않았을 때 오른쪽에 마진, 왼쪽 정렬된다

 

 

 

auto : 남는 간격을 다 마진으로 쓰자

 

 

 

 

so 왼쪽 오른쪽 둘다 마진을 auto로 해주면 가운데 정렬 된다

 

 

 

 

 

근데 최소 높이 설정되어 있는 body부분은 

 

 

따로 min-height : inherit; 라고 써주어야 함

 

 

 

100% -> 부모의 퍼센트의 100%의 크기

inherit -> 부모의 퍼센트나 크기를 그대로 따라서 크기를 가진다.

 

부모가 50% -> inherit : 부모의 50% : 25%

          50% -> 100% : 부모의 100% : 50%

 

 

body에서의 inherit은 min때문에 어쩔 수 없다.

 

 

 

 

 

 

 

세 번째 방 설정

 

 

 

opacity : 0~1 ;  불투명도 조절

 

 

 

 

ctrl + k + u : 전체 주석했던 거 취소

ctrl + k + c : 전체 주석

 

 

 

 

 

레이아웃 배치

 

위의 두 가지 방식이 추가 됐다

 

grid는 100퍼센트 지원이 되지 않는다.

 

flex사용하면 되겠다.

 

 

 

 

 

 

 

 

 

 

 

Flex Box 레이아웃

(자유도 높은 방을 꾸밀 수 있게 도와준다)

 

 

 

 

 

 

 

 

main축에 반하는 정렬을 가진 축은 cross

 

flex박스 안에 item들을 가진다

 

 

 

 

 

flex 활용

 

aside와 main을 display: flex로 수평에 놓기