mdn 학습 번역 - CSS

CSS 시작하기 (Getting started with CSS)

기본 CSS 선택자 (Basic CSS selectors)

속성 선택자 (Attribute selectors)

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

결합자(Combinators)

박스 모델(Box Model)

CSS 충돌 처리하기 (Handling conflicts)

CSS 값과 단위 (CSS values and units)

CSS에서 아이템 크기 조절하기 (Sizing items in CSS)

배경과 테두리 (Backgrounds and borders)

콘텐츠 넘침 (Overflowing content)

대체된 요소 (Replaced elements)

표 스타일링하기 (Styling tables)

CSS 디버깅하기 (Debugging CSS)

고급 스타일링 효과 (Advanced styling effects)

캐스케이드 레이어 (Cascade layers)

다양한 텍스트 방향 다루기 (Handling different text directions)

CSS 체계적으로 관리하기 (Organizing your CSS)

기본 텍스트 및 폰트 스타일링 (Fundamental text and font styling)

리스트 스타일링 (Styling lists)

링크 스타일링 (Styling links)

웹 폰트 (Web fonts)

CSS 레이아웃 소개 (Introduction to CSS layout)

플롯 (Floats)

포지셔닝 (Positioning)

플렉스박스 (Flexbox)

CSS 그리드 레이아웃 (CSS grid layout)

반응형 웹 디자인 (Responsive web design)

미디어 쿼리 기초 (Media query fundamentals)

다단 레이아웃 (Multiple-column layout)

실전 포지셔닝 예제 (Practical positioning examples)

과거의 레이아웃 방식들 (Legacy layout methods)

구형 브라우저 지원하기 (Supporting older browsers)

CSS 앵커 포지셔닝(Anchor positioning) 사용하기

오버플로우를 위한 폴백(대체) 옵션과 조건부 숨김 (Fallback options and conditional hiding for overflow)

Anchored container queries

애니메이션 가능한 CSS 속성들 (Animatable CSS properties)

CSS 애니메이션 사용하기 (Using CSS animations)

다중 배경 사용하기 (Using multiple backgrounds)

background-size로 배경 이미지 크기 조절하기 (Resizing background images with background-size)

SVG 배경 크기 조절하기 (Scaling SVG backgrounds)

CSS 박스 정렬(Box alignment) 개요

블록, 절대 위치, 테이블 레이아웃에서의 박스 정렬 (Box alignment for block, absolutely positioned, and table layouts)

플렉스박스에서의 박스 정렬 (Box alignment in flexbox)

Grid 레이아웃에서의 박스 정렬

다단 레이아웃에서의 박스 정렬 (Box alignment in multi-column layout)

CSS 박스 모델 입문 (Introduction to the CSS box model)

마진 병합 마스터하기 (Mastering margin collapsing)

종횡비 이해하고 설정하기 (Understanding and setting aspect ratios)

CSS 캐스케이드(Cascade) 입문 (Introduction to the CSS cascade)

상속 (Inheritance)

명시도 (Specificity)

CSS 속성값 처리 과정 (CSS property value processing)

단축 속성 (Shorthand properties)

CSS 사용자 지정 속성(변수) 사용하기 (Using CSS custom properties (variables))

CSS로 HTML 요소에 색상 적용하기 (Applying color to HTML elements using CSS)

CSS 색상 값 (CSS color values)

상대 색상 사용하기 (Using relative colors)

색상 현명하게 사용하기 (Using color wisely)

웹 접근성: 색상과 휘도 이해하기 (Web Accessibility: Understanding Colors and Luminance)

색상 대비

다단 레이아웃의 기본 개념 (Basic concepts of multi-column layouts)

단 스타일링하기 (Styling columns)

다단 레이아웃 사용하기 (Using multi-column layouts)

단 가로지르기와 균형 맞추기 (Spanning and balancing columns)

다단 레이아웃에서 넘침(overflow) 처리하기

