CSS display 속성 - inline과 block
CSS 속성에서 display는 잘 알아두면 여러모로 유용하게 사용되지만 헤메이게 되는 속성 중 하나인거 같다.
- inline : width와 height 값을 설정할 수 없으며, margin과 padding값의 설정도 불가능하다.
주로 [span], [img] 태그에 이용된다.
- block : width와 height의 설정이 가능하며, 인라인과 반대로 margin과 padding도 사용가능하다.
주로 [div], [p], [form] 요소들이 있고 블록단위로 개행이 된다.
★ inline과 block의 차이점을 요약하자면 아래와 같습니다.
1. inline으로 설정하면 줄바꿈이 되지 않지만, block으로 설정하면 줄바꿈 된다.
2. inline으로 설정하면 width, height 속성을 사용할 수 없지만, block으로 설정하면 width, height 속성을 사용할 수 있다.
3. inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없지만, block으로 설정하면
상/하 margin과 padding 속성을 사용할 수 있다.
TIP
inline 속성은 li 등에 이미지를 넣을 경우 빈 여백이 생기므로,
평소 이 태그를 자주 찾지 않지만, float 속성은 div 높이값을 인식하지 못하기 때문에 해결 방안을 적어놓습니다.
이미지에 vertical-align:top;을 주면 빈 여백이 사라지므로 ie6, ie7에서도 같은 사이즈의 결과를 얻을 수 있습니다.
------------------------------------------------------------------------------------------------------------------------
SPAN이 DIV를 만났을 때
Block Element 가 줄바꿈을 한다고 했는데, 이 줄바꿈이란 다음 줄로 바뀌는 줄바꿈을 물론이고,
자신 앞에 있는 Element 와의 줄바꿈도 포함 됩니다. 즉, Block Element 의 위와 아래로 줄바꿈이 되어서
혼자 한 줄을 차지한다는 말이죠. 아래의 Source code와 출력 결과 참조하세요.
Source code
|
<HTML>
<HEAD>
<TITLE>SPAN이 DIV를 만났을 때.</TITLE>
</HEAD>
<BODY>
<SPAN style="width:50px; height:50px; background-color:gold; "></SPAN>
<DIV style="width:50px; height:50px; background-color:tomato; "></DIV>
</BODY>
</HTML> |
출력 결과
결과를 보면 알 수 있지만 줄바꿈이 없는 SPAN Element 뒤에 줄바꿈이 있는 DIV Element 가 오면
DIV Tag 위로도 줄바꿈이 생긴다는 것을 알 수 있습니다.
Source code - {display:inline}
|
<HTML>
<HEAD>
<TITLE>SPAN이 DIV를 만났지만...</TITLE>
</HEAD>
<BODY>
<SPAN style="width:50px; height:50px; background-color:gold; "></SPAN>
<DIV style="width:50px; height:50px; background-color:tomato; display:inline;"></DIV>
</BODY>
</HTML>
|
출력 결과
위와 같이 display:inline 을 지정하면 Block Element도 Inline Element 처럼 보여지게 됩니다.
반대로 Inline Element 를 Block Element 처럼 보이게 할 수도 있습니다.
------------------------------------------------------------------------------------------------------------------------
SPAN과 SPAN이 만나면
Inline Element 인 SPAN Tag를 Block Element로 나타나게 하는 방법도 있습니다.
아래의 Source code와 출력 결과 참조하세요.
Source code - {display:block}
|
<HTML>
<HEAD>
<TITLE>SPAN과 SPAN이 만나면.</TITLE>
</HEAD>
<BODY>
<SPAN style="width:50px; height:50px; background-color:gold; "></SPAN>
<SPAN style="width:50px; height:50px; background-color:tomato; display:block;"></SPAN>
</BODY>
</HTML> |
출력 결과
------------------------------------------------------------------------------------------------------------------------
문단 속에서의 display Property 사용
다음은 문장 속에서 2개의 SPAN Tag 에 display Property 를 지정하여
[display:inline], [display:block], [display:none] 의 3가지를 지정했을 경우입니다.
아래 출력 결과물은 이미지로만 나와있으므로 첨부파일과 함께 올리겠습니다.
Source code
|
<HTML>
<HEAD>
<TITLE>문단 속에서의 display Property 사용</TITLE>
</HEAD>
<BODY>
<SPAN id="span_1" style="color:tomato;background-color:#EFEFEF;">
<B>display Property를 지정한 SPAN Tag</B>
</SPAN>
<SPAN style="background-color:gold;"> display Property를 지정하지 않은 SPAN Tag</SPAN>
<table cellspacing="2" width="100%" style="table-layout:fixed;border:1px solid #333333;">
<tr>
<td class="td_button2" onClick="span_1.style.display='inline';">Inline</td>
<td class="td_button2" onClick="span_1.style.display='block';">Block</td>
<td class="td_button2" onClick="span_1.style.display='none';">None</td>
</tr>
</table>
</BODY>
</HTML> |
출력 결과
------------------------------------------------------------------------------------------------------------------------
{ display : inline-block }
inline-block 이란? Block Element가 다른 Block Element 속에 inline으로 들어 갔을 때 Block으로
보여지게 하는 속성 입니다. 아래의 P Tag을 보면 Mouse Event를 적용했을 때 글자 뿐만 아니라
P Tag이 차지하고 있는 Line 전체에 Mouse Action이 생기게 됩니다.
출력 결과물은 첨부파일을 참고해 주세요.
Source code
|
<BODY>
<P onmouseover="this.style.color='tomato';" onMouseOut="this.style.color='';"
style="background-color:#DEDEDE;">
Line 전체에 Mouse action이 생긴다.
</P>
</BODY> |
하지만 P Tag이 같은 Block Element인 DIV 같은 Tag 속에 들어가면 얘기가 달라지게 됩니다.
Source code
|
<BODY>
<DIV style="background-color:gold;padding:5px;">
<P onmouseover="this.style.color='tomato';" onMouseOut="this.style.color='';"
style="background-color:#DEDEDE;">
Line 전체에 Mouse action이 생긴다.
</P>
</DIV>
</BODY> |
그렇기 때문에 Line 전체에 어떤 Mouse action을 줄 필요가 있을 때 바로 'inline-block' 이라는 값을 주어서
P Tag을 원래의 block 형태로 나타 낼 수 있습니다.
inline-block 이라는 값은 Internet Explorer에서만 작동합니다.
Source code
|
<BODY>
<DIV style="background-color:gold;padding:5px;">
<P onmouseover="this.style.color='tomato';" onMouseOut="this.style.color='';"
style="background-color:#DEDEDE;display:inline-block;">
P Tag이 본연의 자세로 돌아가다.
</P>
</DIV>
</BODY> |
------------------------------------------------------------------------------------------------------------------------
{ display : none }, { display : block }
CSS display 속성 - inline과 block
