[HTML] TIL5 : 블럭-레벨 및 인라인 요소의 특징 / 클래스 및 아이디 속성 활용

---

▣ Block-level & Inline Elements 

HTML을 구성하는 요소들(Elements) 즉 태그들은 크게  두 가지 종류로 구분됩니다. 하나는 블럭-레벨 요소이고 또 다른 하나는 인라인 요소입니다. 간단하게 설명하자면 브라우저에서 두 개 이상의 요소들이 한 줄로 늘어설 수 없는 경우와 늘어설 수 있는 경우 두 가지입니다.

 

---

□ 블럭 요소 예시

<!-- Examples of Block-level Elements -->

This <div>'div' element</div> is a block-level element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul> 

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
Consequuntur veritatis dolores, asperiores molestiae ratione 
sint <strong>consequatur ducimus</strong> voluptates aut 
incidunt expedita saepe voluptate numquam officiis non cumque reprehenderit unde, temporibus 
blanditiis sunt? Dolorem ullam esse iure aliquid quidem amet facilis modi corrupti ad voluptate, 
quam quae eveniet. Delectus, eius quasi?</p>

 

아직 배우지는 않았지만 style 속성을 추가하여 브라우저에서 좀 더 명확하게 볼 수 있게 위의 코드를 아래와 같이 변경해 봅시다.

 

<!-- Examples of Block-level Elements -->

This <div style="border: solid 2px green;">'div' element</div> is a block-level element.

<ul style="border: solid 2px green;">
  <li style="border: solid 2px green;">Item 1</li>
  <li>Item 2</li>
</ul> 

<p style="border: solid 2px green;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
Consequuntur veritatis dolores, asperiores molestiae ratione 
sint <strong style="border: solid 2px red;">consequatur ducimus</strong> voluptates aut 
incidunt expedita saepe voluptate numquam officiis non cumque reprehenderit unde, temporibus 
blanditiis sunt? Dolorem ullam esse iure aliquid quidem amet facilis modi corrupti ad voluptate, 
quam quae eveniet. Delectus, eius quasi?</p>

 

코드를 변경하면 아래와 같은 결과를 볼 수 있습니다.

녹색선으로 둘러싸인 부분들을 통해 <div>, <ul>, <li>, <p> 태그는 블럭-레벨 요소임을 알 수 있습니다. 이 들은 한 줄로 늘어설 수 없고 블럭 단위로 문서에 위치하고 있습니다. 또한 항상 새로운 줄로 시작되고, 왼쪽 처음부터 오른쪽 끝까지 가능한 폭넓게 펼쳐져 있으며 위아래 여백(Margin)이 자동 생성됩니다.

 

---

□ 인라인 요소 예시

<!-- Examples of Inline Elements -->

This <span>'span' element</span> is a inline-level element.

<a href="#">A Link</a>
<a href="#">B Link</a>

 

마찬가지로 위의 코드에 아래와 같이 style 속성을 추가하여 코드를 변경해 봅시다.

 

<!-- Examples of Inline Elements -->

This <span style="border: solid;">'span' element</span> is a inline-level element.

<a href="#" style="border: solid 2px red;">A Link</a>
<a href="#" style="border: solid 2px red;">B Link</a>

 

코드 변경 후 브라우저에서 아래와 같은 결과를 볼 수 있습니다.

 

빨간 선으로 둘러싸인 부분들을 통해 <span> 태그와 <a> 태그, 그리고 앞선 예시에서의 <strong> 태그까지 인라인 요소임을 알 수 있습니다. 이들은 한 줄로 늘어설 수 있고, 새로운 줄로 시작되지 않으며 필요한 만큼만 폭을 차지합니다. 또한 위아래로 여백이 존재하지 않습니다. 

 

---

여기까지 내용을 종합하여 직접 작성하고 실행해 보면 아래와 같습니다.

 

 

---

▣ division & span

분할(Division) 태그와 너비(Span) 태그는 대표적인 비의미론적 태그(Nonsemantic tag)이며 주로 HTML 문서의 공간을 분할하거나 다른 컨텐츠를 담는 용기의 역할을 합니다. 특히  CSS에 의한 스타일링 또는 자바스크립트에 의한 동적 제어의 목적으로 유용하게 사용됩니다.

 

<!-- Division -->
This <div style="border: solid 2px green;">'div' element</div> is a block-level element.
<div style="border: solid 2px green;">This 'div' element is a block-level element.</div>

<!-- Span -->
This <span style="border: solid 2px red;">'span' element</span> is a inline-level element.
<span style="border: solid 2px red;">Lorem ipsum dolor sit amet consectetur, adipisicing 
elit. Sint voluptate voluptatem eius labore pariatur nulla suscipit consequuntur 
exercitationem repellendus laborum?</span>

