CSS (Display Block VS Inline) 차이점 살펴보기

CSS 에서 메뉴를 Hide/Show 또는 위 아래 정렬을 위해서 많이 사용하는 Style의 속성에 대해

알아보도록 하겠다.

금일 알아볼 Style은 Div나 Span에서 많이 사용하는 Display 속성이다.

우선 아래 예제를 보면서 설명을 하도록 하자.

(1) 기본예제

<div>하이루1</div> <div>하이루2</div> <div>하이루3</div> <br /> <span>하이루1</span> <span>하이루2</span> <span>하이루3</span>

위예제의 결과물은 다음과 같다.

옆의 예제에서 처럼 div Tag를 이용한 경우 Enter값이 먹혀버린 상태에서 동작이 된다. span Tag의 경우 우리가 알고 있듯이 별달리 Enter값이 먹히지 않고 가로로 작성이 된다.

위의 예제와 같이 출력되는 이유는 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> <div>하이루2</div> <div>하이루3</div> <br /> <span>하이루1</span> <span>하이루2</span> <span>하이루3</span>

위 예제의 결과물은 다음과 같다.

옆의 결과물에서 보듯이 div Tag는 이전의 span과 같이 Enter값이 없어졌으며, span Tag의 경우 첫번째 예제의 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 랑이씀 -