CSS | Cascading Style Sheets

Posted Dec 12, 2024

By 탱

65 min read

KT 에이블스쿨 6기 CSS에 진행한 강의 내용 정리한 글입니다.

CSS 개요

CSS는 스타일 시트 표준안으로 글꼴, 색상, 정렬과 같은 디자인 요소를 적용하는 데 사용

CSS3 구성 요소	설명
선택자 (Selector)	스타일 시트를 적용할 대상을 지정
속성 (Property)	어떤 속성을 적용할지 선택
속성값 (Value)	속성에 어떤 값을 반영할지 선택

HTML 속성 & CSS 속성

HTML의 속성은 Attribute로 웹 페이지의 구조와 기능을 정의
- HTML은 무엇을 보여줄지 결정
CSS의 속성은 Property로 웹 페이지의 스타일과 시각적인 표현을 정의
- CSS는 어떻게 보여줄지를 결정

속성 종류	정의	용도	구조	역할
HTML 속성 (Attributes)	HTML 태그에 추가되어 해당 태그의 동작이나 표현을 제어	웹 요소의 기능을 설정하거나 변경	태그 내부에 위치하며 `속성이름="값"` 형태로 사용	요소와 요소 간의 관계 등을 정의
CSS 속성 (Properties)	요소의 스타일(모양과 레이아웃)을 정의	웹 요소의 색상, 크기, 여백, 정렬, 배경 이미지 등 시각적인 표현을 제어	스타일 규칙 내에서 `속성:값;` 형태로 사용	웹 요소의 시각적인 디자인을 담당

문서작성의 분리

HTML은 문서 작성을, CSS는 디자인을 담당

문서 작성 분리의 장점	설명
내용과 디자인 수정	문서의 내용만 수정할 때 디자인에 영향을 주지 않음
다양한 기능으로 확장	글자에 글꼴을 적용, 색상을 조정, 이미지를 변경
로딩 시간의 단축	속성값이 한번 로딩되면 메모리에 저장되며 동일한 속성을 위한 코드는 불필요

CSS 기초

HTML 문서의 스타일을 지정하는 데 사용하는 언어

HTML 요소를 표시하는 방법을 설명
여러 웹 페이지의 레이아웃을 한 번에 제어 가능
외부 스타일 시트는 CSS파일에 저장

CSS 정의 문법

선언 블록 앞에는 선택자를, 블록 내에는 속성과 속성값을 {속성: 속성값;} 형태로 정의
- 세미콜론(;)은 속성과 속성값의 쌍을 구분하는 역할

CSS 선택자

선택자는 CSS 속성 값을 적용하기 위해 어떤 요소를 선택하는지 알려주는 것

CSS 선택자 유형

