inline 태그

① 같은줄에 나온다 → display : block으로 설정하면 두줄로 표현된다

② width와 height 개념이 없다 


block 태그

① 한줄에 하나씩 다른줄에 나온다 → display : inline으로 설정하면 한줄 에 표현된다.

② width와 height 개념이 존재한다


블럭 레벨의 태그는 아래와 같다.

 

p, div, isindex, fieldset, table

h1, h2, h3, h4, h5, h6

pre, hr, blockquote, address, center, noframes

ul, ol, dl, menu, dir


텍스트 레벨의 태그는 아래와 같다.

 

a, br, span, bdo, object, applet!, img, map, iframe
tt, i, b, big, small, u, s, strike, font, basefont
em, strong, dfn, code, q, sub, sup, samp, kbd, var, cite, abbr, acronym
input, select, textarea, label, button




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




(예제) 링크태그의 블록화

<A>태그에 CSS속성을 활용하면 <P>, <DIV>태그처럼 하나의 블록처럼 보이게 되며,

CSS를 이용한 디자인의 종류가 많아진다.

 

alink-frui2store.gif?type=w3

<a href="#" class=block>링크</a>

<a href="#" class=block>링크</a>

<a href="#" class=block>링크</a>

<a href="#" class=block>링크</a>

이 디자인을 구현하기 위한 HTML코드는 위의 단 4줄이다.

이전의 테이블코딩으로는 <TR>에 this.backgroundColor='#494949'를 써주었지만...

CSS만으로도 간단하게 구현이 된다.

 

a.block:link {display:block;width:300px;}
a.block:active {display:block;width:300px;}
a.block:visited {display:block;width:300px;}
a.block:hover {display:block;width:300px;}

 

더 좋은 것은...마우스오버햇을 때...글자색상도 바꿀 수 있다.

 

이쯤되면...디자이너가 한마디 꼭 한다!

여태 이걸 써먹었던 프로젝트마다....디자이너가 이 말을 꼭한다.

 

"그렇게하면 글자밖에 못하지 않느냐? 이미지도 들어가고 테이블도 들어가야하는데..."

 

된다!

 

alink2-frui2store.gif?type=w3

<a href="#" class=block>
 <div class=limg><img src="김건모10집앨범.jpg></div>
 <div class=rtxt><b>김건모 10집</b></div>
 <div class=rtxt>국민가수 김건모가 새로운 음반을 들고 나타났다. 지금 여러 신인가수와 기존에 인기있던 </div>
</a>

 

display:block 이 속성이 부여되면서 링크자체가 Block속성을 지니게 되었기 때문에

링크안에 블록태그를 넣을 수 있다.

 

아마도...두번째 예처럼 사이트에 적용하는 것은....

지금 내가 하고 있는 프로젝트가 세계 최초가 되리라 확신한다!

자랑......으으음....이다....욕하지말아주시라....^^;;

 

 

 

 

링크태그에 이 것을 사용하려면...

4의 핸디캡이 존재한다.

1.

width값을 정의하지 않으면, text나 이미지, 블록에 마우스가 올라갔을 때에만

<A>태그가 적용된다. 이유는 <A>태그 자체가 inline속성인데,

겉모양만 block으로 바꾸었을 뿐, 본래 가지고 있는 속성은 변하지 않는다.

<A>태그 자체가 태그내의 요소에만 링크를 적용하는 것이다. (그리구...영역이 100%가 되버린다.)

즉, 빈 공간에는 마우스가 올라갔을 때 링크가 적용되지 않는다.

 

2.

windowXP에서의 explorer6.0에서는 padding속성 자체에 오류가 있다.

그래서...<A>태그 자체에 padding속성을 쓰면

디자인의 너비높이가 의도했던 것보다 크게 나올것이다.

그래서...<A>태그 내의 구성요소에 margin값을 적용하여 여백을 조정하는 것이 좋다.

 

3.

<A>태그 내에서 꽉차는 영역을 설정하게 된다면...

링크에 적용한 스타일이 적용되지 않는다.

<A>태그 내에 넓은 영역을 가진 블록을 사용하려면 꽤 세세한 컨트롤이 필요할 것이다.

 

4

<A>태그내에서 text에 스타일이 지정되면 hover시 text의 색상이 바뀌지 않는다.

그러니...CSS에서 TAG에 대한 스타일을 지정했다면 hover시 text색상이 바뀌지 않는다.

물론...<TABLE>태그를 적용했다면 <TABLE>태그 내의 text색상또한 바뀌지 않는다.

 

 

IFRAME을 테스트해봤는데..엉망으로 구현된다. 오류의 일정한 법칙을 찾지를 못하겠다.

 

 

추신:

현재 위와 같은 구성을 했을 시

Mozilla Firefox에서는 제대로 구현이 되지 않는다.

마우스오버시 <div></div>마다 개별적으로 hover style이 구현된다.

 

이는 내 개인적인 생각으론 Mozilla firefox가 잘못 구현하고 있는 것으로 판단된다.

 

그 이유는...

<a href="#" class="strong">여기를 <strong>Click</strong>하세요</a>

이처럼 중간에 강조를 위한 태그사용후

<style>

a.strong strong {display:block}

</style>

이 강조를 Block화 시키려 할 때 문제가 발생하게 되는 것이다.

이는 분명 Mozilla Firefox에서 개선되어야 할 문제라고 판단된다.