0024 블록(block) 요소와 인라인(inline) 요소
이제 기본적인 태그와 요소들에 대해서 상당수 알게 되었다. 그런데 요소들 화면에 표시할 때 브라우저가 하는 특이한 행동 하나가 눈에 띈다. 그것은 <body> 요소에서 <h1~6>요소, <p>, <blockquote> 요소들은 브라우저가 화면에 표시할 때 반드시 줄바꿈(linebreak)이 앞뒤로 나타나 행 전체를 차지한다. 반면, <img>, <a>, <strong>, <em>, <q> 등의 요소들은 줄바꿈 없이 나타나 행 전체를 차지하지 않고 딱 해당 요소의 내용이 차지하는 공간만큼만 공간을 차지한다.
요소(element) 중에서 화면에 표시(display)될 때 항상 새로운 행에서 시작하고 요소가 위치한 가로폭을 전부 차지하는 요소를 블록(block) 요소라고 하고 새로운 행에서 시작하지 않고 딱 요소의 내용이 차지한 가로폭만큼만 차지하는 요소를 인라인(inline) 요소라고 한다. 그리고 모든 HTML 요소는 화면표시(display)를 함에 있어 블록 요소인지 인라인 요소인지가 기본값으로 설정되어 있다.
가령, 다음처럼 
0024.html파일을 만들어 보자.
<!DOCTYPE html>
<html>
<head><title>Block과 inline</title></head>
<body>
<h1>h1 요소</h1>
<p>
단락을 결정하는 p요소는 위 아래로 줄바꿈이 발생한 것을 확인할 수 있다.
(줄바꿈)을 했지만 브라우저에는 줄바꿈을 하지 않은 것으로 나타난다. 한편 <strong>중요한 텍스트</strong>, <em>강조 텍스트</em>를 사용해도 줄바꿈은 일어나지 않고 있다. img <img src="sun.jpg"> 요소를 집어넣으면 어떨까? 하이퍼텍스트 링크인 a요소를 이렇게 넣어보자. <a href="https://deliciouslearning.tistory.com/">책 씹어먹는 즐거움</a> 이처럼 줄바꿈이 일어나지 않는 것을 확인할 수 있다. 하지만 다시 <p>p요소를 내부에 중첩킨 것</p>은 줄바꿈이 일어나는 것을 확인할 수 있다.
</p>
</body>
</html>
<img> 요소로 웹페이지에 넣을 사진은 다음과 같다.
그럼 다음과 같이 나타난다.
위에 보이는 것처럼 블록 요소는 항상 앞과 뒤에 줄바꿈를 가진 것처럼 표시되며, 인라인 요소는 웹페이지에 있는 텍스트의 흐름에 포함되어 ‘라인 위에(in line)’ 나타난다.
블록 요소와 인라인 요소의 구분이 상당히 중요한 것 같다. 어떤 요소들은 구조적으로는 동일한 구조적 기능을 하지만 블록 요소와 인라인 요소라는 차이점만 존재하는 것 같은 요소들이 있다. 가령 앞서 0023 HTML에서 인용하기(Quotation)에서 공부한 <blockquote>와 <q> 요소는 인용구를 블록 요소로 할 것인가 인라인 요소로 할 것인가 하는 부분이 가장 핵심적인 차이로 보인다.
또, 앞으로 CSS와 함께 정말 자주 사용하게 될 <div>와 <span> 같은 요소들은 HTML문서에서 섹션을 나누고 해당 섹션의 요소들을 묶는 컨테이너(container) 같은 기능만 하는 요소들인데 이 둘의 차이점은 오직 <div>는 블록 요소이고 <span>은 인라인 요소라는 것뿐이다.
그렇다면 왜 요소들을 블록과 인라인으로 구분하는 것이 중요한 것일까?
여기저기 뒤져본 결과로 개인적으로 추론해본건대, HTML 개발하면서, 블록 요소로 전체 윤곽(lay out)을 구성하고 인라인 요소로 페이지를 세련되게 다듬는 식의 웹페이지 구축 방법론을 채택한 것으로 보인다.
그리고 블록 요소와 인라인 요소라는 특성 때문에 HTML에 다음과 같은 규칙들이 생기게 되었다.
거의 대부분 블록 요소는 내부에 블록 요소를 중첩(nesting)시킬 수 있다.
거의 대부분의 인라인 요소는 인라인 요소를 내부에 중첩시킬 수 있다.
거의 대부분 블록 요소는 내부에 인라인 요소를 중첩시킬 수 있다.
하지만 인라인 요소는 내부에 블록 요소를 중첩시킬 수 없다.
또, CSS로 블록 요소와 인라인 요소를 스타일링 할 때 사용할 수 있는 속성들이 다르다. 이 부분은 추후 CSS를 다루면서 다시 다루도록 하자. 일단, 지금은 블록 요소와 인라인 요소가 있고, 웹페이지 구축 방법론으로 블록 요소로 전체 윤곽(lay out)을 구성하고 인라인 요소로 페이지를 세련되게 다듬는 방식을 채택했다는 점, 그리고 인라인 요소 내부에 블록 요소를 중첩시킬 수 없다는 점을 기억해 두도록 하자.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0024 블록(block) 요소와 인라인(inline) 요소.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0026 HTML 목록(list) 요소 만들기 (0) | 2018.11.28 |
|---|---|
| 0025 HTML style 속성(attribute) 및 배경색 설정 (0) | 2018.11.27 |
| 0023 HTML에서 인용하기(Quotation) (0) | 2018.11.25 |
| 0022 HTML로 글자의 형식 정하기 (0) | 2018.11.23 |
| 0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성 (0) | 2018.11.22 |