반응형 웹 - 플렉스박스, 그리드, 부트스트랩
florent의 개발 적응기
이 글의 주요 내용
[CSS의 ‘@’]
[HTML의 <div>, <span>, <p> 구분]
[미디어 쿼리(media query) 규칙 코드]
[CSS 플렉스박스(flexbox)]
[플렉스박스 예시와 사용법]
[flex 속성]
[플렉스박스 크기 적용]
[플렉스박스 display 속성 상세]
[플렉스박스 레이아웃 설정: 컨테이너 대상 속성]
[플렉스박스 레이아웃 설정: 컨테이너 하위 요소 대상 속성]
[플렉스박스(Flexbox) vs. 그리드(Grid)]
[CSS 그리드 예시와 사용법]
[그리드의 전체적인 레이아웃 적용: 컨테이너 속성]
[그리드 배치]
[그리드 항목 크기 조절 및 배치 상세]
[부트스트랩(Bootstrap)]
[이해를 위한 TMI]
CSS의 ‘@’
CSS에서 ‘@’로 시작하는 규칙을 지정하는 규칙(at-rule) 코드로, 특정 조건이나 지시사항을 나타내는 데에 사용되며, 스타일 시트의 동작을 제어하거나 특정 조건에서만 스타일을 적용하는 기능을 수행
규칙(at-rule)코드 예시
(1) @media: 특정 미디어 조건이 만족될 때 스타일을 적용
(2) @import: 외부 CSS 파일을 불러옴
(3) @font-face: 사용자 정의 폰트를 정의하고 로드
(4) @keyframes: 애니메이션의 키프레임을 정의
(5) @supports: 특정 CSS 속성이나 값이 지원되는지 여부에 따라 스타일을 적용
(6) @charset: CSS 파일의 문자 인코딩을 지정
(7) @namespace: XML 네임스페이스를 지정
HTML의 <div>, <span>, <p> 구분
(1) div 태그
블록 레벨 요소, 새 줄에서 시작하고 전체 너비를 차지
주로 레이아웃을 구성하는 데 사용되며, 다른 요소들을 그룹화하는 데 자주 사용
(2) span 태그
인라인 레벨 요소, 텍스트 흐름 내에서 사용되며, 줄 바꿈을 하지 않음
텍스트의 일부분에 스타일을 적용하거나 작은 콘텐츠를 그룹화할 때 사용
(3) p 태그
블록 레벨 요소, 단락을 나타내는 데 사용
기본적으로 위아래에 여백이 있으며, 텍스트 콘텐츠를 구조화하는 데 사용
[미디어 쿼리(media query) 규칙 코드]
미디어 쿼리는 ‘@media (브레이크포인트) {스타일}’로 구성
브레이크포인트(breakpoint)란 스타일이 바뀌는 구분점으로, 범위 기준(ex. max-width, min-width)으로 흔히 적용됨
[CSS 플렉스박스(flexbox)]
플렉스박스를 활용하면, float 스타일 속성을 사용하지 않고도 전체 레이아웃을 정의할 수 있음
[플렉스박스 예시와 사용법]
(1) 플렉스박스로 사용할 최상위 컨테이너의 클래스와, 그 하위에 레이아웃을 적용할 요소들에 대해 각각의 클래스 설정
(2) 컨테이너 클래스에 'display: flex'를 설정, 열 사이 간격이 필요한 경우 ‘gap: #px 사용
(3) 플렉스박스 컨테이너 내 요소들에 대해 ‘flex’ 속성 부여하여 레이아웃 설정
[flex 속성]
flex 속성은 flex-grow, flex-shrink, flex-basis 세 가지로 구성
flex-grow: 요소가 플렉스 컨테이너 내의 남은 공간을 얼마나 많이 차지할 것인지를 결정, 기본값 0
flex-shrink: 플렉스 컨테이너가 줄어들 때 요소가 얼마나 축소될지를 결정, 기본값 1
flex-basis: 요소의 기본 크기를 설정, 기본값 auto, flex-basis는 너비(행 방향일 경우)나 높이(열 방향일 경우)를 정의 ⇒ main-axis를 따릅니다. ⇒ flex-basis는 자식 요소에 적용해야 함
'flex-grow: 0 or 1', 'flex-shrink: 0 or 1'로 자동 크기 조절을 켜고 끌 수 있음
'flex-grow'를 켜면 최대 너비로 성장하고, 'flex-shrink'는 최소 너비로 줄어듬 (행 방향일 경우).
'flex: # # #' = 'flex: (grow) (shrink) (basis)'로, 0 또는 1을 사용합니다. ⇒ 'flex: 1 1 0' = 'flex: 1;'
1보다 큰 숫자는 요소의 크기를 비례적으로 만듬
flex 속성은 다음과 같은 구성을 지님
[플렉스박스 크기 적용]
적용 우선순위: 콘텐츠 너비 < 너비 < flex-basis < min-width/max-width
[플렉스박스 display 속성 상세]
'display: flex'를 선언하면 하위 요소들은 다른 display 속성에 대해 inline, block 등의 다른 값이 적용되지 않으며, 코드 작성시 모두 무시하고 flex가 적용됨
'display: flex'는 전체적으로 block과 유사하고, 'display: inline-flex'는 inline과 유사 ⇒ 즉, 컨테이너 박스의 특성이 block처럼 되느냐, inline처럼 되느냐 결정
flex-direction은 요소들이 쌓이는 방향을 정의하며, 기본값은 row
flex-direction: row ↔ flex-direction: column: 요소들이 위에서 아래로 정렬
flex-direction은 'main-axis'와 'cross-axis'의 개념을 가져옴 → main-axis는 요소들이 정렬되는 방향을 의미하며, cross-axis 반대 축을 의미
[플렉스박스 레이아웃 설정: 컨테이너 대상 속성]
플렉스박스 컨테이너 속성 (1): flex-wrap 속성
flex-wrap은 너비가 조정됐을 때 줄바꿈 여부를 설정함
'flex-wrap: nowrap'은 자식 요소들이 다른 줄로 이동하지 않게 함(공간이 없더라도 동일한 줄에 유지). ↔ 'flex-wrap: wrap' ⇒ 부모의 속성
플렉스박스 컨테이너 속성 (2): justify-content 속성
주축(main-axis)를 기준으로 하위 자식 항목(요소)들을 정렬함
'justify-content: flex-start'는 요소들을 왼쪽부터 정렬합니다. ↔ 오른쪽부터 정렬은 'justify-content: flex-end'. ⇒ 다른 값들: center, space-between
플렉스박스 컨테이너 속성 (3): align-items 속성
‘align-items’ 속성이 flex-start, flex-end, center일 때의 결과물
‘align-items’는 컨테이너 내 ‘개별 항목들을’ 교차축(cross-axis)를 기준으로 하위 자식 항목(요소) 정렬
플렉스박스 컨테이너 속성 (4): align-content 속성
‘align-content’는 여러 항목 전체를 하나로 묶어 교차축(cross-axis) 기준으로 정렬 ↔ ‘align-items’는 컨테이너 내 개별 항목을 정렬
'align-content: center'는 'flex-wrap: wrap'일 때만 작동 ⇒ unwrap인 경우, 줄바꿈이 일어나지 않기 때문
[플렉스박스 레이아웃 설정: 컨테이너 하위 요소 대상 속성]
컨테이너 내 하위 요소 속성 (1): order 속성
'order' 속성은 플렉스박스의 자식 요소에 숫자를 할당하여 요소들을 오름차순으로 정렬 (기본값: 0)
‘order’ 속성에 숫자를 부여하여 순서를 변경할 수 있음
컨테이너 내 하위 요소 속성 (2): align-self 속성 ⇒ 컨테이너 하위 요소 속성
‘align-self’ 속성이 flex-start, flex-end일 때의 결과물
'align-self: flex-start' 속성은 컨테이너 내 자식(child) 요소를 독립적으로 정렬
[플렉스박스(Flexbox) vs. 그리드(Grid)]
https://medium.com/@daniaherrera/getting-started-css-grid-vs-flexbox-b3012fce6476
플렉스박스는 요소들을 1차원으로 정렬하며, 콘텐츠 정렬에 중점 ⇒ 1차원적 레이아웃
‘격자’라는 의미를 가진 것처럼, 그리드는 2차원 공간을 정렬 ⇒ 2차원 레이아웃 제작이 가능
대부분의 엔지니어는 두 가지를 혼합하여 사용
[CSS 그리드 예시와 사용법]
(1) 그리드 컨테이너와 그리드 아이템 설정
(2) 컨테이너에 그리드 속성 적용
‘display: grid’로 컨테이너에 그리드 적용
grid-template-columns와 grid-template-rows로 열과 행의 크기를 지정
(3) 그리드 아이템 배치 및 크기 조절
개별 아이템에 grid-column과 grid-row를 사용해 위치와 크기를 조정
[그리드의 전체적인 레이아웃 적용: 컨테이너 속성]
grid-template-rows와 grid-template-columns
grid-template-rows: 그리드 행의 크기를 정함
grid-template-columns: 그리드 열의 크기를 정함
그리드 템플릿 생성 예시
그리드 항목의 크기를 설정하는 단위
(1) '#px' 또는 '#rem'와 단위: 반응형이 아닌 고정 크기를 가짐
(2) fr: ‘사용 가능한 공간’에 비례하여 성장하고 줄어들며, 숫자를 추가하여 구체적인 비율 설정이 가능
(3) auto: auto는 내부 컨텐츠에 비례해 성장하고 줄어들며, fr과 달리 공간에 대한 구체적인 비율 설정이 불가능
(4) minmax(min#, max#): 반응형으로 움직일 크기를 구체적인 범위로 설정
(5) span #: 템플릿으로 정의된 항목 개수를 차지할 크기 정의
repeat(반복 횟수, 크기): 지정된 크기의 행이나 열을 반복 횟수만큼 만듬
grid-template: A B / a b = grid-template-rows: A B + grid-template-columns: a b
grid-auto-rows와 grid-auto-rows: 명시되지 않은 그리드의 행/열의 크기를 자동으로 설정
[그리드 배치]
'그리드 항목'은 단일 또는 여러 '셀'로 구성
라인은 각 행/열의 시작점에서부터 1로 시작하며, -1은 대칭된 시작점(끝)에서 시작 ex. 1 = 그리드의 좌측 끝, -1 = 그리드의 우측 끝
‘grid-column-start: #’와 ‘grid-row-start: #’는 그리드가 어디서 시작하는지 정의
‘grid-column-end: #’와 ‘grid-row-end: #’는 그리드가 어디서 끝나는지 정의
‘grid-column: start# / end#’ 형태로 줄여쓸 수 있음
‘grid-area: row-start # / column-start# / row-end # / column-end #’는 행과 열의 크기를 한번에 작성
[그리드 항목 크기 조절 및 배치 상세]
[부트스트랩(Bootstrap)]
12열 시스템(12 columns system)
부트스트랩은 12열 시스템으로 유명
이 시스템은 레이아웃을 유연하게 구성할 수 있게 해주며, 다양한 화면 크기에 대응하기 쉬움
예를 들어, 3개의 동일한 너비의 열을 만들려면 각 열에 'col-4' 클래스를 사용(4 + 4 + 4 = 12)
모바일 우선 및 반응형 디자인
부트스트랩은 모바일 기기부터 시작해 더 큰 화면으로 확장되는 '모바일 우선(mobile first)' 접근 방식을 채택
미리 정의된 클래스를 통해 다양한 화면 크기에 대응하는 반응형 디자인을 쉽게 구현 가능
모바일 우선 및 깔끔한 디자인의 웹 페이지를 만들 때 부트스트랩을 사용하는 것이 바람직 ↔ 그러나 고도로 맞춤화된 웹 사이트나 간단한 웹 페이지를 만들 때는 외부 CSS 프레임워크를 사용하지 않는 것이 좋음
부트스트랩 적용법
부트스트랩을 사용하려면 head 섹션에 부트스트랩 링크 코드를 삽입하고, 적용하려는 HTML 코드를 가져와야 함
자바스크립트 기능을 사용하려면 <body> 태그 끝에 스크립트 추가 필요
col-#는 12열 내에서 #개의 열을 하나로 병합하는 것을 의미
col-# 클래스
'col-#'에서 '#'는 1부터 12까지의 숫자
이 숫자는 12열 그리드 시스템에서 해당 요소가 차지할 열의 수를 나타냄
예를 들어, 'col-6'은 전체 너비의 절반(6/12)을 차지
반응형 클래스
'col-sm-#', 'col-md-#', 'col-lg-#', 'col-xl-#' 등의 클래스를 사용하여 화면 크기에 따라 다른 레이아웃을 적용가능
예를 들어, 'col-sm-6 col-md-4'는 작은 화면에서는 절반 너비, 중간 크기 화면에서는 1/3 너비를 차지
매우 작은 화면 (576px 미만)
col-12 적용
모든 열이 전체 너비를 차지하여 1열 구조 형성
작은 화면 (576px 이상 768px 미만)
col-sm-6 적용
2열 구조로 변경, 각 열이 화면의 절반 너비 차지
중간 화면 (768px 이상 992px 미만)
col-md-4 적용
3열 구조로 변경, 각 열이 화면의 1/3 너비 차지
단, 마지막 열은 col-md-12로 전체 너비 차지 가능
큰 화면 (992px 이상)
col-lg-3 적용
4열 구조로 변경, 각 열이 화면의 1/4 너비 차지
