CSS display:block display:inline
CSS에서 Display는 문자그대로 유저에게 "보여주는" 속성입니다.
보여줄때 어떻게 보여주느냐에 따라 몇가지의 값을 갖습니다.
block, inline, inline-block, none, table,.. 이죠.
1. none
그냥 보여주지 않는 것이죠. (ex; display:none)
이 속성값은 원래 보여져야할 부분이 차지하고 있던 영역까지 없애버립니다.
이에비해 visibility라는 CSS 속성이 있는데 visibility:hidden 라고 코딩하면 보이지 않게 감춰버린 요소의 자리가 여전히 남아 있는 상태로 보여집니다.
<style>
.xx {visibility: hidden;}
.yy {display:none;}
</style>
<p>여기는 첫행입니다</p>
<p class="xx">Visibility 로 감춰집니다</p>
<p>바로 위에는 Visibility 속성으로 줄이 없어졌는데 공간이 남아 있죠..</p>
<p class="yy">display 로 감춰진 줄입니다. </p>
<p>바로 위줄은 display로 줄이 없어졌는데 공간도 없어졌죠</p>
여기는 첫행입니다
Visibility 로 감춰집니다
바로 위에는 Visibility 속성으로 줄이 없어졌는데 공간이 남아 있죠..
display 로 감춰진 줄입니다.
바로 위줄은 display로 줄이 없어졌는데 공간도 없어졌죠
2. block 와 inline
display의 속성값중 block와 inline는 레이아웃을 짤때 매우 중요하며 또 헷갈리기도 합니다.
block : 속성값을 주면 해당 요소는 그 줄의 가로폭을 Full로 차지합니다.
[나는 욕심꾸러기야~ 무조건 한줄 차지할 거야]
그리고 자동으로 줄바꿈을 하는 성질을 가지고 있습니다. [누가 옆에 있는거 싫어~]
(좌우로 가상의 보이지않는 margin으로 꽉 채우는 것이죠, 너비값을 주더라도 화면에
너비만큼 보여주고 나머지의 빈공간은 일종의 margin으로 채우고 줄바꿈을 합니다. )
inline : 속성값을 주면 해당 요소는 그 요소의 크기 만큼만 늘기도 하고 줄기도 합니다.
그리고 줄바꿈도 일어나지 않습니다.
[나는 뭐든 필요한 만큼만 차지할거야~ 친구도 좋아해~ 다 내옆으로 와 ㅋㅋ]
Html 태그들은 거의 모두가 기본적인 속성으로서 내부적으로 block나 inline의 속성값을 가지고 있습니다.
display:block로 속성을 지정하지 않아도 기본적으로 block의 속성값을 가지고 있는 태그들이 있습니다.
div, p, h1...h6, ul, li, dl, dt, dd, form,... 등등
이런 태그들로 레이아웃을 구성할때 가로로 나란히 배치하는 것은 기본적으로는 불가능합니다.
(물론 float이나 position 등을 사용해서 할 수도 있기는 하지만...)
왜냐하면 이런 태그를 쓰면 한줄 전체를 차지해버리고 자동 줄바꿈이 일어나기 때문이죠.
(width:값을 주어도 다음 줄로 넘어가 버립니다. 레이아웃을 짤때 난감하죠)
<div style="background:#f27a22;">div1</div>
<div style="background:#f27a22;">div2</div>
<div style="width:200px;background:#f27a22;">div-width 3</div>
<div style="width:200px;background:#f27a22;">div-width 4</div>
위 예제를 보시면 바로 아시겠죠. 무조건 다음 줄로 넘어갑니다.
display:inline도 마찬가지로 속성을 지정하지 않아도 기본적으로 inline의 속성값을 가지고 있는 태그들이 있습니다.
a, span, input, img, strong.... 등등
이런 태그들은 자신에게 주어진 크기만큼 계속 옆쪽으로 나란히 붙어서 나타납니다. 줄바꿈이 일어나지 않죠.
(width:값을 늘려 줘도 자신의 크기 만큼만 나옵니다.)
<span style="background:#C70101;">span1</span>
<span style="background:#C70101;">span1</span>
<span style="width:300px;background:#C70101;">span1</span>
<span style="width:300px;background:#C70101;">span1</span>
이제 위의 예제들을 display:block나 display:inline 속성을 이용해서 바꿔보면 어떻게 될까요.
<p>block -> inline로 바꾼다</p>
<div style="display:inline;background:#f27a22;">div1</div>
<div style="display:inline;background:#f27a22;">div2</div>
<div style="display:inline;width:200px;background:#f27a22;">div-width 3</div>
<div style="display:inline;width:200px;background:#f27a22;">div-width 4</div>
<p>inline -> block로 바꾼다</p>
<span style="display:block;background:#C70101;">span1</span>
<span style="display:block;background:#C70101;">span1</span>
<span style="display:block;width:300px;background:#C70101;">span1</span>
<span style="display:block;width:300px;background:#C70101;">span1</span>
block -> inline로 바꾼다
inline -> block로 바꾼다
span1 span1 span1 span1두개의 성질이 서로 바뀌어서 나타나는 것을 볼 수 있습니다.
div가 span처럼 나타나고 span이 div처럼 보이게 되는 것입니다.
<li>태그를 옆으로 배치하고 싶을때나 <span>태그를 세로로 배치하고 싶을때 등 여러가지로 사용해 볼 수 있습니다.
3. inline-block
inline-block이라는 속성값에 대해 알아 보도록 하겠습니다.
inline-block는 inline와 block의 성질을 섞었다고 보시면 됩니다.
원래 inline의 성질은 그 요소의 크기만큼만 보이게 되는데, 여기에 block의 성질인 높이나 너비의 한쪽만 일정크기로 고정시키고 다른쪽은 유동적으로 보여주고 싶을때 바로 inline-block 속성값을 사용 할 수 있습니다.(예를들어 이미지라면 이미지의 너비는 고정시키고 높이만 본래의 크기만큼 늘었다 줄었다 하는것)
레이아웃을 구성할때 높이나 너비 한쪽만 고정시키고 다른쪽은 컨텐츠에 따라 변화하게 만들고 싶을때도 사용할 수 있습니다.
<span style="background:red;">본래의 스판</span>
<span style="background:yellow;">원판스판</span>
<span style="display:inline-block;height:150px;background:blue;">inline-block 스판높이 </span>
<span style="display:inline-block;height:70px;background:green;">inline-block 스판 높이고정이죠 </span>
<span style="display:inline-block;width:50px;background:#ededed;">inline-block 스판 너비만 고정하면 어떨까요 </span>
제가 머리가 나쁘기도 하고 블로그질을 하면서 저도 배워가는 입장이라 잘모르는 것이 많습니다.
^^
즐거운 하루 되세요. Vanxy.
