td안에 img와 div 나열하기

출처 : http://blog.naver.com/ch4feel?Redirect=Log&logNo=61358620

1. HTML의 렌더링 방식 - HTML이 브라우저에 태그를 렌더링 할때에는 display 속성에 따른다

2. 우리가 알아야 할 display의 값은 block과 inline이다(이외에도 수많은 display방법이 있다)

• block : 박스모델을 적용받는 블럭요소
• inline : 영역을 가지지 않고 한줄로 표시되는 인라인 요소

3. 모든 html 태그는 기본 display 값을 가지고 있다

• block 요소 : div, p, form, ul, ol, li, h1~h6 등등
• inline 요소 : span, img, a, label, input 등등

4. div와 span은 아무런 의미를 가지지 않는 태그로 ajax 등으로 데이터를 삽입하기 적당한 태그이다

5. block요소는 자식노드로 inline요소를 가질 수 있지만, inline 요소는 자식노드로 block 요소를 가질 수 없다. 이것은 block 요소가 상속받을 가능성이 있는 박스모델 속성값을 부모요소가 inline인 경우 제대로 상속받을 수 없기 때문이다

6. 개발자가 범하기 쉬운 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요소와 같은 line요소인 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을 적절히 사용할 줄 아는 개발자가 되자