[웹개발] 7. CSS 레이아웃 - display

시작하기 전에...

한동안 블로그 글을 올리지 않게 되어 웹개발 강의글도 올릴 계획이 없었으나.. 최근 몇몇 분들이 후속 포스트도 기대하셔서 조금씩 시간 날 때마다 올려보려고 합니다. 다만 저번 포스트 이후 2~3년이 지난지라, 트렌드도 바뀌고 저도 성장했기에 이전 글과 흐름이 맞지 않거나 제 주관이 강하게 포함될 수도 있습니다. 하지만 가능한 쉽게 배우실 수 있도록 jsfiddle과 같은, 코드를 직접 체험가능한 형태로 제공하고자 합니다. 감사합니다.

 

 

개요

이전 포스트에서는 CSS의 요소 배치 (position)에 대해 알아보았다.

이번 포스트에서는 CSS에서 제일 많이 사용하는 속성 중 하나인 "display"에 대해 알아보자.

 

Q) position과 display 둘다 요소 배치하는 속성이라면 뭐가 다른가요?

 

사전적인 의미는 다음과 같다.

position: HTML 요소가 페이지 내에서 어떻게 배치될지 결정

display: HTML 요소가 문서 흐름 내에서 어떻게 보여질지 결정

 

... 사실 잘 와닿지 않는다. 필자가 주관적으로 해석한 바는 다음과 같다.

position: HTML 요소의 상대/절대적 위치 결정

display: HTML 요소의 레이아웃 결정

 

여전히 와닿지 않는다면,

1. display를 우선적으로 설정하여 요소의 레이아웃을 설정하고,

2. 이후 부차적으로 상대/절대적인 위치 특성인 position을 설정한다고 생각하면 이해하기 더 쉬울 것이다.

 

사실 이래나 저래나 글로 설명한 것이기 때문에, 직접 부딪히면서 체감하는 것이 제일 빠르다.

 

display

display 속성은 각 HTML 요소가 어떻게 배치되어야 하는지를 설정한다.

크게 5가지 속성이 있다.

• none: 요소가 보이지 않음
• block: 블록 박스로 설정 (가능한 가로로 가장 넓은 폭을 차지하려고 함)
• inline: inline 박스로 설정 (다른 inline 요소와 같은 줄에 배치됨)
• inline-block: inline-block 박스로 설정 (inline과 block의 특징을 결합한 형태)
• flex: flexbox로 설정 (box내 요소들을 가로 또는 세로 축 위에 배치할 수 있음)
• grid: 그리드 형태로 설정 (행과 열을 가진 레이아웃을 구성할 수 있음)

display 속성의 기본값은 'inline' 또는 'block'으로 설정된다. (속성을 지정하지 않을 시)

<div>, <p>, <section>, <header>, <footer> 등의 요소들은 'block'으로 지정되고, 그 외의 요소들은 대부분 'inline'이 기본값이다.

 

이제 각 속성별로 자세히 알아보자.

 

display: none;

말 그대로 요소가 눈에 보이지 않게 된다.

HTML 상에서는 요소가 남아있으나, 레이아웃 상에서는 처음부터 없었던 것처럼 보이지 않는다.

 

visibility: invisible; 과의 차이점은, display:none;은 레이아웃 상에서 아예 존재하지 않지만 invisible은 자리만 차지하고 요소 자체가 눈에 보이지만 않을 뿐이다.

 

display: block;

위의 예시에서 보이듯이 div와 같은 블록 요소는 가능하면 기본적으로 가로로 한 줄을 차지하도록 배치된다. (1번, 3번)

물론 페이지 전체가 아니라 부모 요소의 전체 너비를 기본적으로 차지하게끔 되어있고, 상하 방향으로 margin과 padding을 적용할 수 있다.

 

display: inline;

inline 요소끼리는 같은 가로줄에 서로 붙게끔 배치된다.

"in line" 말 그대로 요소들을 한 줄에 배치하고자 할 때 사용한다.

inline 요소는 높이와 너비를 지정할 수 없고, 상하 margin은 적용되지 않지만 좌우 margin 및 padding은 적용 가능하다.

 

display: inline-block;

처음 설명했던 것과 같이 inline과 block 두 특징을 가지고 있다.

inline처럼 한 줄에 배치될 수 있으면서도 block처럼 너비와 높이를 지정할 수 있고, 상하좌우 margin/padding을 적용할 수 있다.

+) 필자는 flexbox를 접하기 전까지 이것을 가장 많이 사용했다.

 

display: flex;

요소들을 가로/세로 축에 대해 한 줄로 배치할 수 있다.

 

flexbox는 inline/block/inline-block 이후 업데이트로 추가된 속성으로, 상당히 최신 레이아웃을 지원한다.

flexbox는 필자가 현재 애용하는 속성으로, inline/inline-block 없이 이것만으로 대부분의 레이아웃을 구현할 수 있다.

 

flexbox 내에서도 지원되는 속성이 많은데, 대표적으로 flex-direction은 축을 지정하는데, 기본값인 가로축 (row)로 설정되어 있다.

column으로 설정할 경우 세로 축으로 정렬된다.

 

이것 외에도 justify-content (축의 방향과 수직인 방향으로 정렬하는 방식 설정), align-items (축의 방향으로 요소들을 정렬하는 방식 설정) 등이 있다.

 

display: grid;

요소들을 그리드 형태로 배치할 수 있다.

flexbox로도 flex-wrap 속성을 통해 어느정도 그리드 형태에 유사하게 구현할 수 있으나, 깔끔하게 그리드 형식으로 요소들을 배열하고 싶을 때 사용하는 속성.

 

grid 속성도 flexbox 처럼 지원되는 내부 속성이 많이 있으니 필요할 때 찾아보거나, 더 자세히 알고싶다면 링크 참조 바람.

 

 

이미 언급하였다시피, grid를 제외한 대부분의 레이아웃은 flexbox로 구현 가능하다.

 

다음 포스트는 flexbox에 대한 자세한 설명이나 기타 속성들에 대해 설명할 예정이다.