---

<div> 태그

HTML은 원래 위-아래 순으로 요소들을 나열하며 내용을 표시하는 언어!
단순히 나열하는 화면이 아닌, 우리가 평상시에 접하는 웹 페이지의 레이아웃 구성을 위해서는
<div> 태그를 많이 사용한다.

div

• CSS에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그
  : 요소를 하나의 논리적인 그룹으로 묶을 때
  : 페이지 구획(레이아웃) 정의할 때

내가 전에 만들던 그 비효율적인 선택자들..!!!

각 element를 가져오기 위해 부여하던 class, id의 우선순위에 대한 개념이 없어서 그랬던 거여써..!

태그는 만들고 나면 class나 id를 부여하여 작업을 하게 되는데
이 중 id를 적용하면 우선순위가 아주 높다보니 다른 스타일 속성을 쉽게 무력화 시키게 된다.

id를 범용하면 #home #banner #nav a 와 같이 길고 복잡한 selector를 사용해야 하니,
id 대신 class를 더 자주 쓰는 것이 좋다.

물론 한 페이지에 단 하나만 있을법한 논리적인 구분은 id로 해도 무방하다는 거!

레이아웃 전략

레이아웃 설계는 공식이나 정답이 없다.

현존하는 CSS 프로퍼티를 통해 창의적으로 만들어내는 것이 관건!
HTML5에서 <div>를 대신할 여러 태그들

---

float 기반 레이아웃

float

• 주로 이미지 주변 텍스트를 감싸기 위해 만들어진 속성!
• 페이지 전체 레이아웃 잡을 때에도 사용!
• left, right, none
• but 요즘은 flex 속성 기반이 더 많다고 한다 ㅎㅅㅎ

float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나는 경우 생기는데
clear 속성을 사용해주면 된다.

float 요소 옆 요소들에게 적용하는 속성!

해결방법

1. 바깥 div 마지막에 아무 태그나 넣고 clear 속성 적용
   : html 코드를 더 입력해야하는 부담이 있다.

2. 바깥 div에 overflow: hidden; 속성 적용

3. 바깥 div에 float 속성 적용
   : 자식 요소의 float 높이를 인지하여 그만큼 높이 차지
   : but float이 되어버려 block 요소로서의 속성이 없어지므로 width: 100% 속성 추가해주어야 한다

justify-content - flex 가로 정렬 사이 간격