display:block;
display:inline;
display:none;
위에것은 너무나도 많이 쓸 것입니다.
오래전부터 자바스크립트를 이용하여
visibility속성과 함께 레이어를 보였다가 숨겼다가 하는 기능을 많이 사용했기 때문이죠.
기본적으로, 태그가 지닌 기본적인 display속성을 바꾸는 역할을 합니다.
div {display:inline;}
<div>태그가 <em>, <strong>, <span>태그처럼 구현되도록 바꾸죠.
span {display:block}
<span>태그가 <div>태그처럼 구현되도록 바뀝니다.
여기까지는 머 큰 차이가 없습니다.
중요한 것은 요 아래부터입니다.
정확하게 설명할만한 단어가 알려져있지 않기에
제 임의로 최종태그라고 이름붙여 사용하는 태그들이 있습니다.
<p>태그안에는 <div>, <table>, <blockquote>같은 block태그가 위치하지 못합니다.
<li>태그안에는 <div>, <table>, <blockquote>같은 block태그가 위치하지 못합니다.
<address>태그역시 block태그가 위치하지 못합니다.
즉, <p>, <li>, <address>처럼 최종태그인 태그안에는
오로지 inline태그들만이 위치할 수 있습니다.
또한, inline태그를 display:block으로 바꾸어 사용할 수도 없습니다.
이럴때 쓰는 것이 display:block입니다.
<p>
<img src="사진.jpg" />
<span>이 사진은 13살때의 제 모습입니다.</span>
</p>
와 같이 코딩하고서
img에 <br />태그 없이 줄내림을 하고 싶다면
p span {display:block;}을 해주면 되는데...
<p>태그는 최종태그로 내부의 block속성을 인정하지 않습니다.
이때....
p {display:block;}
p span (display:block;}
처럼 정의해주면 원하는 디자인을 볼 수 있게 됩니다.
<ul>
<li><img src="사진.jpg" /><span>이 사진은 13살때의 제 모습입니다.</span></li>
</ul>
<li>는 list-item이라는 고유의 display속성을 지니고 있기 때문에,
역시 내부에 ul, ol, dl외의 block형식을 사용하면 태그가 완료된 것처럼 구현이 됩니다.
(한마디로 깨지져~)
이때, <ul>, <li>모두 display:block로 정의해주면
위 <p>태그에 사용한 것처럼 사용할 수 있게 됩니다.
또다른 예로
li {height:21px;}
li a {display:block;}
위와 같이 사용할 때도...li {display:block;}은 필수 입니다.
별루 어려운 내용도 아니지만,
display속성의 저런 속성을 알게 되면
보다 다채로운 태그사용이 가능해질 것입니다.
단, li태그내에 block형식이 위치할 때...
IE6.0 SP2 이하에서는 요상한 padding-bottom값 버그가 생기니
너무 긴 list에는 가급적 사용을 금합니다.
TIP!!!
팁일까?
TABLE위주로 코딩하던 시절
<tr>태그를 보였다가 숨겼다가 하기 위해선...
<tr>외곽에 <span>을 두어...
display:none 과 display:inline으로 토글하는 스크립트가 많이 사용됬습니다.
왜냐면,
<tr>은 td의 그룹핑을 위한 태그이고,
<td>는 inline범주에 속했기 때문입니다.
하지만, loose.dtd와 xhtml방식에서는
<span>은 더이상 <tr>외곽에서 아무런 효과를 주지 못합니다.
(FF에서는 table코딩방식을 사용해도 아예 먹히지도 않죠.)
의외로...이 차이점을 모르는 프로그래머들이 많아서
오래전에 구축된 프로그래밍에 디자인리뉴얼을 진행하다보면,
수정요청오는 것의 30%가 이것때문이고,
50%는 iframe문제,
나머지 20%는 id, name값 호출문제입니다.
먄약, show hide기능의 스크립트를 짜고서...
디자인이 깨진다면...
~~~.style.display='inline'을 ~~~.style.display='block'으로 바꿔주는 것만으로
90%는 해결됩니다.
나머지 10%는 innerText를 innerHTML로 바꿔주거나...
innerHTML에 <table>을 뿌려주는 것...
[출처] display:block 쪼금 더~|작성자 과일장수