CSS 기초·레이아웃
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
종속형 스타일 시트 CSS
HTML·SVG 등의 표시·배치·시각 스타일을 기술하는 스타일시트 언어.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
선택자 Selector
스타일 규칙을 적용할 요소를 선택하는 표현식.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
캐스케이드 Cascade
출처·중요도·계층·우선순위·순서 등에 따라 적용할 CSS 선언을 결정하는 규칙.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
명시도 Specificity
경쟁하는 선택자 사이에서 선언 우선순위를 판단하는 가중치 체계.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
상속 Inheritance
일부 속성 값이 부모 요소에서 자식 요소로 전달되는 동작.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
박스 모델 Box Model
콘텐츠·패딩·테두리·마진으로 요소의 차지하는 공간을 계산하는 모델.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
박스 크기 산정 box-sizing
width·height가 콘텐츠만 또는 테두리까지 포함하는지 정하는 속성.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
일반 흐름 Normal Flow
별도의 배치 변경 없이 문서 순서에 따라 요소가 배치되는 기본 규칙.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
블록 서식 문맥 Block Formatting Context
블록 배치와 부동 요소 상호작용 등을 독립적으로 처리하는 레이아웃 영역.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
플렉스박스 Flexbox
주축과 교차축을 기준으로 항목을 배열하는 1차원 중심 레이아웃 모델.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
CSS 그리드 CSS Grid
행과 열을 함께 정의하여 항목을 배치하는 2차원 레이아웃 모델.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
서브그리드 Subgrid
자식 그리드가 부모 그리드의 트랙 정의를 공유하는 기능.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
그리드 트랙 Grid Track
인접한 두 그리드 선 사이의 행 또는 열 공간.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
그리드 영역 Grid Area
하나 이상의 그리드 셀로 이루어진 배치 영역.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
요소 간 간격 gap
그리드·플렉스 등 지원 레이아웃의 항목 사이 간격을 지정하는 속성.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
내재적 크기 Intrinsic Sizing
명시적 고정값 대신 콘텐츠 자체의 특성에 따라 크기를 결정하는 방식.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
최소·최대 콘텐츠 크기 min-content / max-content
콘텐츠 줄바꿈 제약에 따라 가능한 최소 또는 최대 내재 크기를 나타내는 키워드.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
범위 제한 함수 clamp()
최솟값·선호값·최댓값으로 유연하게 변하는 CSS 값을 제한하는 함수.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
최소·최대 선택 함수 min() / max()
여러 CSS 계산 값 중 가장 작거나 큰 값을 선택하는 함수.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
CSS 계산 함수 calc()
호환되는 수치와 단위에 산술식을 적용하는 함수.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
위치 지정 Positioning
static·relative·absolute·fixed·sticky 등으로 요소의 배치 기준을 정하는 방식.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
포함 블록 Containing Block
백분율 크기와 위치 계산의 기준이 되는 사각 영역.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
쌓임 맥락 Stacking Context
z축 방향의 표시 순서를 독립적으로 계산하는 요소 집합.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
쌓임 순서 값 z-index
적용 가능한 배치 맥락 안에서 요소의 앞뒤 순서를 지정하는 속성.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
넘침 처리 Overflow
내용이 요소의 영역을 넘을 때 표시·숨김·스크롤 방식 등을 정하는 기능.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
종횡비 Aspect Ratio
가로와 세로 크기의 비율을 표현하거나 유지하는 제약.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
대체 콘텐츠 맞춤 Object Fit
이미지·비디오가 컨테이너에 맞도록 채움·잘림·비율 유지 방식을 정하는 속성.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
미디어 쿼리 Media Query
뷰포트·입력 방식·사용자 설정 등에 따라 스타일을 조건부 적용하는 규칙.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
컨테이너 쿼리 Container Query
상위 컨테이너의 크기나 지원되는 상태에 따라 스타일을 바꾸는 규칙.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
논리 속성 Logical Properties
left·right 대신 inline·block 축을 이용해 쓰기 방향에 대응하는 속성.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
뷰포트 단위 Viewport Units
vw·vh·svh·lvh·dvh 등 화면 기준 크기를 표현하는 단위 계열.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
상대 단위 Relative Units
em·rem·ch·% 등 다른 값이나 기준 크기에 상대적인 CSS 단위.
웹의 배치·크기·간격·표시 규칙을 명세하고 구현한다.
브라우저 지원은 속성별로 다르다. 실제 지원 환경에서 테스트하며 CSS 자체를 라이브러리로 분류하지 않는다.
CSS Fundamentals & Layout
Open an entry for its visual reference, comparisons and source-language text.
CSS 종속형 스타일 시트
The stylesheet language for describing presentation, layout, and visual styling of HTML, SVG, and related content.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Selector 선택자
An expression identifying the elements to which a style rule applies.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Cascade 캐스케이드
The rules deciding which CSS declarations apply based on origin, importance, layers, specificity, and order.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Specificity 명시도
A weighting system for determining precedence among competing selectors.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Inheritance 상속
The passing of some property values from a parent element to its children.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Box Model 박스 모델
A model calculating occupied space from content, padding, border, and margin.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
box-sizing 박스 크기 산정
A property determining whether width and height include only content or also padding and borders.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Normal Flow 일반 흐름
The default rules placing elements in document order without special positioning changes.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Block Formatting Context 블록 서식 문맥
A layout region that independently handles block layout and interactions with floats.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Flexbox 플렉스박스
A primarily one-dimensional layout model arranging items along main and cross axes.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
CSS Grid CSS 그리드
A two-dimensional layout model placing items within defined rows and columns.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Subgrid 서브그리드
A feature allowing a child grid to share its parent grid's track definitions.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Grid Track 그리드 트랙
The row or column space between two adjacent grid lines.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Grid Area 그리드 영역
A placement region consisting of one or more grid cells.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
gap 요소 간 간격
A property setting space between items in supported layouts such as grid and flexbox.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Intrinsic Sizing 내재적 크기
Determining size from the content's own characteristics rather than an explicit fixed value.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
min-content / max-content 최소·최대 콘텐츠 크기
Keywords describing minimum or maximum intrinsic content sizes under line-breaking constraints.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
clamp() 범위 제한 함수
A function constraining a flexible CSS value between a minimum, preferred value, and maximum.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
min() / max() 최소·최대 선택 함수
Functions choosing the smallest or largest of multiple calculated CSS values.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
calc() CSS 계산 함수
A function applying arithmetic to compatible numbers and units.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Positioning 위치 지정
Determining an element's placement basis using modes such as static, relative, absolute, fixed, or sticky.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Containing Block 포함 블록
The rectangular area used as a reference for percentage sizes and positioning calculations.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Stacking Context 쌓임 맥락
A group of elements whose z-axis stacking order is calculated as a unit.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
z-index 쌓임 순서 값
A property specifying front-to-back ordering within an applicable stacking context.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Overflow 넘침 처리
Behavior controlling how content extending beyond its box is displayed, hidden, or scrolled.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Aspect Ratio 종횡비
A constraint representing or maintaining the ratio between width and height.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Object Fit 대체 콘텐츠 맞춤
A property controlling how an image or video fills, fits, or crops within its container.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Media Query 미디어 쿼리
A rule applying styles conditionally based on viewport, input capabilities, user preferences, or related features.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Container Query 컨테이너 쿼리
A rule changing styles based on an ancestor container's size or supported state.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Logical Properties 논리 속성
Properties using inline and block axes rather than physical left and right to accommodate writing direction.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Viewport Units 뷰포트 단위
Units representing viewport-based dimensions, including vw, vh, svh, lvh, and dvh.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.
Relative Units 상대 단위
CSS units relative to another value or reference, such as em, rem, ch, and percentages.
Specifying and implementing web layout, sizing, spacing, and display rules.
Browser support varies by property. Test target environments, and do not classify CSS itself as a library.