다만, 앞서 살펴본 바와 같이 <div> 태그는 블럭-레벨 요소이고 <span> 태그는 인라인 요소인 것이 차이점입니다. 위 예시의 실행결과에서 볼 수 있듯이 <div> 태그를 문장 중간에 사용하면 시작 태그 앞과 끝 태그 뒤에서 강제로 줄 바꿈이 발생하고, <span> 태그를 새로운 문장의 왼쪽 처음부터 사용하더라도 앞 문장에 계속 이어지며 위아래 여백이 없어 영역이 서로 겹치게 됩니다.

 

---

반응형

---

 

▣ class 와 id

클래스(class)와 아이디(id)는 주로 <div> 태그나 <span> 태그의 속성으로 주어져 HTML 문서의 스타일링이나 동적 제어의 목적으로 활용되기 때문에 CSS(Cascading Style Sheet)나 자바스크립트(JavaScript)를 이해하는데 중요한 기초가 됩니다. id 속성의 값은 HTML 문서 내에서 유일한 값이어야 하고, class 속성의 값은 여러 HTML 요소들이 공유할 수 있으며, 하나의 HTML 요소가 여러 개의 class 속성 값을 동시에 가질 수도 있습니다. 덧붙여 말하자면 여러 개의 class 속성 값들을 나열할 때는 공백(Space)으로 구분합니다.

---

□ HTML만 이용한 예시

<!-- Only HTML Tag-->
<div>
  <h1>My Website</h1>
  <p>This is my first website.</p>
</div>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div>
  <h3>About Me</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Architecto, <span>molestias</span> aliquid. 
  Neque veniam eum corporis dolorem sint cumque tempora. Quod, 
  fugiat voluptatum. Ea omnis quisquam incidunt, eligendi 
  consequatur iusto nesciunt.</p>
</div>
<div>
  <h3>Contact Me</h3>
  <ul>
    <li>Address: Seocho-daero 77, Seocho-gu, Seoul</li>
    <li>Phone  : (123) 456-7890</li>
    <li>E-mail : itsme@example.com</li>
  </ul>
</div>
<div>
  <p>Copyright &copy; 2021</p>
</div>

 

위의 코드는 간단하게 구성한 웹 페이지이며, 클래스와 아이디에 대한 이해를 돕기 위해 태그(주로 <div>, <span>)들에 id와 class 속성 및 그 값들을 아래와 같이 주어보겠습니다. 

 

□ Class와 Id를 같이 이용한 예시

<!-- class & id -->
<div id="header">
  <h1>My Website</h1>
  <p>This is my first website.</p>
</div>
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="card">
  <h3>About Me</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Architecto, <span class="highlight">molestias</span> aliquid. 
  Neque veniam eum corporis dolorem sint cumque tempora. Quod, 
  fugiat voluptatum. Ea omnis quisquam incidunt, eligendi 
  consequatur iusto nesciunt.</p>
</div>
<div class="card small">
  <h3>Contact Me</h3>
  <ul>
    <li>Address: Seocho-daero 77, Seocho-gu, Seoul</li>
    <li>Phone  : (123) 456-7890</li>
    <li>E-mail : itsme@example.com</li>
  </ul>
</div>
<div id="footer">
  <p>Copyright 2021</p>
</div>

 

다시 살펴보면 아이디의 값은 중복되지 않고 하나뿐이며("header", "nav", "footer"), 클래스의 값은 여러 개의 HTML 요소가 공통으로 가질 수 있고("card"), 한 개의 HTML 요소가 동시에 여러 개를 가질 수도 있습니다("card small"). 위의 소스코드를 브라우저에서 열어보면 아래와 같습니다.

세련되지는 않지만 나름 전체적인 구조는 잡힌 것 같습니다. 여기에서 좀 더 나아가 <head> 태그 안에 아래의 <style> 태그와 내용들을 추가하여 보겠습니다. 

 

<style>
  #header {
    color: green;
  }
  #nav {
    list-style: none;
  }
  #footer {
    text-align: center;
  }
  .card {
    border: 1px solid #ccc;
    background: #f4f4f4;
    padding: 20px;
    margin-bottom: 10px;
  }
  .highlight {
    background-color: red;
  }
  .small {
    width: 80%;
    margin: auto;
  }
</style>

 

코드가 길어지고 복잡해지는 것 같아 부담스러울 수도 있지만 원래의 목적대로 여기서는 id와 class에 집중하여 살펴보길 바랍니다. 참고로 앞서 블럭-레벨과 인라인 요소의 예시에서 보았던 것처럼 원래 HTML 요소의 속성으로 사용되던 style을 코드가 복잡해짐에 따라 별도의 <style> 태그를 생성하여 이용하는 것입니다.

일단 눈에 띄는 점은 id 속성은 '#'으로, class 속성은 '.'으로 시작되는 것입니다. 그리고 스타일과 관련된 내용들은 모두 '{ }'에 담겨 있습니다. 아래는 위의 내용을 적용한 결과입니다.

 

 

결론적으로 여러 개의 HTML요소를 동시에 조작하고 싶을 때 class를, 한 개의 HTML 요소를 조작하고 싶을 때는 id를 이용하는 것입니다.

 

---

다시 여기까지 내용을 종합하여 직접 작성하고 실행해 보면 아래와 같습니다.

 

 

---