CSS 기초 - 1

block과 inline

• block : div/main/header/p 등, 옆에 다른 요소가 올 수 없음
• inline: span/a(link)/img 등, 옆에 다른 요소가 올 수 있음

❗️css display로 속성 바꿀 수 있지만, inline은 높이와 너비를 가질 수 없음

block의 property 3가지

1. margin: box의 border 바깥 공간(여백)
   ex1. margin: 20px; → 상하좌우 여백 20
   ex2. margin: 20px 15px; → 상하여백 20, 좌우여백 15
   ex3. margin: 5px 3px 10px 15px; → 상우하좌 순서로 여백 적용

   collapsing margins: 박스 두 개의 두 경계가 같을 때, 그 경계 밖 여백이 따로 적용되지 않고 하나의 여백으로 취급되는 현상(수직으로만 발생)

2. padding: box의 border 안쪽 공간, 작성규칙은 margin과 동일
3. border: box의 경계, 주로 solid(실선) dashed(점선) 사용
   ✱ shortcut property
   ex. border: 2px solid black; → size style color 순으로 적용
   ✱ border는 inline에도 적용됨
   ✱ 모서리 곡률도 조정 가능 ex. border-radius: 50%; = 원

❗️ inline에는 padding, border 적용됨, margin은 좌우에만 적용됨(위아래 여백을 주고 싶다면 block으로 바꿔야 함)
❗️inline block: block으로 인식되지만 옆에 다른 요소가 올 수 있음
→ display: inline-block;
요소 사이 빈 공간이 존재하고, 정해진 형식이 없으며, 반응형 디자인을 지원하지 않는 등 문제점이 많음

flexbox

❗️inline-block의 문제 해결 가능

• 작성규칙: 자식요소를 움직이려면 부모요소에만 명시해야 함(display:flex; → 부모엘리멘트를 flex container로 만듦)
• flex-container의 두 축
  - main axis(주축): 기본속성 수평, justify-content가 적용됨
  - cross axis(교차축): 기본속성 수직, align-items가 적용됨
  ❗️ flex-direction: clomn(↔️row);로 주축과 교차축을 바꿀 수 있음, 주축과 교차축이 바뀌면 justify-content와 align-items도 반대로 적용됨
  ❗️ flex-container가 height를 가지고 있지 않으면 align-items를 사용해도 위치가 바뀌지 않음, 반대로 stretch는 div를 늘리는 것이기 때문에 고정높이값이 있다면 적용되지 않음
• 원하는만큼 부모-자식 flex-container 만들 수 있음
• flex-wrap: nowrap → 모든 요소 한 줄에 정렬/ wrap → 여러 줄에 걸쳐 정렬/ wrap-reverse → 여러 줄에 걸쳐 반대로 정렬
• flex-direction: column/row, column-reverse/row-reverse → 거꾸로 정렬
  ❗️ flex-flow: row wrap; → 공백으로 direction과 wrap 두 속성값을 받을 수 있음
• order: 정수; → 기본값은 0, 양수나 음수로 바꿀 수 있음
• align-self: 개별 요소에 적용 가능
• align-content: 여러 줄들 사이 간격 지정. flex-start → 여러 줄을 꼭대기에 / flex-end → 여러 줄을 아래에 / stretch → 여러 줄을 컨테이너에 맞게 늘리기

기타참고
1. *{ } : 브라우저 전체(모든 요소)에 같은 속성 적용됨
2. id: 요소간 차이를 주는 고유한 값, 작성시에는 공백 없이 작성
3. class: 여러 요소에 동시에 적용하고 싶을 때 사용, 한 요소에 여러 클래스도 가능 ex. class="tomato potato hello"
4. flex-container의 높이단위는 vh(viewpoint height) 사용 → 화면 비율에 따라 변함
5. flexboxfroggy 게임: flexbox 개념 이해 보충

출처: 노마드코더, https://nomadcoders.co