4. 시멘틱 마크업, 블록/인라인 레벨

이번 포스팅에서는 시멘틱 마크업과 블록 레벨, 인라인 레벨에 대하여 다뤄보겠습니다.

개인적으로 기본적인 태그들을 먼저 소개하기보단, 시멘틱 마크업과 블록/인라인 레벨의 개념을 확실하게 알고 가는 것이 좋아 보입니다.

 

1. 시멘틱 마크업

마크업이란 컴퓨터가 이해할 수 있도록 태그로 문서를 작성하는 것이며, 웹 브라우저를 HTML과 CSS로 개발하는 것을 의미합니다.

시멘틱은 컴퓨터나 웹 브라우저가 잘 이해할 수 있도록 하는 것을 뜻합니다.

따라서, 시멘틱 마크업이란 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다.

 

시멘틱 하게 마크업을 하는 방법은 의외로 간단한데요.

바로 정해진 규칙을 잘 지키면서 코딩하면 되는 것입니다.

조금 더 설명하자면 상황에 맞는, 의미에 맞는 태그와 요소를 사용하여 문서의 구조화를 잘해주는 것입니다.

 

<ul>
    <li>리그오브레전드</li>
    <li>배틀그라운드</li>
    <li>스타크래프트</li>
</ul>

 

<ol>
    <li>1. 물을 넣고 끓인다.</li>
    <li>2. 물이 끓으면 라면과 스프를 넣고 익을 때까지 끓인다.</li>
    <li>3. 기호에 맞게 계란, 대파 등을 넣고 끓인다.</li>
</ol>

 

이후에 다룰 태그이지만 간단하게 설명하면 같은 리스트를 나타내는 태그이지만, <ul>은 순서가 없고 <ol>은 순서가 있는 리스트입니다.

위의 예시처럼, 조리법을 다룬다면 순서가 있기 때문에 <ul>이 아닌 <ol>을 써야 하듯이 상황과 의미에 맞게 태그와 요소를 사용해야 합니다.

 

<b>중요한 내용</b>
<strong>중요한 내용</strong>

 

다른 예시로는 텍스트의 스타일에서 확인할 수 있는데요.

<b> 태그와 <strong> 태그 모두 텍스트를 굵게 표현하도록 기본 스타일이 적용되어 있습니다.

하지만, 두 태그의 의미가 다르기 때문에 상황에 맞게 사용해야 합니다.

<b> 태그는 단순하게 텍스트를 굵게 표현하는 태그지만, <strong> 태그는 중요하다는 의미를 가지고 있습니다.

따라서, 위의 예시처럼 중요한 내용을 입력할 때에는 의미에 맞게 <strong> 태그를 사용하는 것이 시멘틱 한 마크업입니다.

 

2. 블록 레벨

블록 레벨은 우리가 흔히 생각하는 블록을 생각하시면 이해가 쉽습니다.

부모 요소의 가로 영역에 꽉 찬 블록을 위로 쌓는다고 생각하시면 됩니다.

여기서 부모 요소란 자식 요소를 포함한 상위 요소인데요.

 

<div>
    <span>자식 요소입니다.</span>
</div>

 

해당 예시에서 <div> 태그가 <span> 태그를 포함하고 있기 때문에 <div> 태그가 부모 요소, 안에 포함되어 있는 <span> 태그가 자식 요소입니다.

다른 태그를 포함하고 있는 요소가 부모 요소, 포함되어 있는 태그가 자식 요소라고 생각해 주시면 됩니다.

부모 요소의 가로 영역에 꽉 찬 블록이기 때문에 옆으로는 쌓을 수 없고 위/아래로만 쌓을 수 있게 되는 겁니다.

물론 CSS를 통하여 옆으로도 쌓을 수 있지만 기본적인 성질 자체는 위/아래로만 쌓을 수 있습니다.

이러한 블록 레벨은 일반적인 모든 요소(블록/인라인 레벨 등)를 모두 포함할 수 있습니다.

블록 레벨의 대표적인 태그는 <div>, <p>, <ul>, <h1~h6> 등이 있습니다.

 

예외적으로 <h1>~<h6> 태그와, <p> 태그는 블록 레벨 요소이지만, 내부 요소로 다른 블록 레벨 요소를 포함할 수 없습니다.

 

3. 인라인 레벨

인라인 레벨은 '나'라는 자기 자신을 생각하시면 되는데요.

하나의 라인 안에서 자기 자신의 내용만큼 박스를 만드는 요소입니다.

블록 레벨과는 다르게 기본적으로 옆으로 쌓이기 때문에, 요소 앞 뒤로 다른 인라인 요소가 자리할 수 있습니다.

또한, 인라인 레벨은 내부에 블록 레벨 요소를 포함할 수 없습니다.

인라인 레벨의 대표적인 태그는 <span>, <img>, <em>, <a>, <strong> 등이 있습니다.

 

예외적으로 <a> 태그는 인라인 레벨 요소이지만 블록 레벨 요소를 포함할 수 있습니다.

 

아직 본격적인 태그 설명을 하기 전이기 때문에, 포스팅한 내용이 이해가 잘 되지 않을 수 있는데요.

제가 느끼기에 가장 중요한 내용들이니 이런 것들이 있구나라고 어느 정도 이해만 해도 후에 다룰 내용들을 더 쉽게 이해하고 사용하실 수 있을 것 같습니다.

 

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)