기초코딩- HTML의 기초(의미없지만 필요한 태그 div, span)

저번 글에 이어서 계속해서

HTML에 대해 알려 드리도록 할게요

저번 글에서는 

attibute 활용에

대해서 설명해드렸는데요.

 

만약 기억이 잘 나지 않으시거나

혹시 모르시는 분들은 

밑에 글을 참고해주세요.

tm-csc.tistory.com/1151

기초코딩- HTML의 기초(form 태그 - 수많은 type)-2편

지금껏 atribute를 활용하면

굉장히 강력한 사이트를 

만들 수 있다는 걸 알려드렸는데요.

 

이번 글은 어떤 tag들은

의미가 있고 반대로 의미가 

없는 태그들에 대해서도 

이야기해보도록 하겠습니다.

 

가장 우선적으로 HTML 문서에서

가장 많이 볼 수 있는 태그는

바로 DIV라는 태그입니다.

 

이런 식으로 생긴 태그이죠.

 

그런 div 태그란 무엇일까요?

 

div 즉 division이라는 

단어에서 나온 태그입니다.

(division : 분할, 구분)

 

쉽게 생각했을 땐 그냥

웹사이트에 하나의 박스가

생겼다고 생각하면 편합니다.

 

이 박스의 역할을 말 그대로

많은 태그들을 담을 수 있죠.

 

이렇게 저번에 작성했던

태그들을 div태그 안에 

넣는다면 어떻게 될까요?

 

바로 이렇게 저번처럼 한 줄로

나열된 형식이 아닌

박스에 담긴 것처럼 div안의

태그는 한 줄로 나열되어있고

다른 div끼리는 위아래로

위치하는 걸 볼 수 있죠.

 

이것만 보더라도 div는

어떠한 의미를 가지고 

있지 않는 태그이지만

꼭 필요한 태그라는 건

알 수 있겠죠.

 

당연히 div 외에도 

같은 기능을 가진 태그들이

존재합니다.

 

 

header라는 태그만 해도

div와 똑같은 박스 같은 기능인데요.

굳이 div가 아닌 header라는

태그를 사용하는 이유가 무엇일까요?

 

그 이유는 div라는 태그는

앞으로 정말 많이 사용하게 될 테지만

모든 부분을 div라는 태그를

사용하고 그위에 id로 태그의 네임을

부여하는 방식으로 사용한다면

태그가 길어지면 길어질수록

헷갈릴 수 있기 때문입니다.

 

특히나 요즘같이 혼자 개발하는 것이

아닌 공동작업을 할 땐 오히려

대표적인 header나 main 또는

footer 같은 태그는 div 태그와

동일한 기능이지만 누구나

쉽게 해당 박스의 기능을

짐작할 수 있죠.

 

이게 바로 div를 많이 사용하지만

최대한 바로 의미를 알아볼 수 있는

태그를 사용하는 이유이기도 합니다.

 

div와 마찬가지로 span이라는 

태그도 앞으로 많이 쓰이게 되는

의미가 없는 태그 중 하나인데요.

 

이는 짧은 text를 위한 태그로

앞으로 정말 많이 사용하시게

될 것입니다.

 

여기까지 궁금한 점이 있으시다면

댓글로 작성해주세요.

 

그리고 공감과 구독도 부탁드립니다.