CSS 에서 메뉴를 Hide/Show 또는 위 아래 정렬을 위해서 많이 사용하는 Style의 속성에 대해
알아보도록 하겠다.
금일 알아볼 Style은 Div나 Span에서 많이 사용하는 Display 속성이다.
우선 아래 예제를 보면서 설명을 하도록 하자.
(1) 기본예제
<div>하이루1</div> |
위예제의 결과물은 다음과 같다.
|
위의 예제와 같이 출력되는 이유는 span과 div Tag들 모두다 Attribute(속성)으로 display라는 속성을 가지고 있는데 이 속성의
Default값이 서로 틀리기 때문이다.
Div의 경우 Default Display 속성값이 Block이며, span Tag의 경우 Default Display 속성값이 Inline이다.
그렇다면, 다음과 같이 CSS를 추가하여 style를 조금 변경하면 어떻게 될까?
<style> div { display:inline; } span { display:block; } </style> <div>하이루1</div> |
위 예제의 결과물은 다음과 같다.
|
(2) Block VS Inline의 차이점
요정도 했으면, 감이 좋은 사람은 둘의 차이점에 대해서 충분히 인지를 하였을 것이다.
그렇다면, 다만 Enter값의 차이만 있을까? 아니다, 다음과 같은 추가적인 차이점이 있다.
block은 Enter값(줄바꿈) 이 적용되며, Inline의 경우 Enter값(줄바꿈)이 되지 않는다.
block으로 설정하면 top/bottom 의 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 top/bottom의 margin과padding속성을 이용할 수 없다.
block으로 설정하면 width/height 속성을 사용할 수 있지만, inline은 사용할 수 없다.
(3) 추가적인 display 속성에 대한 공부
(1)단락과 (2)단락을 통해 block과 inline에 대해서 살펴보았다. 이제는 display의 기타 다른 속성에 대해서도 알아보도록 하자.
속성 |
설명 |
none |
해당 Element의 영역을 보이지 않게 숨김. |
block |
해당 Element의 영역을 Block Box으로 만들며, 줄바꿈을 하게 된다. |
inline |
해당 Element의 영역을 inline Box으로 만들며 줄바꿈을 하지 않는다. |
inline-block |
해당 Element의 영역을 Block Box으로 만들지만, line라인 처럼 배치한다. |
이상으로 div와 span tag에서 자주 사용되는 block, inline Tag에 대해서 알아보았다.
- 2013.01.23 랑이씀 -