HTML_태그 감싸기 (feat. <div>)

하나의 페이지를 만드려면 수많은 태그가 생긴다.

이 태그들이 규칙성이나 정리없이 쭉 나열된다면?

수백 수천줄이 넘어간 코드 덩어리는 더 이상 관리하기가 어려워진다.

  <p>1</p>
  <p>2</p>
  <p>3</p>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <input>7</input>
  <input>8</input>
  <img>9</img>
  <img>10</img>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <input>7</input>
  <input>8</input>
  <img>9</img>
  <img>10</img>

몇줄 안되지만 벌써 보기 안좋다.

 

코드를 깔끔하게 정리하고 묶어주는 태그가 바로 Division 즉 <div>태그 이다.

말그대로 레이아웃을 나누어 감싸주는 기능을 가지고 있는데,

그 밖에도 css적인 요소를 줄때도 필요하며 id, class등 명명을 해줌으로써 Javascript 등에서 쉽게 불러올 수 있다.

아마도 태그 중에서는 가장 많이 사용된다고 생각한다.

 

사용법은 아주 간단하다.

<div id='title'>
    <h1>제목입니다.</h1>
</div>

<div id='article'>
    <p>내용입니다.</p>
    <img src='url/image' />
</div>

이런식으로 구역을 나누어 주고 해당 구역 안에서 어떤 내용이 들어갈지 예상하게 해주는 것이다.

div가 추가됐다고 해서 바뀌는 것은 거의 없다.

구역별로 줄바꿈이 이루어진다는 것 뿐이다. (style에서 display속성이 block으로 변경된다.)

이 줄바꿈 마저도 css와 같은 style sheet를 사용하면 손쉽게 바꿀 수 있다.

 

내가 아닌 다른사람이 코드를 봐야한다거나 수정이 필요할 수 있는 경우 (거의 모든 경우)

규칙을 정하고 감싸는 태그로 내가 작성한 코드가 어떤 코드인지 예상토록 하는 것은 개발자의 기본 소양이다.

항상 기억해두자.