다단 레이아웃에서 콘텐츠 끊김(단 나누기) 처리하기 (

기능 쿼리 사용하기 (Using feature queries)

컨테이너 스크롤 상태 쿼리 사용하기 (Using container scroll-state queries)

CSS 컨테이너 쿼리 (CSS container queries)

CSS 컨테인먼트 사용하기 (Using CSS containment)

컨테이너 크기 및 스타일 쿼리 사용하기

CSS 카운터 사용하기 (Using CSS counters)

좌표계 (Coordinate systems)

뷰포트 개념 (Viewport concepts)

뷰포트 개념 (Viewport concepts)

CSS 커스텀 함수 사용하기 (Using CSS custom functions)

일반 흐름(Normal Flow)에서의 블록(Block)과 인라인(Inline) 레이아웃 (Block and inline layout in normal flow)

CSS 플로우 레이아웃 (CSS flow layout)

흐름 레이아웃과 넘침 (Flow layout and overflow)

플로우 레이아웃과 쓰기 모드 (Flow layout and writing modes)

흐름 안(In flow)과 흐름 밖(Out of flow)

레이아웃과 컨테이닝 블록 (Layout and the containing block)

서식 컨텍스트 소개 (Introduction to formatting contexts)

블록 서식 문맥 (Block formatting context)

인라인 서식 컨텍스트 (Inline formatting context)

CSS display의 다중 키워드 구문 사용하기

시각적 서식 모델 (Visual formatting model)

환경 변수 사용하기 (Using environment variables)

필터 효과 사용하기 (Using filter effects)

플렉스박스의 기본 개념 (Basic concepts of flexbox)

Flexbox와 다른 레이아웃 방식들의 관계 (Relationship of flexbox to other layout methods)

플렉스 컨테이너 안에서 아이템 정렬하기 (Aligning items in a flex container)

플렉스 아이템 순서 지정하기 (Ordering flex items)

주축을 따라 플렉스 아이템의 비율 조절하기

플렉스 아이템 줄바꿈 마스터하기 (Mastering wrapping of flex items)

플렉스박스의 전형적인 사용 사례

오픈타입 폰트 기능 (OpenType font features)

가변 폰트 (Variable fonts)

WOFF (Web Open Font Format, 웹 오픈 폰트 포맷)

그리드 레이아웃의 기본 개념 (Basic concepts of grid layout)

Grid 레이아웃과 다른 레이아웃 방식들과의 관계

라인 기반 배치를 사용한 그리드 레이아웃

그리드 템플릿 영역 (Grid template areas)

이름이 지정된 그리드 라인을 사용한 레이아웃 (Layout using named grid lines)

그리드 레이아웃의 자동 배치 (Auto-placement in grid layout)

CSS 그리드 레이아웃에서 아이템 정렬하기

그리드, 논리적 값, 그리고 쓰기 모드

그리드 레이아웃과 접근성 (Grid layout and accessibility)

그리드를 활용한 흔한 레이아웃 구현하기 (Realizing common layouts using grids)

서브그리드 (Subgrid)

CSS 그라디언트 사용하기 (Using CSS gradients)

CSS `object-view-box` 속성 사용하기

대체 요소 스타일링 (Styling replaced elements)

CSS에서 이미지 스프라이트 구현하기 (Implementing image sprites in CSS)

일관된 목록 들여쓰기 (Consistent list indentation)

논리적 속성과 값의 기본 개념

플로팅과 포지셔닝을 위한 논리적 속성

마진, 테두리, 그리고 패딩을 위한 논리적 속성

크기 지정을 위한 논리적 속성

CSS 마스킹 입문 (Introduction to CSS masking)

CSS 클리핑 소개 (Introduction to CSS clipping)

여러 개의 마스크 선언하기

CSS 마스크 속성 (CSS mask properties)

미디어 쿼리 사용하기

미디어 쿼리 사용하기 미디어 쿼리(Media queries)를 사용하면 디바이스의 미디어 타입(예: 인쇄 vs. 화면)이나 화면 해상도나 방향, 종횡비(aspect ratio), 브라우저 뷰포트(viewport) 너비나 높이, 사용자 환경설정(예: 모션 감소, 데이터 사용량, 투명도 선호) 같은 특성이나 특징에 따라 CSS 스타일을 적용할 수 있어요. ...

접근성을 위한 미디어 쿼리 사용하기

자바스크립트로 미디어 쿼리 테스트하기

인쇄하기 (Printing)

CSS 중첩 at-규칙 (CSS nesting at-rules)

CSS 중첩과 명시도 (CSS nesting and specificity)

CSS 중첩 사용하기 (Using CSS nesting)

CSS 캐러셀 만들기 (Creating CSS carousels)

쌓임 문맥 (Stacking context)

플로팅 요소의 쌓임 (Stacking floating elements)

z-index 이해하기 (Understanding z-index)

z-index 사용하기 (Using z-index)

`z-index` 속성 없이 쌓기 (Stacking without the `z-index` property)

CSS Houdini (CSS 후디니)

CSS에서 사용자 지정 속성(Custom properties) 등록하기 (Registering custom properties in CSS)

스크롤 앵커링 개요 (Overview of scroll anchoring)

스크롤 기반 애니메이션 타임라인 (Scroll-driven animation timelines)

스크롤 스냅의 기본 개념 (Basic concepts of scroll snap)

스크롤 스냅 이벤트 사용하기 (Using scroll snap events)

CSS 선택자와 결합자 (CSS selectors and combinators)

CSS 선택자 구조 (CSS selector structure)

개인정보 보호와 `:visited` 선택자 (Privacy and the `:visited` selector)

선택자에서 :target 가상 클래스 사용하기

도형 개요 (Overview of shapes)

박스 값으로 도형 만들기 (Shapes from box values)

이미지로부터 도형 생성하기 (Shapes from images)

`shape-outside`를 사용한 기본 도형 (Basic shapes with shape-outside)

도형 생성기 (Shape generator)

도형 생성기 (Shape generator)

CSS 문법 소개: 선언, 규칙 집합, 그리고 구문 (Introduction to CSS syntax: declarations, rulesets, and statements)

주석 (Comments)

At-규칙 (At-rules)

CSS 에러 처리 (CSS error handling)

텍스트 줄바꿈 및 끊기 (Wrapping and breaking text)

공백 처리하기 (Handling whitespace)

텍스트 그림자 시작하기 (Introduction to text shadows)

CSS 변형 사용하기 (Using CSS transforms)

CSS 트랜지션 사용하기 (Using CSS transitions)

값 정의 구문 (Value definition syntax)

숫자형 데이터 타입 (Numeric data types)

텍스트 데이터 타입 (Textual data types)

CSS 수학 함수 사용하기 (Using CSS math functions)

CSS 타입 연산 사용하기 (Using CSS typed arithmetic)

쓰기 모드 시스템 소개 (Introduction to writing mode systems)

수직 폼 컨트롤 만들기 (Creating vertical form controls)

@scope

@charset

@container

@font-face

@font-feature-values

@font-palette-values

@import

@keyframes

@layer

@media

@namespace

@position-try

@property

@starting-style

@supports

:where()

Using CSS anchor positioning

fit-content

max-content

min-content