HTML 컨테이너와 전역속성

컨테이너 태그

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그를 ‘컨테이너’라고 합니다. 컨테이너는 콘텐츠의 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 무척 유용합니다.
다음은 컨테이너 역할을 담당하는 두 가지 대표적인 태그들입니다.

<div> : 블록 레벨의 컨테이너 요소를 만드는 태그
<span> : 인라인 레벨의 컨테이너를 만드는 태그

블록 레벨 컨테이너, <div>

<body>
  <div>
    <p>행복하고 즐거워요~</p>
    <p>HTML 공부!</p>
  </div>
  <div>
    <p>슬프고 힘들어요</p>
    <p>적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

위 코드에서는 두 개의 <div> 컨테이너가 사용되었습니다. 각각의 컨테이너는 두 개의 <p> 태그를 감싸고 있다는 점이 같지만, 각각이 포함하고 있는 태그의 주제(공부와 다이어트)는 확연히 다릅니다. 이렇듯 컨테이너 요소는 '영역을 구분하는' 역할을 하기 위해 주로 사용되곤 합니다.
<div> 태그는 블록 레벨 컨테이너를 만듭니다. 따라서 개발자 도구에서 공간을 확인해 보면 하나의 블록(층)을 형성하고 있는 것을 확인할 수 있습니다.

앞에서 언급한대로, 컨테이너 태그는 콘텐츠 내용이나 레이아웃에는 아무런 영향을 끼치지 않았습니다.

인라인 컨테이너, <span>

<body>
  <p>
    예능 프로그램 즐겨 보시나요?
    저는 <span>골때리는 그녀들</span> 재미있게 보고 있습니다!
  </p>
</body>

<span> 태그는 인라인 컨테이너입니다. 블록 레벨 요소의 내부에서 콘텐츠를 영역 별로, 또는 목적 별로 구분하는 역할을 하기도 하고, CSS를 통한 스타일 적용을 위해 사용되기도 합니다. 위 예제에서는 예능 프로그램의 제목(골때리는 그녀들)을 인라인 컨테이너로 묶어두었지만, 역시나 웹페이지의 결과 자체에는 별다른 영향을 주지 않습니다.

전역 속성

전역 속성(Global attributes)이란 모든 HTML 태그에서 공통적으로 사용할 수 있는 속성을 말합니다. 앞서 '02-2 속성과 주석'에서는 속성이란 태그의 부가적인 기능을 정의하는 것으로, 선택사항이라는 것을 설명한 바 있습니다.
전역 속성은 그 종류가 무척 다양하지만, 사용 빈도가 높은 것이 있는 반면 거의 사용되지 않는 속성들도 다수 존재하기 때문에 사용자가 모든 전역 속성을 알고 있을 필요는 없습니다. 다음 세 가지 속성은 사용 빈도가 무척 높은 대표적인 전역 속성들입니다.

id : 요소에 고유한 이름을 부여하는 식별자 역할을 함
class : 요소를 그룹 별로 묶을 수 있는 식별자 역할을 함
title : 요소에 대한 추가 정보를 기입할 수 있는 텍스트 속성으로, 사용자에게 툴팁을 제공함

고유한 식별자, id

id 속성은 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위해 요소에 대한 고유식별자를 지정합니다. 하나의 요소는 하나의 id를 가질 수 있으며, 각 요소에 대한 id는 고유한 값이어야 합니다. 아래 예제는 앞서 <div>를 살펴보기 위해 작성했던 예제에 id 속성값을 추가한 예입니다.

<body>
  <div id="study">
    <p>행복하고 즐거워요~</p>
    <p>HTML 공부!</p>
  </div>
  <div id="diet">
    <p>슬프고 힘들어요</p>
    <p>적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

위와 같이 id가 지정된 요소를 식별한 다음 스타일시트(CSS)나 스크립트(JavaScript)를 추가하곤 합니다.

기본적으로 id의 값은 사용자가 자유롭게 정할 수 있습니다. 그러나 공백(스페이스나 탭 등)을 포함해서는 안되며, 문자나 숫자, 하이픈(-)과 언더스코어(_) 등의 기호를 사용해서 작성해주어야 하는 등 몇몇 제약사항도 존재합니다.

그룹화 식별자, class

class 속성은 여러 요소에 같은 이름의 식별자를 지정하여 요소를 그룹화할 수 있는 식별자입니다. id와 달리 각 요소가 고유한 값을 가지지 않아도 됩니다. 또한 id와 마찬가지로 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위해 사용하곤 합니다.

<body>
  <div>
    <p class="text content">행복하고 즐거워요~</p>
    <p class="text content">HTML 공부!</p>
  </div>
  <div>
    <p class="text content">슬프고 힘들어요</p>
    <p class="text content">적게 먹고 운동하는 다이어트!</p>
  </div>
</body>

class 속성은 하나의 요소가 여러 개의 식별자를 가질 수 있습니다. 만일 요소가 두 개 이상의 class 값을 가지길 원한다면, 위 예제와 같이 공백을 이용해 값을 서로 구분해주어야 합니다. class의 값 역시 id의 값처럼 사용자가 자유롭게 정할 수 있습니다.

요소를 설명하는 추가 텍스트, title

title 속성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다. 요소에 title을 추가하면, 렌더링 되고 난 후의 결과물에 마우스를 얹었을 때 툴팁(tooltip)이 나타나게 됩니다.

툴팁이란 커서를 얹었을 때 나타나는 도움말을 뜻합니다.

<body>
  <p title="현재의 심정">화창한 날씨... 어디론가 떠나고 싶다!</p>
</body>