display
- 각 태그들의 눈에 보이는 속성이 무엇인지 가리키는 것. (요소 공간의 특성을 지정)
- 보이지 않게 숨기거나, 인라인 요소를 블럭 요소로으로 바꾸거나, 블럭 요소을 인라인 요소으로 바꿀때 쓴다.
- 속성 : none, block, inline, inline-block, table, table-header-group …
display:none;
- 주로, 탭 메뉴나 드롭다운 메뉴처럼, 없어졌다 나타났다 하는 기능을 구현할 때 숨겨놓는 용도로 자주 사용한다.
- 어떤 식으로 디자인했든, 해당 태그에 none을 주면, 모니터 상에서 사라진다.
- 없애버리는 것.
display:block;
- width(가로)와 height(세로) 값 설정이 가능하며, margin과 padding 값의 설정도 가능하다.
- 주로 <div>, <p>, <form> 요소들이 있고, 블록 단위로 개행이 된다.
- 줄바꿈 가능.
display:inline;
- width와 height 값을 설정할 수 없으며, margin과 padding 값의 설정도 불가능하다.
- 주로 <span>, <img> 태그에 이용된다.
- 줄바꿈 불가능.
display:inline-block;
- block element가 다른 block element 속의, inline으로 들어갔을 때, block으로 보여지게 하는 속성이다.
- block 속성처럼, width나 margin, padding 값을 사용할 수 있으면서, float 설정을 안써도 가로 정렬이 된다.
- 그런데, IE6/7에서는 지원이 되지 않아, *display:inline; zoom:1; 이라는 핵을 사용하여 인식되게 한다.
{ display: inline-block; *display: inline; zoom: 1; }
+ block 속성을 가진 태그에 외부 태그와의 상호작용은 inline으로 동작하게 함.
즉, div에 이 속성을 걸면, margin 등을 정하면서도, 표시되는 건 inline(일렬로 늘어선 것)처럼 작동한다.
※ 보통 메뉴를 마크업 할 땐 li로 나열하고, float을 줘서 일렬로 늘어트린 후, 감싸고 있는 상위 element에다 width를 지정하고,
margin으로 중앙에 위치시키는 기법이 많이 사용된다. 그런데 메뉴가 더 추가되거나 삭제되면, 전체 가로 너비를 다시 지정해주어야 하는 문제가 발생한다.
이런 단점을 보완한 기법이 바로, display:inline과 display:inline-block이다.