VSCode에서 html 기본 코드 빠르게 작성하기: ! + enter

HTML 구성하기

주로 콘텐츠의 흐름: 좌->우, 위->아래

CSS로 화면을 구분할 경우
1. 수직 분할: 화면을 수직으로 구분, 콘텐츠가 가로로 배치될 수 있도록 요소 배치
2. 수평 분할: 분할된 각각의 요소를 수평으로 구분, 내부 콘텐츠가 세로로 배치될 수 있도록 요소 배치

• 수평으로 구분된 요소에 height 속성을 추가하면, 수평분할을 보다 직관적으로 할 수 있음

레이아웃 리셋

👾 기본 스타일링을 제거하는 CSS 코드의 예시

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

---

Flexbox로 레이아웃 잡기

✔️ 박스를 유연하게 늘리거나 줄여서 레이아웃을 잡는 방법
✔️ Flexbox 속성 활용 시 요소의 정렬, 요소가 차지하는 공간 설정

📌 display:flex

• 부모 박스 요소에 적용
• 자식 박스의 방향과 크기를 결정하는 레이아웃 구성

div 요소들은 별다른 설정X
=> 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간을 차지

부모 요소 main 요소 에 display: flex 속성 적용하기
=> div 요소들이 왼쪽부터 가로로 정렬, 내용만큼의 공간 차지

📌 부모 요소에 적용해야하는 Flexbox 속성들

🛠️ 적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는대로 정렬되지 않음

1. flex-direction: 정렬 축 정하기
   ✔️ 부모 요소에 설정해주는 속성
   ✔️ 자식 요소들을 정렬한 정렬 축 정하기
   ✔️ default: 가로 정렬

   ➡️ row(default) ⬇️column ⬅️row-reverse ⬆️column-reverse

2. flex-wrap : 줄 바꿈 설정하기
   ✔️ 하위 요소들의 크기 > 상위 요소의 크기 => 자동 줄 바꿈을 할 것인가
   ✔️ default: 줄 바꿈 X

   nowrap(default) wrap wrap-reverse