[ HTML+CSS ] Display 종류( block, inline inline-block, flex)

오늘의 주제는 display 속성이다. 제목과 같이 display에는 네 가지 종류가 있다. 네 가지가 어떻게 다른지 살펴보자. 모든 내용은 스탠포드 대학교 강의자료와 MDN 웹문서를 참고했다. 스탠포드 가고싶다.

 

우선... box-model에 대해 먼저 짚고 넘어가자. HTML 요소들은 대부분 box-model로 이루어져 있다. box-model은 아래와 같이 생겼다. 처음에는 왜 굳이 이렇게 만들었을까 싶었지만 HTML/CSS로 간단한 웹페이지를 제작해보면 box-model의 필요성을 바로 알 수 있다. HTML에서 어떤 태그를 생성하면 기본적으로 컨텐츠는 아래와 같이 박스 안에 감싸지게 된다. 앞으로 display 차이를 쉽게 확인하기 위해 박스의 width와 height를 설정해줄텐데, 아무런 설정을 해주지 않으면 width와 height는 'Content'의 가로 세로 길이를 말한다. 

 

box-model

 

block, inline, inline-block

HTML 요소들은 크게 block 요소와 inline 요소로 나눌 수 있다. 이 둘의 특징은 아래와 같다. 

 

block 요소
- height와 width 값을 가짐
- 화면에서 한 줄 전체를 차지
- <div>, <h>, <p> 등

inline 요소
- height와 width 값을 가지지 않음
- 화면에서 박스 크기만큼만 차지
- float, position 적용 불가
- <span>, <a>, <br>, <strong> 등

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

inline-block은 block 속성과 inline 속성을 모두 가지는 녀석이다. 대표적으로 <img> 태그가 있다. 이미지는 가로 세로 크기를 가지면서 화면에서 박스 크기만큼만 차지한다. 따로 살펴보지는 않겠다. 

 

display 속성을 통해 특정 태그에 block, inline, inline-block 성질을 가지도록 할 수 있다. 위에서 살펴본 예제에서 block 요소에 inline 속성을 부여해주고, 반대로 inline 요소에 block 요소를 부여해주면 아래와 같다. inline-block도 같이 살펴보기 위해 가장 아래에 <div> 태그를 추가해줬다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

div1/div2 클래스는 display 속성값이 inline이고,  div3/div4 클래스는 display 속성값이 inline-block이다. div 태그 전체에 가로 세로 높이를 50px로 설정했는데 inline-block 속성을 가진 박스만 크기 설정이 된 것을 확인할 수 있다. 

 

flex

flex 속성은 1차원 요소들을 가로, 세로 정렬할때 많이 사용된다. 웹페이지를 제작하다 보면 정렬이 굉장히 골치아픈 경우가 많은데 이때 flex 레이아웃을 사용하면 쉽게 구현할 수 있다. 

 

네이버 뉴스

 

위 그림은 네이버 뉴스 일부를 캡처한 사진이다. 빨간색 네모 박스는 모두 1차원 요소들이 정렬된 상태이므로 flex를 통해 구현 가능하다. 그러면 flex의 세부 속성을 자세히 알아보자. 

 

Flex는 container와 items로 이루어져 있다. Container는 items를 감싸는 부모 요소이며, 각 item을 정렬하기 위해서는 container가 필수다. 적용되는 속성 또한 container와 item이 구분되어 있는데, 이 글에서는 container의 속성만 다룬다. item의 속성은 아직까지 필요성을 모르겠다. 이후에 프로젝트를 진행하면서 쓰게 된다면 추가하도록 하겠다. (추가했슴다)

 

flex의 두 요소

우리가 알아볼 Container의 속성은 아래와 같다. 

 

속성	의미
display	Flex Container 정의
flex-direction	Flex items의 주축 설정
flex-wrap	Flex items 줄바꿈 설정
justify-content	주축의 정렬 방법 설정
align-content	교차축의 정렬 방법 설정(2줄)
align-items	교차축의 정렬 방법 설정(1줄)

 

 

 

1) display

• flex: Block 특성의 flex container
• inline-flex: Inline 특성의 flex container

Container가 block 특성을 가지는지, inline 특성을 가지는지를 결정하는 속성이다. block이면 수직으로 쌓일 것이며, inline이면 수평으로 쌓일 것이다. 아래 예제를 참고하자. 첫번째는 flex로, 두번째는 inline-flex로 설정했다. 0.5x로 보면 차이를 알 수 있다.  

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

2) flex-direction

• row: 주축을 수평으로 설정. 교차축은 수직이 된다. (default value)
• row-reverse: 주축을 row의 반대 방향으로 설정. 교차축은 수직이 된다.
• column: 주축을 수직으로 설정. 교차축은 수평이 된다.
• column-reverse: 주축을 column의 반대 방향으로 설정. 교차축은 수평이 된다. 

