[CSS] display 속성 / 반응형 웹페이지으로 만들때 꼭 알아야 할 CSS 옵션

display 속성이란?

웹페이지를 반응형으로 만들때 꼭 알아야 할 CSS 옵션임.

 

display 는 보여준다의 의미다.

하지만 여기서 보여준다는 의미는 본인의 모습과 본인이 품고 있는 자식도 포함되어 있다.

전혀 다른 2가지의 속성을 세팅할 수 있다.

 

1. 자신의 박스형태

2. 자식을 배열하는 형태

 

박스 형태를 어떤식으로 보여줄지 정하는 4가지 속성

none
inline
block
inline-block

 

<div style="display:none">안보임</div>

<div style="display:inline"></div>

<div style="display:block"></div>

<div style="display:inline-block"></div>

 

 

위의 속성 4가지는 자신의 박스형태를 보여주는 방법을 정하는거라면

다음의 속성은 박스에 포함된 자식박스를 배열하는 방법을 정하는 속성이다.

 

자식을 배열하는 방법을 정하는 속성

flex

grid

 

flex 는 1차원으로 정렬하고

grid 는 2차원으로 정렬하는 방법을 제공합니다.

 

 

display:flex; 로 세팅한 경우

<div style="display:flex"></div>

 

컨테이너에 포함된 자식 정렬 방법을 flex-direction 으로 설정할 수 있습니다.

 

flex-direciton : row;

flex-direciton : row-reverse;

flex-direciton : column;

flex-direciton : column-reverse; 

 

display:flex 로 설정하고 flex-direction 를 설정하면 자식 박스의 확장과 축소를 지정할 수 있다.

 

align-content : 위아래중 어디를 기준으로 확장 또는 축소할 것인가 지정

justify-content : 좌우중 어디를 기준으로 확장 또는 축소할 것인가 지정

flex-direction 에 따라서 위아래, 좌우기준이 달라질 수 있음.

 

align-content:

stretch (기본값, 최대확장)
flex-start (왼쪽을 기준으로)
flex-end (오른쪽을 기준으로)
center (가운데를 기준으로)
space-around (좌우여백 균등하게)
space-between (양쪽면에 여백없이)
space-evenly (모든여백 균등하게)

 

justify-content :

stretch (기본값, 최대확장)

flex-start (왼쪽을 기준으로)

flex-end (오른쪽을 기준으로)

center (가운데를 기준으로)

space-around (좌우여백 균등하게)

space-between (양쪽면에 여백없이)

space-evenly (모든여백 균등하게)

 

자식 박스 크기 설정 좀더 세부적으로..

align-items : 

stretch (기본값 최대확장)

flex-start (위쪽을 기준으로)

flex-end (아래쪽을 기준으로)

center (가운데를 기준으로)
baseline 

 

align-self : 

자식 박스에서 자체 정렬 설정

 

flex-wrap : wrap; 자식박스의 크기가 큰 경우 자연스럽게 흘러넘치도록 할 수 있다.

 

여러 자식 박스의 크기 비율을 조정할 있는 옵션이 있다.

 

flex-grow

flex-shrink

flex-basis

 

간단하게  한줄로 설정가능

flex : 1 1 auto;

flex : 확장할크기 줄어들크기 기본크기;

 

자식 박스 순서 설정

order :