본문 바로가기
프로그래밍 놀이터/Web

[HTML] <div></div> 와 <div /> 의 차이점

by 돼지왕 왕돼지 2013. 6. 26.
반응형


 <div> </div> 와 <div /> 의 차이점

 

[HTML] <div></div> 와 <div /> 의 차이점


필자가 html, css 관련하여, 특히 position 에 관련한 여러가지 실습 도중 이상한 현상을 발견했다.

<div style="border:solid; width:100px; height:100px;"></div>
<div style="position:absolute; left:20px; top:20px; border:solid; border-color:red; width:120px; height:120px" />
<div style="border:solid; width:200px; height:200px;">
<a href="#" style="position:absolute; left:10px; top:10px;">감자</a>
</div>


[HTML] <div></div> 와 <div /> 의 차이점어라? 왜 두번째 div 의 left, top 좌표에 영향을 받지?


분명 세번째 div 는 position:static 인데, 두번째 div 값의 위치에 영향을 받고 있었다.





게다가 a 태그 안에 있는 녀석의 값은 absolute 이고, 그 부모는 static 이기 때문에 windows 기준으로 "감자" anchor 가 위치되어야 하는데, 이 녀석도 세번째 div 의 값에 relative 한 값으로 위치배정이 되어 있었다.


CSS position 값에 대해 자세히 알고 싶으세요? 여기를 클릭


제대로 된 원인을 찾지 못하고 새로운 example 을 만들다 발견한 사실은..

바로 div 태그의 close 방법에 대한 내용.


<div style="border:solid; width:100px; height:100px;"></div>

<div style="position:absolute; left:20px; top:20px; border:solid; border-color:red; width:120px; height:120px"></div>

<div style="border:solid; width:200px; height:200px;">

<a href="#" style="position:absolute; left:10px; top:10px;">감자</a>

</div>


[HTML] <div></div> 와 <div /> 의 차이점이제야 정상적으로 나오는군?!


단지 div 태그를 닫는 방법을 <div /> 에서 <div></div> 로 바꾸어주었을 뿐인데,

이제야 원리대로 잘 돌아간다.


구글링 해보니,

<div/> 태그는 제대로된 syntax 가 아니라고 한다.


<div> </div> 만이 제대로 인식되며, <div /> 로 하면 어떤 side effect 가 생길지 예측하기 힘들다는 것.

그러니 항상 제대로 된 syntax 만을 사용하는 습관을 길러야 한다.


그럼 태그 시작과 동시에 끝을 맺을 수 있는 태그들은 어떤 녀석들일까?


area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr


위에 열거된 태그들은 Void element 라 불리는 녀석들인데, 저 녀석들은 따로 closing tag 를 지원하지 않는다.






따라서 <br></br> 은 syntax error. 정확한 syntax 는 <br/> 이다.

위에 열거된 녀석들을 제외하고는 모두 closing 태그를 따로 사용해야 한다는 것!

참고로 xhtml 이 적용되기 전의 버전에서는 이런 erroneous 한 syntax가 통용되는 경우도 있는데, xhtml과 html5에서는 이에 대해 엄격하니 주의하시길~



반응형

댓글