CSS
1. FlexBox
CSS3에서 도입된 레이아웃 기능으로, HTML의 요소들에 대한 정렬에 대해 직접 수치화 하지 않아도, 유연하게(Flexible) 요소를 정렬시켜 주는 기능이다.
요소를 화면에 수직/수평정렬 시키고자 할 때 사용하면 유용하다.
수직/수평정렬시의 남는 여백에 대한 유연한 설정이 가능하다.
기존 레이아웃 정렬방식인 float, inline-block에 비해 훨씬 간단하게 요소들을 정렬시킬 수 있다.
예시사이트) https://open.spotify.com/
아이템 좌우 배치에 사용
1) flexbox의 주요 개념
①Flex Container
Flex Item의 부모 요소로 display: flex로 설정한다.
정렬이 필요한 요소를 감싸는 역할을 한다.
②Flex Item
정렬이 적용될 요소로 , Flex Container의 자식요소로써 포함된다.
Flexbox에는 Flex Conainer와 Flex Item별로 사용 가능한 메서드의 종류가 다르므로 이에 대한 구분이 필요하다.
③ Flex Box의 축(axis)
Flex박스에는 중심축(main axis)과 교차축(cross axis)가 존재한다.
flex박스는 중심축에 적용되는 css스타일과 교차축에 적용되는 css스타일이 구분되어 있으므로 각 축의 정의에 대한 이해가 필요하다.
2) flexbox의 주요 속성
①Flex Container
flex-direction
아이템 배치 방향 설정
justify-content
main axis 정렬
align-items
cross axis 정렬
align-content
여러 행의 정렬 방식
flex-wrap
줄바꿈 여부 설정
gap
아이템 간 간격
②Flex Item
flex-grow
여유 공간 비율 설정
flex-shrink
줄어드는 비율 설정
flex-basis
기본 크기 설정
flex
위 3개를 한 번에 설정 (flex: 1 등)
align-self
개별 아이템 정렬
order
아이템 순서 변경
2. Grid
Grid는 행(Row)과 열(Column)을 기준으로 요소를 배치하는 CSS의 레이아웃 기능입니다. FLEX가 한방향 정렬에 특화 되어 있다면 GRID는 2차원 레이아웃정렬에 특화되어 있습니다.
Grid를 활용하면 복잡합 웹페이지 설계도 쉽게 구현이 가능하며, flexbox와 함께 활용하면 대부분의 레이아웃 문제를 해결할 수 있습니다.
예시사이트) https://htmlburger.com/blog/grid-layout-website-examples/
문제 전체가 grid로 설계
1) grid 주요 개념
①Grid Container
Grid Item의 부모 요소로 display: grid로 설정한다.
②Grid Item
정렬이 적용될 요소로 , Grid Container의 자식요소로써 포함된다.
2) grid의 주요 속성
①Grid Container
grid-template-columns
열 너비와 개수 정의
grid-template-rows
행 높이 정의
grid-template-areas
영역 이름으로 레이아웃 구성
grid-auto-rows
자동 생성 행의 높이
grid-auto-columns
자동 생성 열의 너비
grid-auto-flow
아이템 배치 방향 (row, column)
gap
행/열 간 간격 설정
②Grid Item
grid-column-start, grid-column-end
열 시작/끝 위치 지정
grid-row-start, grid-row-end
행 시작/끝 위치 지정
grid-column
열 병합 (grid-column: 1 / 3)
grid-row
행 병합 (grid-row: 2 / span 2)
grid-area
이름으로 위치 지정
justify-self
개별 아이템 수평 정렬
align-self
개별 아이템 수직 정렬
Last updated