block요소와 illine 요소

🤷‍♀️ 태그(tag)? 요소(Element)?

태그는 HTML의 문법적 규칙이자 코드를 의미하고,

요소는 실제 웹 페이지 화면에 그려지는 구성 요소들을 의미한다.

보통은 하나의 HTML 태그가 웹 페이지의 요소에 일대일로 연결된다

EX) <h1> 제목입니다.</h1> -> 제목입니다.

HTML 요소의 두 형태

화면 영역을 차지하는 형태에 따라 Block과 Inline 형태로 나뉜다

✔ Block 요소

태그의 내용과 관계 없이 상위 요소의 너비에 맞게 너비를 차지한다

레이아웃 영역을 지정할 때 주로 사용된다

이 요소에 css스타일을 적용해서(크기,위치 등) 화면의 레이아웃을 완성한다

✔ div : block 요소의 대표적인 태그 아무 의미를 담지 않는 블럭 요소로
아래의 블록 요소들의 상위 개념

✔ section : 서로 다른 내용 구성이 들어갈 영역을 구분하는 블록 요소

✔ artice : 동일한 내용 구성이 반복될 때 구분하기 위한 블록 요소

✔ header : 본문 내용의 머리말의 영역을 구성하기 위한 블록 요소

✔ footer : 본문 내용의 바닥글의 영역을 구성하기 위한 블록 요소

✔ Inline 요소

태그의 내용에 맞춰서 너비가 결정된다

레이아웃에 영향을 주지 않고 일부 내용에만 스타일이나 내용의 구분을 주고 싶을 때 사용

b, i 등의 요소가 이에 속하고 대표적인 태그로 sapn이 있다.

✔ span : 아무 의미도 내포하지 않은 대표적인 inline 요소. css 스타일과 함께
특정 내용을 강조하거나 구분하고 싶을 때 사용한다