1. flexbox
박스 내 요소 사이의 공간 배분과 정렬 기능을 위한 1차원 레이아웃, 한번에 하나의 행이나 열만을 다룬다.
flexbox은 flexcontainer라고도 하는데, 이를 만들기 위해서는 display: flex; 속성을 설정해주어야 한다.
display: flex
-
기본적으로 요소들을 가로 정렬한다.
display: flex; -
인라인 레벨 요소를 원한다면 inline-flex로 설정.
display: inline-flex;
flex-direction
flexbox에는 가로 주축과 세로 교차축이 존재한다.
주축을 사용하는 방향을 지정하는 속성 flex-direction.
-
기본값, 주축은 행, 컨텐츠의 방향과 동일하게
flex-direction: row; -
주축은 행, 컨텐츠의 방향과 반대로
flex-direction: row-reverse; -
주축은 열, 컨텐츠의 방향과 동일하게
flex-direction: column; -
주축은 열, 컨텐츠의 방향과 반대로
flex-direction: column-reverse;
flex-wrap
-
플렉스 아이템들을 무조건 한 줄에 배치.
flex-wrap: nowrap; -
공간 크기에 따라서 요소를 다른 행에 배치
flex-wrap: wrap;
flex-wrap: wrap-reverse; -
flex-direction, flex-wrap를 압축하여 설정하는 단축 속성
flex-flow: row wrap;
주축을 배치하는 방법 justify-content
-
주축을 기준으로 상단 중앙에 배치
justify-content: center; -
주축 기준 시작지점 혹은 끝지점에 배치
justify-content: flex-start;
justify-content: flex-end; -
각 하위 요소들 사이에 동일한 크기의 여백을 넣어 띄엄띄엄 배치
justify-content: space-around; -
space-around와 동일하지만, 전체 요소들의 좌우 끝에는 여백을 넣지 않는다.
justify-content: space-between;
교차축의 배치 방법 align-items
- 세로 기준의 배치 방법을 결정한다.
align-items: flex-start;
align-items: flex-end;
align-items: center;
교차축의 개별요소 배치 방법 align-self
-
기준 시작지점으로
align-self: flex-start; -
기준 끝지점으로
align-self: flex-end;
flex-wrap: wrap;인 경우에만 사용이 가능한 align-content.
- 플렉스 컨테이너가 아이템 배치에 필요한 공간보다 클 때 사용한다.
align-content: stretch;
플렉스 아이템이 기본 크기보다 더 커질 수 있는지 결정하는 속성
- 컨테이너 내부에서 할당 받을 수 있는 공간을 상대적으로 정의할 수 있다.
flex-grow: 1;
grow 속성과 반대, 더 작아질 수 있는지를 결정
flex-shrink: 1;
플렉스 아이템의 초기 크기를 지정한다.
- box-sizing이 따로 설정되지 않았다면, 콘텐츠 박스의 크기를 결정한다.
flex-basis: 1;
grow shrink basis를 한번에 사용할 수 있게 만드는 단축 속성
flex: 0 0 100px;
플렉스 아이템의 보여지는 순서를(배치 순서를) 지정하는 속성
order: 1;
2. 그리드 레이아웃(grid layout)
그리드 레이아웃이란 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식을 말합니다.
그리드 레이아웃 방식에서, 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정됩니다.
-
그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소
-
그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소
grid 사용은 flex와 마찬가지로 컨테이너를 만드는 것 부터 시작한다. 기본값이 블록 요소이고 인라인으로 전환가능하게 만들 수 있다는 것도 동일.
display: grid;
display: inline-grid;
그리드 방식은 컨테이너에 행(row)과 열(column)을 제공합니다. 행과 열을 동시에 제어해 요소를 배치할 수 있으며, 컨테이너의 구조는 다음과 같습니다.
flex가 하나의 열 혹은 행이라면, grid는 행과 열 모두를 포함한다.
grid-template-columns
그리드 컨테이너의 트랙 중 열(column) 트랙 내 아이템들의 크기를 지정할 수 있는 속성입니다. 그리드 컨테이너에서 트랙이란 행 또는 열을 뜻합니다.
기본값, grid-template-columns: none;
grid-template-columns: 100px 100px 1fr;
위를 예시로 들어 설명하자면.. 열을 3개 만들고, 각각의 열 너비는 100px로 지정한다는 뜻이다.
- fr 단위. 지정되고 남은 공간을 기준으로 삼는 단위
다른 키워드나 CSS 함수도 사용할 수 있다.
grid-template-columns: etc;
grid-template-rows
그리드 컨테이너의 트랙 중 행(row) 트랙 내 아이템들의 크기를 지정할 수 있는 속성입니다.
grid-template-rows: none;
grid-template-rows: 1;
grid-template-rows: etc;
gap(grid-gap)
그리드 아이템 사이의 간격을 지정하는 속성입니다. 행에서의 간격과 열에서의 간격을 똑같이 지정할 수도 있고, 각자 따로 지정할 수도 있습니다.
grid-gap: normal;
그리드 내부의 아이템 사이의 상하좌우 공간에 20px 여백을 준다. 단위를 복수로 사용하여 여백 위치를 지정할 수도 있다.
grid-gap: 20px;
트랙 관련 함수
repeat();
반복 값을 자동으로 처리하는 함수.
grid-template-columns: repeat(3, 100px);
위를 예시로 들어 설명하자면.. 100px 설정을 3번 반복한다는 뜻이다.
minmax();
최소값과 최대값을 각각 지정
예시) 너비를 최소 100px, 최대 200px으로 3번 반복하라.
grid-template-columns: repeat(3, minmax(100px, 200px));
auto-fill & auto-fit;
함수는 아니지만, 반응형을 고려하여 사용할 수 있는 키워드들
예시) 100px 값을 유지한다. 컨테이너의 크기가 남으면 여백으로 처리한다.
grid-template-columns: repeat(auto-fill, minmax(100px, auto));
auto-fit은 컨테이너의 빈 공간을 허용하지 않는다. 다만 minmax로 최대값을 제한할 경우 너비의 최대값을 초과하지 않는다.
grid-column & row
grid-column과 grid-row 속성을 이용하면 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치할 수 있습니다.
grid 기준으로 행과 열의 번호를 이용하여 어디부터 어디까지 공간을 사용할지 지정.
단, 다른 아이템이 있으면 최소 공간만큼은 침해하지 못한다.
grid-template-areas
그리드 영역(아이템)의 이름을 이용해 레이아웃의 형태를 정의할 수 있습니다.
grid-area
그리드 영역(아이템)의 이름을 지정할 때 사용하는 속성입니다.
grid-area로 아이템의 이름을 지정하고, grid-template-areas로 그 아이템이 얼마만큼의 공간을 차지할지 지정할 수 있다.
다만 하나의 아이템의 위치는 grid 상에서 연결되어 있어야 한다.
align-items
플렉스박스 방식에서와 유사한 역할을 합니다. 그리드 컨테이너 행 트랙의 높이를 기준으로 그리드 아이템의 배치를 결정합니다.
-
그리드 아이템들이 트랙 높이만큼 확장됩니다.
align-items: stretch; -
트랙 상단으로부터 하단을 향해 배치.
align-items: start; -
트랙 하단으로부터 상단을 향해 배치.
align-items: end; -
할당된 공간의 중심부에 배치.
align-items: center;
align-self
각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정합니다.
-
기본값. 그리드 아이템들이 트랙 높이만큼 확장됩니다.
align-self: stretch; -
트랙 상단으로부터 하단을 향해 배치.
align-self: start; -
트랙 하단으로부터 상단을 향해 배치.
align-self: end; -
할당된 공간의 중심부에 배치.
align-self: center;
justify-items
수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용할 수 있는 속성으로, 그리드 컨테이너에 지정합니다. 아이템에 할당된 열 방향 너비가 기준이 됩니다.
-
기본값. 그리드 아이템들이 트랙의 너비만큼 확장됩니다.
justify-items: stretch; -
트랙 시작점으로부터 끝점을 향해 배치.
justify-items: start; -
트랙 끝점으로부터 시작점을 향해 배치.
justify-items: end; -
할당된 공간의 중심부에 배치.
justify-items: center;
justify-self
수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용할 수 있는 속성으로, 각각의 그리드 아이템에 지정합니다. align-items & align-self의 관계와 유사.
-
기본값. 그리드 아이템들이 트랙의 너비만큼 확장됩니다.
justify-self: stretch; -
트랙 시작점으로부터 끝점을 향해 배치.
justify-self: start; -
트랙 끝점으로부터 시작점을 향해 배치.
justify-self: end; -
할당된 공간의 중심부에 배치.
justify-self: center;
align-content, justify-content
플렉스박스 방식과 유사하게 사용합니다. 그리드 컨테이너의 수직축과 수평축에서의 아이템 정렬 방식을 결정합니다. 컨테이너에 여유 공간이 있을 때 사용할 수 있습니다.
-
트랙의 시작점으로부터 끝점을 향해 배치
align-content: start;
justify-content: start; -
트랙의 끝점으로부터 시작점을 향해 배치
align-content: end;
justify-content: end; -
트랙의 중심부에 배치
align-content: center;
justify-content: center; -
트랙에서 일정한 간격을 둔 채 양끝 정렬 배치
align-content: space-between;
justify-content: space-between;
3. 상대 단위와 뷰포트 단위
단위 기준 px, rem, em
px 모니터 화소 하나를 절대기준으로 사용하는 단위. 가변성이 없어 반응형 웹에는 적합한 단위가 아니다.
-
rem 최상위 태그의 font-size에 대응하는 상대기준 단위
-
em 상위 태그의 font-size에 대응하는 상대기준 단위
em은 내외부 여백 크기를 정할 때 자기 자신의 글자 크기를 기준으로 잡는다.
그런데 em과 rem은 가변성을 지니고 있긴 하지만 기기 화면을 기준으로 삼고 있지 않아 진정항 반응형 단위라고 할 수는 없다.
다만 다른 기술들과 혼합되면 반응형 웹 구현에 상당히 유용하게 사용되긴 한다.
뷰포트 단위 사용 예시
-
뷰포트 너비의 100/1
font-size: 1vw; -
뷰포트 높이의 100/1
font-size: 1vh; -
뷰포트 너비와 높이 중 작은 쪽의 100/1
font-size: 1vmin; -
뷰포트 너비와 높이 중 높은 쪽의 100/1
font-size: 1vmax;
% 단위
부모 요소를 기준으로 상대적 크기를 지정할 때 사용.
너비, 높이, 여백, 글자 크기까지 모두 지원한다.
width: 100%;
padding: 10%;
CSS 함수
표현식 하나를 받아 결과를 최종 값으로 사용하는 함수. 단순 계산식이면 무엇이든 사용가능하다.
버튼 같은 요소를 무작정 가변적으로 돌리면 너비 크기에 따라서 어색한 여백이 생기는 문제가 있다.
그럴 때 clac 함수를 사용해주면 반응형 웹의 어떤 환경에서도 적절한 화면 구성을 유지할 수 있게 된다.
width: calc(100% - 20px);
미디어 쿼리
미디어 타입을 인식하고, 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 기능.
미디어 쿼리로 사용되는 것은 통상 screen이지만, 인쇄 결과물 print / 음성 장치 speech 등도 존재한다.
screen의 최대 너비가 1000px 이하일 경우에 동작하는 미디어 쿼리 예시.
max, min을 사용하지 않으면, width: 1000px 조건은 너비가 정확히 1000px인 경우만으로 설정된다.
@media screen and (max-width: 1000px) {
.a {
(...)
}
.b {
(...)
}
}미디어 쿼리는 보통 css 파일 내부에서 작성되지만, link 태그나 import를 이용해 아예 독립적인 css 파일에서 사용 할 수는 있다.
0. 참고자료
