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으로 토글하는 스크립트가 많이 사용營윱求