[HTML] 공간 분할 태그 (span, div, 시맨틱 태그)

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

네이버와 같은 유명한 사이트를 분석하기 위해 개발자 도구(F12)를 보면

div 태그가 수없이 많은 것을 볼 수 있다.

 

그런데 HTML을 처음 접하면 span태그랑 div태그는 하는 일도 없고

도대체 왜 많이 쓴다는거지???? 라는 생각이 들 수 있다. (=과거의 나)

 

이에 대해서 오늘 자세하고 쉽게 알아보자.

 

1. <span>태그

<p>내가 가장 좋아하는 색은 <span style="color: blue;">파란색</span>이야.</p>

이번 게시물의 주제가 공간분할 태그이지만,

span태그는 공간을 분할한다기 보다는 css를 적용할 때 사용한다.

하지만, 보통 span태그와 div태그를 많이 묶어서 설명하기 때문에 이번 게시물에서 다루었다.

 

문장을 작성하고, 그 문장 안에서 몇 글자만 스타일을 적용하고 싶을 때 span태그를 사용한다.

 

2. <div>태그

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 13 million inhabitants.</p>
</div>

div태그는 정말정말 많이 사용한다.

 

span과 묶어서 설명하는 이유는 div태그도 css를 적용하기 위해서 사용하기 때문이다.

css를 적용하는 기능의 위주로 보면, span과 div의 가장 큰 차이는

span은 inline 형식이고, div는 block 형식이다.

 

쉽게 말하면, span태그는 줄바꿈이 되지않고 div 태그는 줄바꿈이 된다.

 

하지만, div 태그의 가장 큰 쓰임은 공간을 분할하기 위함이다.

우리가 지금까지 배웠던 태그들을 차례대로 작성해보면, 다음과 같이 위에서 아래로 나열된다.

 

하지만, 각 도시의 이름과 설명 두 문장을 묶어서 카드로 만들고

이 카드들을 가로로 나열하고 싶다면 어떻게 해야할까?

아쉽지만 지금까지 배운 태그로는 어떻게 할 수 없다.

 

이 때 div를 사용하는 것이다. 물론 가로로 나열하는 것은 div태그로만 가능하진 않고 css를 적용해야한다.

 

여기서 div의 역할은 단지, 각 도시의 이름과 설명 두 문장을 그룹으로 묶는 역할이다.

 

지금은 이해하기 어려울 수 있다.

'그냥 그룹으로 묶는 거구나' 하고 넘어간 뒤 코드를 직접 작성하는 연습을 하면 이해가 될 것이다.

최대한 많은 예제를 접하면 된다. 예제 사이트를 활용하면 좋다.

 

요점만 말하면,

div 태그는 특정한 요소들을 그룹으로 묶어 css를 적용하거나 공간에 배치하기 쉽게 도와주는 역할이다.

 

3. 시맨틱 태그

시맨틱(semantic)은 '의미론적인'이라는 의미이다.

시맨틱 태그에는 <header>, <nav>, <section>, <article>등 약 21개의 다양한 태그가 있다.

아래 그림을 보면 각 태그가 어떤 것을 의미하는 지 알 수 있다.

 

사용은 다음과 같이 할 수 있다.

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

 

'이게 뭐야?' 싶겠지만  웹 페이지들이 비슷한 구조를 많이 가지고 있고,

가장 위에 들어가는 것을 사람들은 <div class="header">로 많이 사용하여

이를 HTML에서 <header>태그로 사용할 수 있도록 만들었다고 생각하면 된다.

 

div 태그처럼 시맨틱 태그를 사용한다고

특정 위치를 지정하거나 특별한 기능을 자동으로 제공하는 것은 아니지만,

웹 구조를 명확하게 하고, 스타일을 적용하거나 공간 분리를 편하게 적용할 수 있다.