주축과 교차축의 개념을 그림으로 나타내면 아래와 같다. 참고로 주축이 결정되면 주축의 시작점과 끝점도 자동으로 결정된다. 주축의 시작점은 정렬의 시작점과 가까운 container 변이고, 끝점은 시작점의 반대변이다. 아래 그림에서 주축을 row로 설정했을 때로 예를 들면 주축의 시작점은 container의 왼쪽 변이고, 끝점은 container의 오른쪽 변이다. 교차축의 시작점과 끝점은 교차축이 수직인 경우 무조건 container의 윗변이 시작점이 되고, 아랫변이 끝점이 된다. 교차축이 수평인 경우 무조건 container의 왼쪽변이 시작점이 되고, 오른쪽 변이 끝점이 된다. 시적점과 끝점은 flex-start, flex-end로 표현하며 justify-content 속성에서 사용된다. 

주축과 교차축

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

3) flex-wrap

• nowrap: 모든 items를 width, height 상관없이 한 줄에 표시. (default value)
• wrap: items의 width, height를 고려하여 줄바꿈 해줌.
• wrap-reverse: wrap과 반대

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

wrap, nowrap의 차이점이 뚜렷하지 않아서 애니메이션 효과를 줘봤다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

4) justify-content (주축 기준 정렬 방법)

• flex-start: items를 주축의 시작점 기준 정렬. (default value)
• flex-end: items를 주축의 끝점 기준 정렬.
• center: items를 주축 기준 가운데 정렬.
• space-between: 시작 item은 주축의 시작점에, 끝 item은 주축의 끝점에 정렬되고 나머지 item들은 그 사이에 고르게 정렬.
• space-around: items를 모두 균등한 여백으로 정렬.

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

 

5) align-items (교차점 기준 정렬 방법 - 1줄)

• stretch: 교차축을 채우기 위해 items를 늘림. (default value)
• flex-start: items를 교차축의 시작점 기준 정렬.
• flex-end: items를 교차축의 끝점 기준 정렬.
• center: items를 교차축 기준 가운데 정렬.
• baseline: items를 문자 기준선에 정렬.

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

여기서 item 박스의 width, height가 설정되어 있으면 stretch는 있으나마나한 속성이 된다. 다른 예시들과 다르게 위 예시에서는 item 박스의 width만 설정해주었다.

 

align-content 속성은 align-items의 두줄 버전이므로 원리는 완전히 동일하다. 따로 다루지는 않겠다.

 

 

 

flex는 많이 사용해봐야 확실히 알 것 같다. 우선 아래 정도만 기억해놓자. 

1. flex-direction 으로 주축을 결정한다.
2. justify-content로 주축 기준 정렬 방법을 선택한다.
3. align-items로 교차축 기준 정렬 방법을 선택한다.

 

 

(추가) Item 속성

Container 속성이 container에 적용하는 속성이라면, Item 속성은 container 내의 Item들에 적용하는 속성이다. 알아볼 속성은 아래와 같다. 

 

속성	의미
order	요소간 순서 결정
flex-grow	요소의 증가 너비 비율 설정
flex-shrink	요소의 감소 너비 비율 설정
flex-basis	요소의 기본 너비 설정
flex	grow  shrink  basis 의 shortcut
align-self	교차축에서 요소의 정렬 방법 설정

 

 

1) order

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

order 속성은 item들을 정렬시키는 속성으로, item들은 order 기준 오름차순으로 정렬된다. default값은 0이다. 

 

 

 

 

2) flex-grow

• item의 증가 너비 '비율'
• 컨테이너의 크기가 증가함에 따라 설정한 비율에 따라 item 또한 늘어난다.
• width, height 값을 가지면 고정 크기. 컨테이너의 빈 공간이 늘어남에 따라 같이 증가. 
• container의 남는 공간은 설정한 비율대로 나눠 갖는다. 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

flex-shrink는 grow의 반대 개념이고 잘 안쓰이기 때문에 생략하도록 하겠다. 

 

 

 

 

3) align-self

 

align-self는 아까 다룬 align-items의 속성들을 개별 item에 적용할 수 있도록 하는 속성이다.  

• stretch: 교차축을 채우기 위해 item을 늘림. (default value)
• flex-start: item을 교차축의 시작점 기준 정렬.
• flex-end: item을 교차축의 끝점 기준 정렬.
• center: item을 교차축 기준 가운데 정렬.
• baseline: item을 문자 기준선에 정렬.

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

 

 

 

<참조>

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox   

https://web.stanford.edu/class/archive/cs/cs193x/cs193x.1176/lectures/     

https://heropy.blog/2018/11/24/css-flexible-box/