이번 포스팅은 웹을 구성하는데 있어 가장 기초가 되는 <태그>에 대한 기초중의 기초에 대해 알아보려고 합니다.

 

먼저 태그란 <div> 같이 <> 안에 들어가는 요소들을 말합니다.

 

태그들은 어디에 어떤 내용이 어떻게 들어갈지에 대한 밑바탕을 제공합니다.

여기부터 여기까지가 어떤 내용이다~ 라는 것을 컴퓨터와 작업하는 사람에게 알려주는 지표라고 생각하면 좋습니다.

 

 

여기서 중요한 포인트는 그 어디서부터 어디까지를 표시해야 하기 때문에 거의 모든 태그는 시작하는 태그(연다고 합니다)와 끝맺는 태그(닫는다고 합니다)가 있습니다.

모든 짝이 있는 태그('문단태그'라고도 합니다)의 여닫는 방식은 똑같습니다.

 

 

div라는 태그로 예를 들자면

<div> 가 여는 태그고 (시작태그)

</div> 가 닫는 태그입니다. (종료태그)

 

참 쉽죠?

 

이렇게 열고 닫은 태그 안에 내용을 넣는것을 '감싼다' 라고 합니다. 

<div>
    내용
</div>

이게 한 세트입니다. 내용을 div로 감쌌다 라고 할수 있겠네요

 

 

어떤 웹페이지의 소스를 뜯어본 적이 있다면, 혹은 웹페이지를 구성하는 파일을 열어보셨다면 이미 많이 보셨을 수 있겠지만 대부분의 소스코드는 이렇게 하나의 태그로만 감싸져있지 않습니다

 

<div> 
    <section>
        내용
    </section>
</div>

이런식으로 하나의 태그 안에 또 하나의 태그가 들어갈 수도 있는데요 (불가능한 경우도 있는데 이에 대해서는 추후 다른 포스팅으로 설명하겠습니다)

구분을 쉽게 하기 위해 한단계 안의 태그 혹은 내용은 들여쓰기(보통은 tab으로 들여쓰기합니다)를 해줍니다.

 

*이렇게 어떤 태그 안에 다른 태그가 들어가면 부모와 자식관계가 됩니다. (여기서 section은 div의 자식태그고 div는 section의 부모태그입니다)

 

 

 

여기서 가장 중요한건 <div>를 열고 그 안에 새로운 태그(여기서는 section)를 열었다면 </div>로 다시 닫기 전에 안에 있는 section 태그를 먼저 닫아줘야 한다는 것입니다

 

이를테면

<div>
    <section>
        내용
</div>

혹은 

<div>
    <section>
        내용
</div>
     </section>

이렇게 쓰면 안된다는 뜻입니다.

 

*코드가 길어지면 이렇게 닫는 태그의 위치를 잘못 쓰거나 빼먹어서 레이아웃이 돌연 엉망진창이 되는 경우가 생각보다 많습니다

이걸 방지하기 위한 가장 좋은 방법은 처음부터 태그하나를 열고닫아 먼저 짝을 만든 다음 그 사이에 내용을 작성하는 방법입니다.

태그 뿐만 아니라 따옴표나 괄호 같은것들도 처음부터 한쌍을 만들고 시작하시는것이 오류를 줄이는데 많은 도움이 될것입니다

 

 

 

 

그런데 앞서 말했다시피 '거의' 모든 태그에는 짝이 있다고 했는데 짝이 없는 태그도 존재합니다

어째서 짝이 없을까요? 

내용을 감쌀 필요가 없는 태그이기 때문입니다

이런 태그들은 단독으로 쓸모를 다하며 태그 자체에 내용을 담고있기 때문에 열고 닫지 않습니다. 이런 태그를 단독태그라고 부릅니다.

 

가장 대표적인 단독태그로는 <br> 태그가 있습니다

이 태그는 줄바꿈을 하는 태그인데(br은 break 라는 단어의 줄임말입니다) 줄이 바뀌면 역할을 다 하기 때문에 닫아줄 필요가 없습니다. 닫을수 없다고 보는게 더 정확할것 같네요

 

단독태그의 종류는 다음과 같습니다

<area> <base> <br> <col> <command> <embed> <hr> <img> <input> <keygen> <link> <meta> <param> <source>

이런 태그들은 스스로 닫는다는 의미에서 >앞에 슬래시를 붙여 <br />이런식으로 쓰기도 합니다 (/앞에는 반드시 띄어쓰기를 해주세요)

 

*<br>, <br /> 모두 맞는 작성법이지만 단독태그를 </br>, </hr> 등으로 종료태그처럼 쓰는것은 잘못된 표기로 이렇게 작성해서는 안됩니다

 

 

 

 

그리고 마지막으로 단독태그가 아니지만 간혹 닫지 않아도 정상적으로 작동하는 태그가 있습니다.

이건 브라우저가 알아서 태그를 닫아주는 경우인데 코드가 복잡해지면 상당히 헷갈리니까 일부러 파일 용량을 줄이기 위한 작업을 하는게 아니라면 잘 닫아주도록 합시다