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>을 뿌려주는 것...