태그의 유형
앞서 우리는 <hx>, <p>, <blockquote> 등의 텍스트 태그들을 사용해 보았는데, 이 태그들을 통해 만들어진 요소들에는 한 가지 공통점이 있습니다. 바로 '요소가 화면 상에서 하나의 블록을 형성한다'라는 점입니다. 무슨 뜻일까요? 코드와 결과를 함께 확인해보겠습니다.
<body>
<h1>텍스트 양이 적어도</h1>
<p>그 다음 요소는 옆이 아닌 아래에 표시됩니다.</p>
<p>짠</p>
<p>한 글자밖에 없다고 해도 마찬가지입니다.</p>
</body>
위 예제의 결과에서는 태그에 포함된 콘텐츠의 양과 무관하게 하나의 요소가 혼자서 한 줄을 통째로 차지하는 현상을 확인할 수 있는데, 이러한 요소를 가리켜 '블록 레벨 요소'라고 합니다. 여기에서 한 줄이란 가장 왼쪽부터 가장 오른쪽까지의 공간, 즉 화면의 가로 길이를 말합니다. 쉽게 말해 블록 레벨 요소란 '화면의 가로 길이를 통째로 차지하는 요소'인 것입니다.
블록 레벨 요소의 가로 길이는 화면의 가로 길이와 같지만, 세로 길이는 콘텐츠의 세로 길이와 동일합니다.
앞서 우리가 다루었던 대부분의 텍스트 관련 태그들은 모두 블록 레벨 요소였습니다. 그러나 태그의 유형 중에는 블록 레벨 요소와 반대되는 특성을 가진 '인라인 레벨 요소' 유형도 존재합니다. 콘텐츠의 양과 무관하게 가로 길이를 전부 차지하는 블록 레벨 요소와는 달리, 인라인 레벨 요소는 태그에 포함된 콘텐츠의 크기만큼만 공간을 차지한다는 특성을 가지고 있습니다.
이 절에서는 텍스트를 표시하기 위해 사용하는 여러 태그 중 대표적인 인라인 레벨 요소 몇 가지를 살펴보겠습니다.
두꺼운 텍스트 표시하기
<strong> 태그는 사용자의 눈에 띄어야 하는 중요한 내용을 강조해서 표시하기 위해 사용하는 태그입니다. 이 태그 안에 포함된 텍스트는 화면 상에서 두껍게 표시됩니다.
<body>
<strong>인라인 텍스트라 한 줄을 독차지 하지 않고</strong>
<strong>두껍게 표시되는 것을 확인해보세요</strong>
<p>p 태그는 블록이라 한 줄을 독차지합니다</p>
<strong>인라인 텍스트라 한 줄을 독차지 하지 않고</strong>
<strong>두껍게 표시되는 것을 확인해보세요</strong>
</body>
이탤릭체 텍스트 표시하기
<em> 태그 또한 <strong> 태그처럼 중요한 내용을 강조하기 위해 사용하는 태그입니다. 이 태그에 포함된 텍스트는 '이탤릭체'로 표시됩니다. 이탤릭체는 글자가 기울어진 형태를 띕니다.
<body>
<strong>나는 두꺼운 텍스트가 돼</strong>
<em>나는 기울어진 텍스트가 돼</em>
</body>
형광펜 효과가 있는 텍스트 표시하기
<mark> 태그는 텍스트에 배경색을 추가해 표시하는 태그입니다.
<body>
<p>
블록 레벨 텍스트 안에
<mark>인라인 레벨 텍스트를</mark>
추가하여 표시한 결과
</p>
</body>
위 예제에서는 태그의 안에 태그를 포함할 수 있다는 HTML의 특징을 활용해 블록 레벨 텍스트 안에 인라인 레벨 텍스트를 포함하였습니다. 인라인 레벨 요소는 자신에게 필요한 공간만을 차지하므로 블록 레벨 텍스트의 공간에 별다른 영향을 끼치지 않습니다. 그러나 블록 레벨 텍스트 내부에 블록 레벨 텍스트를 포함할 경우에는 블록 안에 또 다른 블록이 생기므로, 겹쳐 있는 태그를 작성할 때는 이 점을 각별히 주의해야 합니다.
<body>
<p>
블록 레벨 텍스트 안에
<p>또 블록 레벨 텍스트를</p>
추가하여 표시한 결과
</p>
</body>
위에서 확인한 태그들 외에도 인라인 텍스트 요소를 표시하는 다양한 태그들이 더 존재하지만, 사용 빈도를 고려하여 이 절에서는 다루지 않겠습니다. 블록 레벨 요소와 인라인 레벨 요소의 차이를 아는 것에 초점을 두고 공부해주세요.
웹 브라우저 개발자 도구
대부분의 최신 웹 브라우저에는 '개발자 도구'라는 장치가 탑재되어 있습니다. 우리는 앞서 블록 레벨 요소와 인라인 레벨 요소가 공간을 차지하는 방식이 어떻게 다른지를 살펴보았는데, 개발자 도구에는 화면에 표시되고 있는 요소가 얼만큼의 공간을 차지하고 있는지 또는 요소가 어떤 태그를 통해서 만들어진 것인지 등을 확인할 수 있는 기능이 탑재되어 있습니다.
크롬 브라우저를 기반으로 진행하지만, 브라우저가 다르더라도 절차나 방법은 모두 비슷합니다.
열려 있는 웹 브라우저에서 개발자 도구를 열어보겠습니다. 개발자 도구를 열기 위해서는 브라우저 오른쪽 상단에 있는 [Chrome 맞춤 설정 및 제어] 버튼을 클릭한 다음 [도구 더보기]의 [개발자 도구]를 선택하거나, 그에 해당하는 단축키를 입력하면 됩니다.