선택자 유형
- 유형 선택자: 특정 태그를 선택 (ex. div)
- 클래스 선택자: 클래스 속성을 선택 (ex. .classname)
- ID 선택자: ID 속성을 선택 (ex. #idname)
- 속성 선택자: 속성을 기반으로 선택 (ex. [type="text"])
구조 기반 선택자
- 자식 선택자: 특정 부모의 자식을 선택 (ex. div > p)
- 자손 선택자: 특정 부모의 모든 후손을 선택 (ex. div p)
- 인접 형제 선택자: 특정 요소의 바로 다음 형제를 선택 (ex. h1 + p)
- 일반 형제 선택자: 특정 요소 뒤에 있는 모든 형제를 선택 (ex. h1 ~ p)
가상 선택자
- 가상 클래스: 특정 상태의 요소를 선택 (ex. :hover, :focus)
- 가상 요소: 요소의 특정 부분에 새 콘텐츠를 추가 (ex. ::before, ::after)

선택자의 종류

유형(type) 선택자

HTML 요소의 이름을 직접 사용하여 해당 태그에 스타일을 적용하는 방법
div, p, h1 등을 직접 지정하여, 해당 태그를 가진 모든 요소에 스타일을 적용

범용(universal) 선택자

범용 선택자는 별표( * )로 표시
문서의 모든 항목을 선택하며 특별한 제한 없이 모든 HTML 요소에 스타일을 적용할 때 사용

클래스(class) 선택자

class 속성에 스타일을 적용하는데 사용
클래스 선택자는 점(‘ . ‘) 으로 시작하며 지정된 클래스 이름을 가진 모든 요소에 스타일 규칙을 적용
하나의 요소에 여러 클래스를 적용할 수 있고, 같은 클래스를 여러 요소에 적용 가능

ID 선택자

id 속성에 스타일을 적용하는 데 사용
해시태그(‘#’)로 시작하며, 고유값을 가진 단일 요소에 스타일을 적용
id는 페이지 내에서 유일해야 하며, 한 요소에 하나의 id 만 할당 가능

속성(Attribute) 선택자

HTML 요소의 특정 속성을 기반으로 요소를 선택하는 방법
속성 선택자를 사용하면 속성의 존재 여부, 속성의 값, 속성 값의 일부 등에 따라 요소를 선택 가능
속성 선택자를 사용하면 속성의 존재 여부, 속성의 값, 속성 값의 일부 등에 따라 요소를 선택 가능

선택자	설명
`[attr]`	속성 `attr`을 가진 모든 요소를 선택
`[attr="value"]`	`attr` 속성의 값이 `value`인 요소를 선택
`[attr~="value"]`	`attr` 속성의 값이 공백으로 구분된 리스트 중 `value`를 포함하는 요소
`[attr^="value"]`	`attr` 속성의 값이 `value`로 시작하는 요소를 선택
`[attr$="value"]`	`attr` 속성의 값이 `value`로 끝나는 요소를 선택
`[attr*="value"]`	`attr` 속성의 값이 어디에든 `value`를 포함하는 요소를 선택

결합자(Combinators)

두 개 이상의 선택자를 결합하여 특정한 관계에 있는 요소를 선택

결합자 유형	설명	예제
자식 결합자	한 선택자의 직접 자식인 다른 선택자를 선택	`div > p`
자손 결합자	한 선택자의 자손인 다른 선택자를 선택	`div p`
인접 형제 결합자	한 선택자 바로 다음에 있는 형제 선택자를 선택	`h1 + p`
일반 형제 결합자	한 선택자 뒤에 있는 모든 형제 선택자를 선택	`h1 ~ p`
컬럼 결합자	그리드의 특정 컬럼에 있는 요소들을 선택	`\\|\\|`

가상 클래스 (Pseudo-classes) & 가상 요소 (Pseudo-elements)

CSS에서 특정한 상태나 문서의 특정 부분을 스타일링 하기 위해 사용
실제 클래스가 아니라 요소의 특정 상태(호버, 포커스, 체크)를 표시

가상 클래스

가상 클래스	설명
`:hover`	사용자가 마우스로 요소 위에 올렸을 때
`:focus`	요소가 포커스를 받았을 때
`:active`	요소가 활성화 상태일 때
`:nth-child(n)`	`n`번째 자식 요소에 스타일을 적용
`:first-child`	첫 번째 자식 요소에 스타일을 적용
`:last-child`	마지막 자식 요소에 스타일을 적용

가상 요소

가상 요소	설명
`::before`	요소의 내용 전에 콘텐츠를 추가하고 스타일링
`::after`	요소의 내용 후에 콘텐츠를 추가하고 스타일링
`::first-line`	요소의 첫 줄에만 스타일 적용
`::first-letter`	요소의 첫 글자에만 스타일 적용
`::selection`	사용자가 텍스트를 선택했을 때의 스타일을 적용

CSS 적용 규칙

CSS 규칙 충돌

계단식과 우선 순위 개념이 충돌할 때 적용되는 규칙을 제어하는 매커니즘의 작동 방식
부모 요소에 설정된 값을 상속받는 상속(inheritance)의 개념이 중요

계단식(cascade): CSS는 동일한 우선 순위를 갖는 두 규칙이 적용될 때 마지막에 나오는 규칙을 사용
우선순위(specificity): 구체적으로 명시된 규칙이 더 일반적인 규칙보다 우선적으로 적용됨
상속(inheritance): 상위 요소에 적용된 스타일이 하위 요소로 자동적으로 전달되는 특성

상속(inheritance)

CSS에서 상속은 부모 요소에 정의된 스타일이 자식 요소로 자동으로 전달되는 특성

주로 텍스트 관련 속성에 적용되며, 디자인의 일관성을 유지하고 코드의 중복을 줄이는 데 도움
상속되는 속성과 그렇지 않은 속성이 있으며, 상속 규칙은 필요에 따라 오버라이드(override) 가능

상속 되는 속성 & 그렇지 않는 속성

상속되는 속성은 주로 글꼴과 관련된 스타일링에 해당
상속되지 않는 속성은 레이아웃과 구조를 결정하는 데 관련된 속성

상속되는 속성
- color: 글꼴 색상
- font-family: 글꼴 종류
- font-size: 글꼴 크기
- line-height: 줄 높이
- text-align: 텍스트 정렬
- visibility: 요소의 가시성
상속되지 않는 속성
- background-color: 배경 색상
- border: 테두리
- height & width: 높이와 너비
- margin & padding: 외부 여백과 내부 여백
- position: 위치 지정
- display: 요소의 표시 방식

상속 제어하기

상속을 제어하기 위한 4가지 특수 범용 속성 값(inherit, initial, unset, revert)을 제공

inherit: 선택한 요소의 속성 값을 부모 요소의 속성 값과 동일하게 설정
initial: 선택한 요소의 속성 값을 브라우저 기본 스타일 시트에서 설정된 값으로 초기화
unset: 속성을 “자연적(natural)” 값으로 재설정하며 속성이 자연적으로 상속되면 inherit로 적용, 그렇지 않으면 initial로 적용
revert: 특정 속성에 대해 사용자 에이전트 또는 부모 요소로부터 상속 받은 스타일로 되돌리는 키워드로 한정된 브라우저에서 사용 가능

상속되지 않는 기본 속성

CSS에서 특정 태그에 기본적으로 적용되는 속성들 존재
이러한 속성들을 다른 요소가 상속받기 위해서는 inherit 값을 명시적으로 설정 필요

모든 속성 값 재설정

CSS 속기 속성(shorthand property)을 all 로 사용하면 단일 선언으로 요소의 모든 속성에 대해 inherit, initial, unset 또는 revert 중 하나의 값을 적용 가능

계단식(cascade) 이해하기

CSS의 상속 규칙으로 인해 깊게 중첩된 단락이 본문에 적용된 CSS와 같은 색상 적용
CSS를 변경하려면 특정 요소에 직접 스타일을 적용하거나 클래스를 할당 가능
여러 요소에 대해 스타일을 정의할 때는 CSS의 계단식 규칙을 사용하여 어떤 규칙이 최종적으로 적용될지 결정

CSS 중요도 순서

!important
- 모든 우선순위를 무시하고 가장 높은 중요도를 적용
우선 순위 (Specificity)
- 구체적으로 명시된 규칙이 더 일반적인 규칙보다 우선 적용
소스 순서
- 동일한 가중치를 가진 규칙이 여러 개 있을 경우 CSS에서 마지막에 정의된 규칙이 적용

우선 순위(Specificity)

선택자의 특이성 값을 기반으로 우선순위를 계산하며, 높은 특이성을 가진 스타일 규칙이 우선 적용

!important
- 모든 우선순위를 무시하고 가장 높은 중요도를 적용
- 특정 속성과 가치를 가장 구체적으로 만들어 계단식의 일반적인 규칙을 무시하고 최우선적으로 선택
인라인 스타일
- HTML 요소에 직접 적용된 스타일 (ex. <p style="color: red;">)
ID 선택자
- 특정 ID를 기준으로 선택 (ex. #id)
클래스/속성/가상 클래스 선택자
- 클래스 선택자: .classname
- 속성 선택자: [type="text"]
- 가상 클래스 선택자: :hover, :first-child 등
태그/가상 요소 선택자
- 태그 선택자: div, p, h1 등
- 가상 요소 선택자: ::before, ::after 등
소스 순서
- 동일한 가중치를 가진 규칙이 여러 개 있을 경우 CSS에서 마지막에 정의된 규칙이 적용

텍스트 스타일링

기본적인 텍스트 및 글꼴 스타일링

텍스트는 일련의 인라인 요소처럼 작동
서로 인접한 줄에 배치될 경우 줄 끝에 도달할 때까지 자동으로 줄 바꿈이 생성되지 않음
텍스트 스타일은 주로 텍스트와 글꼴 관련으로 두 가지 카테고리로 분류

텍스트 스타일

글꼴 스타일: 텍스트에 적용되는 글꼴에 영향을 주고, 크기, 굵기, 이탤릭체 등에 영향
텍스트 레이아웃 스타일: 텍스트의 간격 및 기타 레이아웃 기능에 영향

글꼴 스타일링의 다양한 속성

색상(Color)
- 텍스트의 색상을 설정 (ex. color: red;)
글꼴 종류(Font Family)
- 텍스트에 적용할 글꼴을 지정 (ex. font-family: Arial;)
웹 안전 글꼴(Web Safe Fonts)
- 대부분의 시스템에서 사용 가능한 글꼴 (ex. Arial, Courier New, Georgia 등)
기본 글꼴(Generic Font Families)
- 일반 글꼴로 브라우저와 운영 체제에 따라 다르게 표시 (ex. serif, sans-serif, monospace 등)
글꼴 스택(Font Stack)
- 여러 글꼴 이름을 목록으로 지정하여 사용 (ex. font-family: "Trebuchet MS", Verdana, sans-serif;)
- 하나의 글꼴이 사용 불가능할 경우 다음 글꼴로 대체
글꼴 스타일(Font Style)
- 텍스트를 이탤릭체로 만들거나 일반체로 설정 (ex.normal, italic, oblique 등)
글꼴 두께(Font Weight)
- 텍스트의 굵기를 정의 (ex. normal, bold, lighter, bolder 등)
텍스트 변형(Text Transform)
- 텍스트의 대소문자 형태를 변경 (ex. none, capitalize, uppercase, lowercase 등)
텍스트 장식(Text Decoration)
- 텍스트에 밑줄, 취소선, 오버라인 등의 장식을 추가 (ex. none, underline, overline 등)
텍스트 그림자(Text Shadow)
- 텍스트에 그림자 효과를 추가 (ex. text-shadow: 2px 2px 2px grey;)

텍스트 레이아웃의 다양한 속성

텍스트 정렬
- text-align 속성으로 왼쪽(left), 오른쪽(right), 중앙(center), 양쪽(justify) 맞춤으로 정렬
선 높이
- line-height 속성으로 텍스트 줄의 높이를 설정
- line-height: 1.5; 주로 1.5 ~ 2사이를 권장
문자 및 단어 간격
- letter-spacing, word-spacing 으로 문자와 단어 사이의 간격을 조절
- letter-spacing: 2px; word-spacing: 4px;
기타 글꼴 스타일링 옵션
- 다양한 옵션을 통해 더 세부적인 글꼴 스타일링
- font-variant, font-kerning, font-featuresetting
글꼴 약식
- font 속성을 사용하여 글꼴 스타일, 두께, 크기 등 여러 속성을 한번에 설정
- italic bold 12px/1.5 Arial, sans-serif;

목록 스타일링

목록은 대부분 다른 텍스트처럼 작동하지만 관련된 CSS 속성과 고려해야할 사항들 존재
목록 스타일, 목록 간격 처리, 목록 계산 제어 등이 있음

목록 스타일 (list-style-type)

원형 마커(Circle)
- circle 값을 사용하면 목록 항목에 빈 원 마커가 표시
디스크 마커(Disc)
- 디폴트 값인 disc는 실선 원 마커를 표시
사각형 마커 (Square)
- 사각형 마커가 생성
숫자 마커(Number)
- <ol>의 디폴트 값
로마 숫자 마커(Roman Numerals)
- upper-roman 또는 lower-roman을 사용 하여 대문자, 소문자 로마 숫자로 설정
알파벳 마커(Alphabets)
- upper-alpha 또는 lower-alpha를 사용하여 대문자, 소문자 알파벳 마커를 적용

박스 모델

내부 및 외부 디스플레이 유형

display: flex 같은 값을 사용하여 내부 디스플레이 유형을 변경할 수 있으며 외부 유형은 블록이지만 내부 유형은 플렉스로 바뀜

주요 내부 디스플레이 유형

내부 디스플레이는 박스 내부의 요소가 어떻게 배치되는지 결정

display: flex
- 자식 요소들을 한 줄 또는 여러 줄로 정렬하며, 공간을 유연하게 분배
- 레이아웃에서 정렬과 정돈을 쉽게 조정 가능
display: grid
- 자식 요소들을 행(row)과 열(column)로 구성된 격자(grid) 형태로 배치
- 복잡한 2차원 레이아웃에 적합
display: flow
- 기본 흐름(layout flow)에 따라 요소를 배치
- HTML의 기본 디스플레이 흐름

외부 디스플레이 유형

외부 디스플레이 유형(블록 또는 인라인)은 박스가 다른 요소와 어떻게 상호작용하는지 결정

블록 유형 (block)
- 요소가 새로운 줄에서 시작하고 전체 너비를 차지
- <div>, <p> 등
인라인 유형(inline)
- 요소가 같은 줄에 배치되며, 콘텐츠 크기만큼 너비를 차지
- <span>, <a> 등
인라인-블록 유형 (inline-block)
- 인라인처럼 같은 줄에 배치되지만, 블록처럼 크기를 조정 가능
- <img>, <button> 등

블록 및 인라인 박스

CSS에서 박스는 페이지의 요소들이 어떻게 상호작용하고 배치되는지를 결정하는 기본 단위

블록 박스(Block Box)

박스가 전체 가용 너비를 사용
새 줄에서 시작하며 width, height 속성이 적용
패딩, 여백, 테두리가 다른 요소를 밀어내는 효과
블록 박스 기본 설정 요소로는 <h1>, <p> 등이 있음

인라인 박스(Inline Box)

새 줄로 넘어가지 않으며 width, height 속성이 적용
패딩, 여백, 테두리가 다른 인라인 박스를 밀어내지 않음
인라인 박스 기본 설정 요소로는 <a>, <span>, <em>, <strong>등이 있음

인라인-블록(inline-block)

inline과 block 요소의 특성을 혼합한 디스플레이 방식으로 동일한 줄에 배치되면서도 블록 수준 요소의 크기 및 간격 조정을 지원

특징	설명
줄 내 배치 (Inline Placement)	`inline` 요소처럼 동일한 줄에 배치
블록 레벨의 크기 지정 (Block-level Sizing)	`block` 요소처럼 너비(`width`)와 높이(`height`)를 지정 가능
마진과 패딩 (Margin & Padding)	주변 요소와의 간격을 조절하기 위해 마진과 패딩을 적용 가능
수직 정렬 (Vertical Alignment)	요소의 수직 정렬을 조정할 수 있습니다. 상위, 중앙, 하위 등 다양한 위치로 정렬 가능
플로우 내 위치 (Flow within the Layout)	문서 플로우(특히 Normal Flow) 내에서 요소의 자리를 유지

CSS 박스 모델(Box Model) 구성

CSS의 박스 모델은 HTML 요소를 감싸는 박스로 웹 페이지의 디자인과 레이아웃을 결정하는데 중요한 역할

요소	설명
콘텐츠 (Contents)	박스 내부의 텍스트나 이미지와 같은 실제 내용이 위치하는 부분
패딩 (Padding)	콘텐츠 주위를 둘러싸는 영역으로, 투명하며 콘텐츠와 테두리 사이의 간격을 생성
테두리 (Border)	패딩과 콘텐츠 주변을 둘러싸는 선
여백 (Margin)	테두리 바깥쪽을 둘러싸는 영역으로, 외부 요소와의 간격을 정의하며 투명

표준 박스 모델 & 대체 박스 모델

CSS에서 표준 박스 모델과 대체 박스 모델이 존재

표준 박스 모델
- width와 height는 콘텐츠 영역의 크기를 정의
- 패딩, 테두리, 마진이 추가적으로 고려되어 요소가 차지하는 전체 크기를 결정
대체 박스 모델(Border-Box)
- width와 height가 테두리와 패딩을 포함한 전체 박스의 크기를 정의
- 콘텐츠의 영역의 크기는 width에서 패딩과 테두리의 너비를 뺀 크기
- box-sizing: border-box로 설정

테두리(Border)

요소의 패딩과 여백 사이에 위치하며 요소의 경계를 형성
- 표준 박스 모델에서는 테두리의 크기가 전체 요소의 크기에 추가
- 대체 박스 모델에서는 테두리가 width와 height에 포함

속성	설명
`border`	테두리의 너비, 스타일, 색상을 한 줄로 설정
`border-width`	테두리의 굵기를 설정하며 네 방향을 개별적으로 설정 가능
`border-style`	테두리의 스타일을 설정 (실선, 점선 등)
`border-color`	테두리의 색상을 설정하며, 네 방향 각각 다른 색상을 지정 가능
`border-radius`	테두리의 모서리를 둥글게 설정
`border-top`, `border-right`, `border-bottom`, `border-left`	각 방향(상, 우, 하, 좌)의 테두리를 개별적으로 설정

여백(Margin)

여백은 요소의 외부 가장자리를 형성하며 주변 요소와의 공간을 생성
양수 또는 음수 값을 가질 수 있음
음수값을 사용하면 요소들이 서로 겹칠 수 있음
여백은 박스 모델의 크기에 직접적으로 포함되지 않지만, 전체적인 레이아웃에 영향을 미침

패딩(Padding)

패딩은 요소의 내부 가장자리를 형성하여 콘텐츠와 테두리 사이의 공간을 만듦
음수 값을 가질 수 없으며 항상 0 이상
요소에 적용된 배경색이나 배경 이미지는 패딩 영역까지 확장

콘텐츠 오버플로우(Overflow)

콘텐츠 오버플로우(Overflow)

박스 모델에서 콘텐츠가 그 용기(박스)보다 커서 넘치는 상황
박스에 지정된 width 나 height 가 콘텐츠를 수용하기에 충분하지 않을 때 발생
CSS에서는 오버플로우된 콘텐츠를 데이터 손실을 방지하기 위해 숨기지 않고 보여줌
오버플로우 해결 방법으로는 크기를 조절하던가 오버플로우를 제어 필요

오버플로우 관리방법

넘치는 콘텐츠를 숨길 수 있으며, 이 경우 콘텐츠 일부가 잘리거나 전혀 보이지 않을 수 있음
스크롤바를 추가하여 넘치는 콘텐츠를 표시하면서 틀을 유지 가능
콘텐츠 크기와 글꼴 크기에 유연하게 대응할 수 있는 디자인을 고려

속성	설명
`overflow: hidden`	넘치는 콘텐츠를 숨김
`overflow: scroll`	항상 스크롤 막대를 추가하며, 콘텐츠가 넘치지 않아도 스크롤 막대가 보이게 설정
`overflow: auto`	콘텐츠가 넘칠 경우에만 스크롤 막대가 나타나도록 설정
`overflow-x`, `overflow-y`	가로(`x`) 또는 세로(`y`) 축의 오버플로우를 개별적으로 제어
블록 서식 컨텍스트 (BFC)	`overflow`가 `scroll`, `auto`, `hidden` 중 하나로 설정된 경우 해당 박스는 자체 블록 서식 컨텍스트를 형성

마진 병합(Margin Collapse)

상하 마진이 때때로 하나의 마진으로 병합되어 두 마진 중 큰 값으로 결정되며 좌우 마진에는 적용 불가능

방법	설명
패딩(Padding) 사용	요소에 패딩을 추가하여 마진 축소를 방지, 패딩은 마진과 달리 축소 현상에 영향을 받지 않음
테두리(Border) 추가	요소에 테두리를 추가하여 마진 축소를 방지, 1픽셀 또는 투명 테두리로도 효과를 얻을 수 있음
인라인 블록(Inline-block) 사용	요소를 `display: inline-block;`으로 설정하면 마진 축소 현상을 겪지 않음
Flexbox 또는 Grid 사용	Flexbox나 Grid 레이아웃을 사용하면 마진 축소 문제가 해결, 이 레이아웃 방식은 마진 축소를 다르게 처리
Overflow 속성 변경	`overflow` 속성을 `auto`, `hidden`, `scroll` 중 하나로 설정하여 새로운 블록 서식 컨텍스트를 생성

레이아웃(Layout) 모델

뷰포트와 관련하여 박스를 올바른 장소에 배치하는 방법

개념	설명
노멀 플로우 (Normal Flow)	웹 페이지 요소들이 기본적으로 어떻게 배치되는지 정의
플로트 (Float)	텍스트 블록 안에 이미지를 배치하기 위해 사용되는 속성
포지셔닝 (Positioning)	요소를 문서의 일반적인 레이아웃 흐름에서 벗어나 원하는 위치에 배치할 수 있도록 설정
플렉스 박스 (Flexbox)	행이나 열로 요소를 배치하는 1차원 레이아웃 메서드
그리드 (Grid)	행과 열을 활용하여 콘텐츠를 배치하는 2차원 레이아웃 시스템
멀티 레이아웃	콘텐츠를 여러 단으로 나누어 배치하는 방법
반응형 디자인	다양한 화면 크기에 맞게 레이아웃과 모양을 변경하는 디자인 방법
미디어 쿼리	장치의 특성에 따라 다른 스타일을 적용하는 방법

노멀 플로우(Normal Flow)

CSS가 적용되지 않을 경우 웹 페이지 요소들은 기본적으로 보통 흐름에 따라 배치
웹 페이지의 기본적인 레이아웃 메커니즘을 제공
블록 수준 요소: 부모 요소의 너비 100%를 차지하며 내용물의 최대 높이를 가짐
인라인 요소: 같은 줄에 배치되며 필요한 경우 새 줄로 넘어감
여러 요소가 상호 작용할 때 마진 병합 현상이 발생 가능

플로트(Float)

웹페이지에서 텍스트 열 내에 이미지를 띄우고 주변 텍스트를 이미지 주위로 흐르게 하는 데 사용
신문 레이아웃을 디지털로 재현하는 데 유용했으며, Grid, Flexbox 등장 이후에 이미지 레이아웃 목적으로 사용

속성	값	설명
float	none, left, right	요소를 왼쪽이나 오른쪽으로 띄우며 기본값은 none으로 float하지 않음을 의미
clear	none, left, right, both	float된 요소의 영향을 받지 않도록 설정
margin	단위(px, % 등)	float된 요소 주변의 공간을 설정하며 텍스트나 다른 요소와의 간격을 조정하는 데 사용
width	단위(px, % 등)	float된 요소의 너비를 설정하며 명시적인 너비를 설정하는 것이 중요
height	단위(px, % 등)	float된 요소의 높이를 설정하며 때로는 명시적인 높이를 설정해야 할 필요가 있음
overflow	visible, hidden, scroll, auto	컨테이너가 float된 자식 요소를 어떻게 처리할지 결정하며 hidden이나 auto 사용 시 컨테이너 높이가 조정될 수 있음
display	block, inline-block, flex, grid 등	요소의 박스 타입을 결정하며 float된 요소는 기본적으로 block으로 처리되며, display 속성을 조정해 레이아웃을 세밀히 조정 가능

플로트(Float)의 문제점 및 해결방법

플로트(Float)의 문제점

float 속성을 사용할 때, 부모 요소의 높이가 사라지는 현상이 발생 가능
- 부모 요소가 자식 요소들을 감싸지 못하고 높이가 0으로 처리되는 현상이 발생

플로트(Float)의 문제를 해결방법 Clearfix

Clearfix는 부모 요소가 자식 요소들을 올바르게 감싸고 자식 요소들의 높이만큼 부모 요소의 높이를 적절히 확장하도록 하는 CSS 기법
- 부모 요소에 가상요소 선택자를 두어 문제를 해결
- 주로 :after 선택자를 사용하며 clear: both; 속성을 통해 float 된 모든 요소들의 흐름을 양쪽 다 제거

포지셔닝(Position)

CSS에서 position 속성은 웹 문서 내의 요소들을 어떻게 배치할 지 결정하는 데 사용
요소의 위치를 정적(static), 상대적(relative), 절대적(absolute), 고정(fixed), 스티키(sticky)로 설정 가능

속성	설명	방향값 적용	z-index 적용	특징
`static`	기본값 요소가 일반적인 문서 흐름에 따라 배치	아니오	아니오	-
`relative`	요소가 일반적인 문서 흐름에 따라 배치되지만 시작 위치로부터 이동 가능 원래 자리를 기준으로 이동	예	예	-
`absolute`	일반 문서 흐름에서 제거 가장 가까운 위치 지정된 조상 요소에 대해 상대적으로 배치	예	예	지정된 조상에 상대적으로 위치
`fixed`	일반 문서 흐름에서 제거 뷰포트에 대해 상대적으로 배치 스크롤과 무관하게 고정	예	예	뷰포트에 고정되어 스크롤과 무관하게 동일 위치 유지
`sticky`	스크롤 위치에 따라 `relative`에서 `fixed` 변환처럼 작동 특정 위치에서 스크롤에 따라 고정	예	예	상대적 및 고정 위치잡기의 하이브리드 효과

절대 위치잡기(absolute)

요소가 일반 문서 흐름에서 제거되며 가장 가까운 위치 지정된 조상 요소에 대해 상대적으로 배치
가장 가까운 위치 지정된 조상이 없으면 <html> 요소에 대해 상대적으로 배치
팝업, 드롭다운 메뉴, 오버레이 등 독립적으로 움직이는 요소에 주로 사용
페이지 레이아웃의 일반 흐름에서 벗어나 다른 요소들과 공간을 공유하지 않음
다른 요소들은 절대 위치 지정된 요소의 공간을 인식하지 못하며 그 공간은 비어 있는 것처럼 동작

상대 위치잡기(relative)

요소가 원래 위치를 기준으로 상대적으로 이동
일반 문서 흐름에 포함되어 있으며 원래 위치는 페이지 레이아웃에 영향을 미침
요소의 정렬을 미세 조정하거나 position: absolute로 지정된 자식 요소의 컨테이너 역할을 수행

고정 위치잡기(fixed)

요소가 뷰포트(브라우저 창)에 대해 상대적으로 위치하며 스크롤과 무관하게 항상 동일한 위치에 고정
사용자가 페이지를 스크롤해도 항상 보이길 원하는 요소에 사용
고정 위치 지정된 요소는 페이지 스크롤에 영향을 받지 않음

스티키 위치잡기(sticky)

요소가 사용자의 스크롤 위치에 따라 상대 위치와 고정 위치 사이를 전환
특정 임계점(ex. 스크롤 위치)에 도달하면 요소가 뷰포트 내에서 고정
화면 상단에 고정되어야 하는 테이블 헤더, 광고 배너 등에 사용

z-index

z-index는 position 속성이 static이 아닌 요소에 대해서만 적용
z-index 속성을 지정하지 않은 요소는 기본적으로 레이어 0에 렌더링
요소들이 같은 z-index 값을 가진 경우, 문서 내에서 선언된 순서대로 쌓임
높은 z-index 값을 가진 요소는 낮은 z-index 값을 가진 요소 위에 렌더링

요소 ID	position 속성	z-index 값	설명
DIV #1	absolute	5	절대 위치 지정된 이 요소는 z-index 값 5를 가지므로 동일한 콘텍스트 내 다른 요소들보다 상위 레이어에 배치됨
DIV #2	relative	3	상대 위치 지정된 이 요소는 z-index 값 3을 가지며 DIV #3보다 높은 레이어에, 하지만 DIV #1 및 DIV #5보다는 낮은 레이어에 배치
DIV #3	relative	2	상대 위치 지정된 이 요소는 z-index 값 2를 가지며 DIV #4보다 높지만 DIV #1, DIV #2 및 DIV #5보다 낮은 레이어에 배치
DIV #4	absolute	1	절대 위치 지정된 이 요소는 z-index 값 1을 가지며 가장 낮은 양수 z-index 값을 가진다는 점에서 다른 요소들보다 낮은 레이어에 배치
DIV #5	static	8	이 요소는 position이 `static`으로 기본 설정되므로 z-index 값 8은 무시되고 기본 레이어에 렌더링

Flexbox

1차원 레이아웃 메서드로, 행과 열 형태로 요소를 배치하는 데 사용
Flexbox는 복잡한 레이아웃을 단순화하고, 특히 중앙 정렬, 동일한 너비/높이의 열 생성, 다양한 크기의 콘텐츠를 포함하는 레이아웃을 구현 가능
다양한 속성을 사용하여 항목의 크기, 정렬, 순서를 조절하며 반응형 웹 디자인에 적합

개념/속성	설명
Flex Container	Flexbox 레이아웃을 적용한 부모 요소로 `display: flex`로 설정
Flex Items	Flex Container 내부의 자식 요소들로 자동으로 Flexbox 레이아웃에 따라 배치
주 축 (Main Axis)	Flex Items가 배치되는 방향의 축으로 기본적으로 행(row) 방향이며, `flex-direction` 속성으로 변경 가능
교차 축 (Cross Axis)	주 축에 수직인 축으로 `align-items`와 `justify-content` 속성을 사용하여 교차 축 상의 정렬을 조절
Flex Direction	Flex Items의 배치 방향을 결정하는 속성으로 `row`, `column`, `row-reverse`, `column-reverse` 값을 선택 가능
Flex Wrap	Flex Items의 줄 바꿈 여부를 결정하는 속성으로 `nowrap`, `wrap`, `wrap-reverse` 값을 선택 가능
Flex Size 조정	`flex` 속성을 사용하여 Flex Items의 성장, 축소 비율과 기본 크기를 조정
Align Items	교차 축에서 Flex Items의 정렬 방식을 설정하며 `stretch`, `center`, `flex-start` 등의 값을 사용 가능
Justify Content	주 축에서 Flex Items의 정렬 방식을 설정하며 `flex-start`, `flex-end`, `center`, `space-around`, `space-between` 등의 값 사용
Order	Flex Items의 배치 순서를 변경하는 속성으로 기본값은 0이며, 음수와 양수 값을 사용 가능
크로스 브라우저 호환성	대부분의 최신 브라우저에서 지원되지만 구형 브라우저에서는 호환성 문제가 발생 가능

Flex Container

Flex Container는 Flexbox 레이아웃을 적용한 부모 요소
내부의 자식 요소들인 Flex items를 감싸며 이들의 레이아웃을 관리
display: flex; 속성을 사용하여 설정되며 Flex Items의 정렬, 방향, 간격 등을 유연하게 조정 가능

Flex Items

Flex Container 내부의 자식 요소들로 Flexbox 레이아웃 시스템에 따라 배치
Flex Container의 속성에 따라 크기 조정, 순서 변경, 정렬 등이 가능하며 레이아웃의 유연성과 반응성을 제공
복잡한 레이아웃을 간단하고 효율적으로 구현하는데 중요한 역할 제공

축(Axis)

주 축(Main Axis)

Flexbox 레이아웃에서 Flex Items가 배치되는 방향을 결정하는 축
기본값은 가로(행, row) 방향으로 Flex Items가 가로로 나란히 배치
flex-direction 속성을 사용하여 방향을 세로로 변경 가능

교차 축(Cross Axis)

주 축에 수직인 축이며 주 축이 가로 방향이면 교차 축은 세로 방향
Flex Items의 수직 정렬을 관리하는데 사용
align-items: 교차 축에서 Flex Items를 정렬하는 속성
justify-content: 주 축에서 Flex Items를 정렬하는 속성

flex-direction

Flex Container 내의 Flex Items가 배치되는 주 축(Main Axis)의 방향을 결정

row: 기본값이며 Items가 텍스트의 기본 방향과 동일하게 가로 방향으로 배치
row-reverse: Items가 가로 방향으로 배치되지만 순서가 반대 (오른쪽에서 왼쪽으로 배치)
column: Items가 세로 방향으로 배치
column-reverse: Items가 세로 방향으로 배치되지만 순서가 반대 (아래에서 위로 배치)

align-items

Flex Container의 교차 축에서 Items의 정렬 방식을 설정

stretch(기본값): Items가 Container의 교차 축을 따라 늘어나도록 함
center: Items를 교차 축의 중앙에 배치
flex-start: Items를 교차 축의 시작 부분에 배치
flex-end: Items를 교차 축의 끝 부분에 배치
baseline: Items를 문자 기준선에 맞춰 정렬

justify-content

주 축(Main Axis)에서 Flex Items의 정렬을 결정
Items를 수평 방향(주 축 방향)으로 어떻게 배치할지 제어

flex-start(기본값): Items를 주 축의 시작점에 정렬
flex-end: Items를 주 축의 끝점에 정렬
center: Items를 주 축의 중앙에 정렬
space-between: 첫 번째 Item은 시작점에 마지막 Item은 끝점에 배치하고 나머지 Items는 사이에 균등한 간격을 둠
space-around: 각 Item 주위에 균등한 공간을 생성하여 정렬
space-evenly: 모든 Items 간 그리고 시작점 및 끝점에 동일한 크기의 공간을 배치하여 정렬

Flexbox Playground

flex를 쉽게 이해할 수 있는 오픈소스를 이용

flex-wrap

Flexbox 컨테이너 안의 아이템들이 한 줄에 모두 들어갈 수 없을 때 어떻게 처리할지 결정하는 속성

nowrap (기본값): 모든 아이템을 한 줄에 배치되며 필요한 경우 아이템의 크기가 줄어들 수 있음
wrap: 아이템들이 컨테이너의 너비를 초과할 경우 추가적인 줄로 감싸지며 여러 줄로 표시
wrap-reverse: wrap과 유사하지만 아이템들의 래핑 순서가 역방향으로 배치

flex size 조정

flex 속성은 flex-grow, flex-shrink, flex-basis의 세 가지 속성을 하나로 결합한 단축 속성

flex-grow: Item이 컨테이너 내에서 남은 공간을 어떻게 차지할지 결정하며 item의 flex-grow 값이 2이고 다른 item이 1이면 전자는 후자보다 두 배 더 많은 여분의 공간을 차지
flex-shrink: 컨테이너의 공간이 부족할 때 Item이 얼마나 축소될 수 있는지를 결정하며 기본값은 1로, 이는 item이 공간 부족에 따라 축소될 수 있음을 의미
flex-basis: Item의 초기 크기를 결정하며 px, em, %, auto등이 존재

크로스 브라우저 호환성

Flexbox는 현재 대부분의 현대 브라우저에서 지원

구 버전 브라우저 호환성: 오래된 브라우저는 Flexbox 초기 버전을 지원하거나 전혀 지원하지 않을 수 있음
접두사(Prefixes) 사용: 특정 브라우저에서는 -webkit-, -moz-, -ms-와 같은 접두사가 필요할 수 있음
특정 기능의 지원 여부: 모든 Flexbox 기능이 모든 브라우저에서 동일하게 지원되는 것은 아니며 flex-wrap, aligncontent와 같은 속성은 오래된 브라우저에서 지원되지 않을 수 있음

크로스 브라우저 호환성 대처 방법

폴리필(Polyfill) 사용: Flexbox를 지원하지 않는 브라우저에서는 JS 폴리필을 사용하거나 float 또는 positioning을 대체 레이아웃으로 활용
브라우저 테스트: 다양한 브라우저와 디바이스에서 웹 사이트를 테스트하여 호환성 확인
점진적 향상(Progressive Enhancement): 최신 기술을 지원하는 브라우저에 최적화된 경험을 제공

Grid

2차원의 레이아웃 시스템으로, 콘텐츠를 행과 열에 배치하는데 사용

핵심 개념

Grid Line
- 그리드의 행과 열을 그리는 선을 말하며 각 선은 1부터 라인 넘버를 가짐
- 그리드 아이템을 배치하는 기준으로 사용
Grid Track
- 그리드 라인 사이의 행 또는 열 공간
- 수직/수평 2개의 그리드 라인 사이에 연속된 공간을 트랙
Grid Cell
- 4개의 그리드 라인이 묶여 그려지는 가장 작은 단위(유닛)
Grid Area
- 4개의 그리드 라인이 모여 그려지는 공간으로 셀이 묶인 영역을 에어리어로 부름
Grid Gutters
- 행 또는 열 사이 간격(Gap)을 의미하며 거터라고도 부름

주요 속성

grid-template-areas
- 지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성
- 연속해서 같은 이름 지정 시 자동 병합 수행
가변 트랙
- fr(fraction, 공간 비율) 단위를 사용해 그리드 행과 열의 크기를 유동적으로 조정 가능
아이템 정렬
- justify-self: 그리드 아이템(Item)을 수평 정렬
- align-self: 그리드 아이템(Item)을 수직 정렬
z-index
- 그리드 아이템의 쌓이는 순서를 지정
반복 함수(repeat())
- repeat 함수는 위와 같이 많은 칸을 만들어야 할 때 활용
- repeat(칸 수, 사이 간격)으로 활용
최소/최대 크기(minmax())
- minmax 함수는 반응형 디자인에서 해당 칸이 최소한 가져야 할 크기와 최대한 가질 크기를 지정
- minmax(최소값, 최대값) 으로 활용

다단 레이아웃(Multi Column Layout)

CSS 다단 레이아웃은 웹 페이지에서 신문이나 잡지처럼 콘텐츠를 여러 열로 나누어 표시하는 방법
긴 텍스트 블록을 사용자가 읽기 쉽게 여러 열로 분할 가능

반응형 웹(RWD)

웹 페이지가 다양한 장치와 화면 크기에 맞게 콘텐츠를 자동으로 조정하여 최적화된 사용자 경험을 제공하는 웹 디자인 접근 방식
사용자가 어떤 장치를 사용하든 관계없이 웹사이트의 가독성과 사용성을 보장

속성	설명	예시
유동적 레이아웃	웹 페이지 레이아웃이 고정된 픽셀 대신 백분율로 설정되어, 뷰포트 크기에 따라 동적으로 조정	`.container { width: 100%; }` 컨테이너가 항상 뷰포트의 너비를 차지하도록 설정
미디어 쿼리	다양한 화면 크기와 해상도에 따라 서로 다른 스타일 규칙을 적용	`@media screen and (min-width: 600px) { ... }` 화면 너비가 600px 이상일 때 적용되는 스타일 정의
유연한 이미지	이미지가 컨테이너 너비를 초과하지 않도록 크기를 조정	`img { max-width: 100%; height: auto; }` 이미지가 컨테이너를 넘치지 않게 조정
분기점	레이아웃이 변경되어야 하는 특정 화면 너비를 지정	`@media (min-width: 768px) { ... }` 태블릿 및 데스크톱 화면에 적용될 스타일 설정
그리드 시스템	복잡한 레이아웃을 유연하게 구성	CSS Grid 또는 Flexbox를 사용하여 다단 레이아웃이나 복잡한 배치를 구현

디바이스별 분기점

해상도(≥ px)	장치 유형
320	모바일 (세로 모드)
480	모바일 (가로 모드)
600	작은 태블릿 (세로 모드)
768	큰 태블릿 (세로 모드)
1024	큰 태블릿 (가로 모드)
1280	데스크톱
1440	와이드 스크린 데스크톱

반응형 웹 디자인의 장점

반응형 웹 디자인의 장점

항목	설명
유연성	모든 화면 크기에서 콘텐츠가 잘 보이도록 보장
비용 효율성	별도의 모바일 사이트를 구축할 필요가 없어 개발 및 유지 관리 비용 절감
사용자 경험 향상	사용자가 어떤 장치를 사용하든 일관된 사용자 경험 제공
검색 엔진 최적화	하나의 URL을 사용하기 때문에 SEO에 유리하며 구글과 같은 검색 엔진에서 반응형 웹사이트를 선호

반응형 웹 디자인 구현 전략

전략	설명
모바일 우선	모바일 뷰를 기준으로 디자인을 시작하고 화면이 커질수록 추가 스타일을 적용하는 접근 방식
뷰포트 메타 태그	`<meta name="viewport" content="width=device-width, initial-scale=1">`를 사용하여 모바일 브라우저에서 사이트가 올바르게 렌더링되도록 설정

미디어 쿼리

반응형 웹 디자인을 구현할 때 필수적인 기술

다양한 화면 크기와 장치에 대응하여 웹 페이지의 레이아웃, 스타일, 이미지 등을 동적으로 조정 가능
미디어 유형을 all, print, screen 등과 같이 어떤 유형의 미디어를 대상으로 할 것인가를 지정해야 함
- 혹은 특정 조건을 명시하여 해당 조건을 만족할 때만 CSS 규칙을 적용

핵심 요소	설명
미디어 쿼리 활용	다양한 화면 크기에 맞춰 폰트 크기, 레이아웃, 이미지 등을 조정
유동적 레이아웃	콘텐츠와 컨테이너의 크기를 백분율로 설정하여 화면 크기에 따라 유연하게 조정
유연한 이미지	`max-width: 100%`를 사용하여 이미지가 컨테이너를 넘치지 않도록 조정
가로 및 세로 모드 구분	가로 모드와 세로 모드에 따라 서로 다른 스타일을 적용 가능
분기점 (Breakpoints)	레이아웃이 변경되어야 하는 특정 화면 너비를 지정하여 인터페이스를 최적화
포인팅 장치 최적화	사용자가 마우스, 터치스크린 등 어떤 유형의 포인팅 장치를 사용하는지에 따라 인터페이스를 최적화

모바일 우선 디자인 접근법

모바일 우선 디자인 접근법은 웹 개발과 디자인에서 중요한 전략 중 하나로 개발자와 디자이너가 웹사이트나 애플리케이션을 구축할 대 모바일 환경을 최우선으로 고려하는 방식
모바일 사용이 급증함에 따라 중요해지고 있고 최적의 경험을 할 수 있도록 보장하는 데 목적이 있음

핵심 원리	설명	이점
최소화된 디자인	모바일 화면의 제한된 공간을 고려하여 필수적인 기능과 콘텐츠에 집중	모바일 사용자에게 최적화된 경험을 제공하여 사용자 만족도 향상
점진적 향상 (Progressive Enhancement)	작은 화면에서 기본 기능과 스타일을 제공한 뒤 화면 크기가 커지면서 추가 기능과 스타일을 적용	모든 사용자가 웹사이트의 핵심 기능과 콘텐츠에 접근 가능
반응형 웹 디자인 (Responsive Web Design)	CSS 미디어 쿼리를 사용하여 다양한 화면 크기에 맞춰 레이아웃과 스타일을 동적으로 조정	Google 등 검색 엔진에서 모바일 친화적인 웹사이트로 간주되어 SEO에 유리
터치 친화적 인터페이스	터치스크린 사용자를 위해 크고 쉽게 탭할 수 있는 버튼과 링크를 포함
성능 최적화	이미지 최적화, 코드 최소화, 빠른 로딩 시간 등을 통해 성능을 최적화

Bootcamp, KT Aivle School

This post is licensed under CC BY 4.0 by the author.