| 개요
display 속성은 요소를 어떻게 보여줄 것인가를 결정합니다.
주로 4가지의 속성값을 사용하고, 이외에도 다양한 속성값들이 존재하는데 실무에서도 객체들을 보여주는 방식에 따라 다양하고 많이 사용되는 속성 중 하나 입니다.
입문부분이기에 기본적인 속성값 4가지만 소개하겠습니다.
- none : 보이지 않음
- block : 블록 박스
- inline : 인라인 박스
- inline-block : block과 inline의 중간형태
| 사용법
none
태그가 보이지 않게 되고, visibility 속성중 hidden 으로 설정한 것과 달리 영역조차 사라지게 됩니다.
block
<div>, <p> 태그 등이 이에 해당됩니다.
가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈이 되어 보입니다.
width, height 속성을 지정 할 수 있으며, 레이아웃 배치 시 주로 사용됩니다.
어느 일정부분을 클릭 시 이미지가 보였다가 안보였다가 하는 것들을 온라인상에서 많이들 보셨을텐데, 위에서 알아본 none 속성값과 block 속성값을 제이쿼리나 CSS를 이용해 가지고 해당 속성값만 바꿔주면서도 구현이 충분이 가능합니다.
그리고 한가지 팁을 알려드리면,
혹시 글일부분에 A태그를 사용하면 정확하게 글씨가 아니 글씨와 글씨 사이라던지, 약간의 여백에도 클릭이 안되는 경우를 보신적이 있으실 겁니다. 이럴때 해당 A태그에 "display:block;"을 걸어주게 되면 해당 A태그의 영역만큼이 클릭이 되도록 바뀌게 됩니다.
inline
<span>, <b>, <i> 태그 등이 이에 해당 됩니다.
block 과 달리 줄 바꿈이 되지 않고, width 와 height 값을 지정할 수 없습니다.
inline-block
block 과 inline 의 중간형태라고 볼 수 있습니다.
줄 바꿈이 되지 않지만 크기를 지정할 수 있습니다.
익스플로러7 이하에서는 사용할 수 없으며 *zoom:1 이라는 속성을 사용하면 비슷하게 사용할 수 있습니다.
(이는 CSS IE 핵 중 하나입니다.)
| 예제
<html>
<head>
<style>
#box-container > div,
#box-container > span{
border: 2px solid #09c;
margin: 3px 0;
padding: 5px;
}
.none{ display: none }
.block1{ display: block }
.block2{ display: block; width: 300px; height: 60px; }
.inline{ display: inline; width: 200px; height: 60px; }
.inline-block{ display: inline-block; width: 200px; height: 60px; *zoom: 1; }
</style>
</head>
<body>
<div id="box-container">
<div class="none">none</div>
<div class="block1">block1</div>
<div class="block2">block2</div>
<span class="inline">inline</span>
<span class="inline-block">inline-block</span>
</div>
</body>
</html>
| 결과값
'즐거움 넘치는 IT 세계 > 코드로 만드는 디자인' 카테고리의 다른 글
| [ CSS 입문 ] clear속성 (0) | 2018.09.17 |
|---|---|
| [ CSS 입문 ] float 속성 (0) | 2018.09.16 |
| [ CSS 입문 ] visibility 속성 (0) | 2018.09.14 |
| [ CSS 입문 ] border 속성 (0) | 2018.09.13 |
| [ CSS 입문 ] background 속성 (0) | 2018.09.12 |
