[TIL] 스터디키워드 정리 (블록레벨 태그, 인라인 태그)

1주차 스터디 키워드

1) inline 태그 5개를 일렬로 나열하면 어떻게 될까?

2) block line 태그 5개를 일렬로 나열하면 어떻게 될까?

 

블록 태그와 인라인 태그의 차이에 대해 알아보자.

 

모든 HTML 요소들은 스타일링을 위해 각 요소의 특성에 따른 default display value(기본 표시 값)를 가진다. default display value 는 블록 레벨 요소(Block-level Elements) 와 인라인 요소(Inline-level Elements) 두 가지 범주로 나뉘며 이는 모든 HTML 요소가 블록레벨 요소이거나, 인라인 요소 이거나 둘 중 하나라는 뜻이다.

 

 

블록(block) 레벨 요소

블록 레벨 요소는 항상 왼쪽에서 오른쪽으로 페이지 전체 너비값을 갖는다.

따라서 해당 요소는 페이지의 한 줄을 독차지 하며 우측에 여백이 남아있더라도 그 다음 태그는 다음줄에서 생성된다.

 

👉 즉, block line 태그 5개를 일렬로 나열할 경우, 요소가 각 한줄씩 5줄이 쌓이게 된다.

<di>, <article>, <h1>, <p>, <ol> //블록 라인 태그 예시

 

 

인라인(inline) 요소

인라인 요소는 내용물의 크기가 태그의 영역이 되어 줄바꿈이 일어나지 않는다.

즉 좌우 공간을 필요한 만큼만 차지하기 때문에 다른 태그와 한 줄에 배치될 수 있다.

 

👉 즉, inline 태그 5개를 일렬로 나열할 경우, viewport의 길이에 맞게 가로로 쌓이게 된다.

<button>, <br/>, <a>, <input>, <span> //인라인 태그 예시

 

 

출처 : https://codeburst.io/

 

---

결론

block line 태그 5개를 일렬로 나열할 경우, 요소가 각 한줄씩 5줄이 쌓이게 된다.

inline 태그 5개를 일렬로 나열할 경우, viewport의 길이에 맞게 가로로 각 요소의 크기만큼 나열된다.