[CSS] display, flex, medie query

display: 컨텐츠를 어떻게 배치할 것인가를 결정하는 큰 틀

• block: default 값 줄바꿈함
• inline-block: 부모 요소에 내가 들어갈 공간이 있으면 줄바꿈하지 않는다.
• none: 안 보인다.
  ...etc
  

position: display 기준을 가지고 미세하게 위치 조정

• absolute: static이 아닌 position 속성을 가진 부모를 기준으로 잡는다. 부모에 static 이외의 position 프로퍼티가 지정된 경우에만 그 부모를 기준으로 위치하게 된다.
• static: default값
• relative: (top, right, bottom, left를 조정 가능) static 속성일 때 자기가 있어야 하는 위치를 기준으로 얼마나 이동할지를 정해서 이동한다. 따라서 이동의 기준은 무조건 부모 요소를 기준으로 한다.
• fixed: 화면 기준으로만 위치를 잡는다.
  ...etc

Flex Box Model
display: flex
-> 하위의 모든 요소들은 flex box model로 배치가 된다.

flex: 비율
-> 자동으로 부모 요소에서 비율을 계산한다.

flex-direction

• row: 수평(오른쪽)으로 쌓는다.
• column: 수직으로 쌓는다.
• row-reverse: 왼쪽으로 쌓는다.
• column-revere: 아래에서 위로 쌓는다.

gap: 요소와 요소 간의 간격

align-self: 자신의 정렬을 맞춘다.

• flex-start
• flex-end
• center

미디어 쿼리

• 화면의 크기에 대응해서 CSS를 적용 가능

@media screen and (max-width: 600px){
	.box2 {
    	background-color: brown;
        flex-direction: column;
    }
    
    .box5 {
    	display: none; // 안 보인다.
    }
}

@media screen and (min-width: 601px){
	.box2 {
    	background-color: green;
    }
}

• screen, all, ... etc