- HTML의 렌더링 방식 - HTML이 브라우저에 태그를 렌더링 할 때에는 display 속성에 따른다.
-
우리가 알아야 할 display의 값은 block과 inline이다. (이외에도 수많은 display 방법이 있다.)
- block : 박스모델을 적용받는 블럭요소.
- inline : 영역을 가지지 않고 한줄로 표시되는 인라인요소
-
모든 HTML태그는 기본 display 값을 가지고 있다.
- block 요소 : div, p, form, ul, ol, li, h1~h6 등등
- inline 요소 : span, img, a, label, input 등등
- div와 span은 아무런 의미를 가지지 않는 태그로 ajax등으로 데이터를 삽입하기 적당한 태그이다.
- block요소는 자식노드로 inline요소를 가질 수 있지만, inline요소는 자식노드로 block요소를 가질 수 없다. 이것은 block요소가 상속받을 가능성이 있는 박스모델 속성값을 부모요소가 inline인 경우 제대로 상속 받을 수 없기 때문이다.
-
개발자가 범하기 쉬운 HTML 마크업 오류
-
inline 요소 내에 block요소를 쓰는 경우
- <span id="ajaxText"></span>로 마크업한 후 innerHTML로 block요소인 ul 또는 div를 넣는 것은 오류 (span대신 div를 사용해야 맞다)
-
레이아웃을 해치는 div의 사용
-
<h2>타이틀 이다 <a href="#"><img src="모어버튼" alt="모어" /></a></h2> 로 마크업 된 코드를
<h2>타이틀 이다 <div id="모어버튼"></div></h2> 으로 마크업을 바꾸고 innerHTML로 동적으로 버튼을 삽입하는 경우 div가 block요소 이므로 block요소의 특성상 줄바꿈이 되어 영억을 가진상태로 렌더링 되어 디자인을 해치게 된다. div대신 a요소와 같은 inline요소인 span태그를 써주는 것이 맞다.
-
-
제한적인 child를 가지는 부모노드들에 대한 오용
-
ul, ol은 자식노드로 li만을 가질 수 있으며 dl은 dt와 dd만을 가질 수 있다.
-
<ul class="목록">
<div id="목록아이템"></div>
</ul>
위와 같은 태그로 작성하고 div에 innerHTML로 li를 넣는것은 오류이다. ul 태그는 자식노드로 div를 가질 수 없다. 이 경우 <ul class="목록" id="목록아이템"></ul> 로 직접 ul에 id를 주어 innerHTML을 쓰는 것이 가능하지만 ul 태그에 자식노드가 하나도 존재하지 않는 것 또한 오류이기 때문에 <div id="목록아이템"></div>로 마크업하고 ul과 li 모두를 innerHTML로 넣는 것이 적당하다.
-
-
-
-
결론!!
block요소와 inline요소의 차이점을 이해하고 div와 span을 적절히 사용할 줄 아는 개발자가 되자!
[출처] 개발자를 위한 DIV와 SPAN의 적절한 사용법|작성자 제이리
