기본 용어
- 속성 (Property)
- 스타일링에 사용되는 구체적인 스타일 옵션입니다.
- 예: color, font-size, margin, padding
- 값 (Value)
- 속성에 적용되는 실제 스타일 값입니다.
- 예: red, 16px, 10px, auto
- 선택자 (Selector)
- 스타일을 적용할 HTML 요소를 선택하는 구문입니다.
- 예: div, .class, #id, *
고급 선택자
- 속성 선택자 (Attribute Selector)
- 특정 속성을 가진 요소를 선택합니다.
- 예: [type="text"], [href*="example"]
- 가상 클래스 (Pseudo-class)
- 요소의 특정 상태를 스타일링합니다.
- 예: :hover, :focus, :nth-child(2)
- 가상 요소 (Pseudo-element)
- 요소의 특정 부분을 스타일링합니다.
- 예: ::before, ::after, ::first-line
고급 개념
- 상속 (Inheritance)
- 일부 속성은 부모 요소에서 자식 요소로 상속됩니다.
- 예: color, font-family
- 우선순위 (Specificity)
- 여러 스타일 규칙이 하나의 요소에 적용될 때의 우선순위를 결정합니다.
- 계산 방식: 인라인 스타일 > ID 선택자 > 클래스/속성/가상 클래스 선택자 > 태그 선택자
- 박스 모델 (Box Model)
- 요소의 크기와 공간을 정의하는 개념으로, margin, border, padding, content로 구성됩니다.
- 예: width, height, box-sizing
애니메이션 및 트랜지션
- 트랜지션 (Transition)
- 요소의 상태 변화 시 애니메이션을 부드럽게 적용합니다.
- 예: transition: all 0.3s ease;
- 애니메이션 (Animation)
- 복잡한 애니메이션을 정의하고 적용합니다.
- 예: @keyframes, animation: name duration timing-function;
레이아웃
- 플렉스 박스 (Flexbox)
- 일차원 레이아웃 모델로, 요소를 정렬하고 배치합니다.
- 예: display: flex;, justify-content, align-items
- 그리드 레이아웃 (Grid Layout)
- 이차원 레이아웃 모델로, 요소를 행과 열로 정렬하고 배치합니다.
- 예: display: grid;, grid-template-columns, grid-template-rows
미디어 쿼리 (Media Query)
- 미디어 쿼리 (Media Query)
- 다양한 화면 크기 및 디바이스에 맞게 스타일을 적용합니다.
- 예: @media (max-width: 600px) { ... }
기타
- CSS 변수 (Custom Properties)
- 반복적으로 사용되는 값을 변수로 정의하여 사용합니다.
- 예: --main-color: #333;, color: var(--main-color);
728x90
