[HTML/CSS] 05. CSS 요소 정렬과 배치

🔍 요소 수평 배치

 

한 화면에 블록을 배치하는 방법은 2가지가 있다.

 

display : inline-block;

 

inline-block은 박스 내부는 block 식으로, 외부는 inline 식으로 한다는 뜻이다.

이걸 사용해 박스를 수평으로 배치할 수 있는데, 다만 이는 화면 크기가 줄어듬에 따라 흐트러진다.

 

display : flex;

 

flex는 상위 요소에 주게 되면 내부 요소들이 특정 배치를 갖게 만드는 옵션을 말한다.

inline 블록의 문제점을 해결하기 위해 만들어졌는데, 화면 사이즈가 달라지면 박스가 아래로 내려가는 게 아니라 flexable하게 반응형으로 대응해 박스 크기를 줄이게 된다.

 

 

 

🔍 수평 정렬, 수직 정렬

 

 

 

부모 box에 설정을 주어 자식 box를 어디에 위치시킬지 정할 수 있다.

justify-content는 가로축을 기준으로 정렬할 때 사용하며, align-items는 세로 정렬을 할 때 사용한다.

display : flex; // 기본으로 줘야 하는 설정
justify-content: center; // 수평 정렬
align-items: center; // 수직 정렬

 

center, start, end 이 세가지 옵션을 통해 문단의 처음, 중간, 끝 등 박스의 특정 위치에 위치시킬 수 있다.

 

 

 

🔍 요소 수직 배치

 

 

콘텐츠 축을 바꿔 이렇게 위에서 아래로 배치시킬 수 있다.

이때 사용하는 옵션이 flex-direction이다.

flex-direction: row; (기본값)
flex-direction: column;

 

row는 기본값, 수평 배치다.

이 옵션에 column을 주게 되면 좌우와 상하의 축 방향이 바뀌며 그림처럼 수직 배치가 되게 된다.