[CSS]CSS에서 사용되는 용어들

 

기본 용어

1. 속성 (Property)
   • 스타일링에 사용되는 구체적인 스타일 옵션입니다.
   • 예: color, font-size, margin, padding
2. 값 (Value)
   • 속성에 적용되는 실제 스타일 값입니다.
   • 예: red, 16px, 10px, auto
3. 선택자 (Selector)
   • 스타일을 적용할 HTML 요소를 선택하는 구문입니다.
   • 예: div, .class, #id, *

고급 선택자

1. 속성 선택자 (Attribute Selector)
   • 특정 속성을 가진 요소를 선택합니다.
   • 예: [type="text"], [href*="example"]
2. 가상 클래스 (Pseudo-class)
   • 요소의 특정 상태를 스타일링합니다.
   • 예: :hover, :focus, :nth-child(2)
3. 가상 요소 (Pseudo-element)
   • 요소의 특정 부분을 스타일링합니다.
   • 예: ::before, ::after, ::first-line

고급 개념

1. 상속 (Inheritance)
   • 일부 속성은 부모 요소에서 자식 요소로 상속됩니다.
   • 예: color, font-family
2. 우선순위 (Specificity)
   • 여러 스타일 규칙이 하나의 요소에 적용될 때의 우선순위를 결정합니다.
   • 계산 방식: 인라인 스타일 > ID 선택자 > 클래스/속성/가상 클래스 선택자 > 태그 선택자
3. 박스 모델 (Box Model)
   • 요소의 크기와 공간을 정의하는 개념으로, margin, border, padding, content로 구성됩니다.
   • 예: width, height, box-sizing

애니메이션 및 트랜지션

1. 트랜지션 (Transition)
   • 요소의 상태 변화 시 애니메이션을 부드럽게 적용합니다.
   • 예: transition: all 0.3s ease;
2. 애니메이션 (Animation)
   • 복잡한 애니메이션을 정의하고 적용합니다.
   • 예: @keyframes, animation: name duration timing-function;

레이아웃

1. 플렉스 박스 (Flexbox)
   • 일차원 레이아웃 모델로, 요소를 정렬하고 배치합니다.
   • 예: display: flex;, justify-content, align-items
2. 그리드 레이아웃 (Grid Layout)
   • 이차원 레이아웃 모델로, 요소를 행과 열로 정렬하고 배치합니다.
   • 예: display: grid;, grid-template-columns, grid-template-rows

미디어 쿼리 (Media Query)

1. 미디어 쿼리 (Media Query)
   • 다양한 화면 크기 및 디바이스에 맞게 스타일을 적용합니다.
   • 예: @media (max-width: 600px) { ... }

기타

1. CSS 변수 (Custom Properties)
   • 반복적으로 사용되는 값을 변수로 정의하여 사용합니다.
   • 예: --main-color: #333;, color: var(--main-color);