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

<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>

어라? 왜 두번째 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>

이제야 정상적으로 나오는군?!

단지 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에서는 이에 대해 엄격하니 주의하시길~

<div/>, <div></div>, <div></div> </div> 차이, Area, BASE, BR, closing tag, col, command, correct syntax, css, css position, CSS3, div, embed, hr, HTML, html5, img, input, keygen, Left, Link, meta, Param, position:absolute, position:relative, position:static, single closing tag, source, syntax, Top, track, void element, w3c, wbr, xhtml, 문법, 차이