CSS에서 스타일을 적용할 때는 속성과 그 값을 쌍으로 설정하여 원하는 디자인을 구현합니다.
CSS의 속성에서 사용되는 주요 값와 값에 사용하는 단위의 종류를 소개하고, 각 값과 단위가 어떤 상황에서 적합하게 사용되는지에 대해 설명합니다.
|
initial 키워드 해당 속성의 초깃값을 나타내는 값 |
initial은 해당 속성의 초깃값(기본값)을 나타내는 CSS의 키워드입니다. 이 키워드는 사용자 정의 스타일이나 다른 선택자에 의해 변경된 스타일을 무시하고, CSS 사양에 정의된 해당 속성의 초깃값으로 되돌리고 싶을 때 유용합니다. |
|---|---|
|
inherit 키워드 부모 요소의 계산된 속성 값 |
inherit은 부모 요소의 계산된 속성 값을 나타내는 CSS 키워드입니다. 이 키워드는 부모 요소에 적용된 스타일을 그대로 이어받아 사용하고 싶을 때 적용합니다. |
|
unset 키워드 해당 속성의 이전 선언값 해제 값 |
unset은 해당 속성이 부모로부터 자연스럽게 상속받는 경우 속성을 상속된 값(inherit)으로 재설정하고, 그렇지 않은 경우 초깃값(initial)으로 재설정하는 CSS 키워드입니다. |
|
currentcolor 키워드 현재 요소의 글자색을 나타내는 값 |
currentcolor는 현재 요소의 글자색(color 속성의 계산된 값)을 나타내는 CSS의 키워드입니다. 이 키워드는 다른 속성을 현재 요소의 글자색과 동일하게 하고 싶을 때 유용하게 사용할 수 있습니다. |
|
min-content 키워드 콘텐츠가 차지할 수 있는 최소 크기 값 |
min-content는 콘텐츠가 차지할 수 있는 최소 크기 값을 나타내는 CSS 키워드입니다. 이 값은 명목상, 콘텐츠가 차지하는 크기로 인한 오버플로를 방지하려는 목적의 최소 크기입니다. |
|
max-content 키워드 콘텐츠가 차지할 수 있는 최대한 이상적인 크기 값 |
max-content는 오버플로가 발생하더라도 콘텐츠가 차지할 수 있는 최대한 이상적인 크기 값을 나타내는 CSS 키워드입니다. |
|
fit-content min-content와 max-content 사이의 적합한 값 |
fit-content는 레이아웃 제약(예: 오버플로 발생)을 고려하여 min-content와 max-content 사이의 적합한 크기 값을 나타내는 CSS 키워드입니다. |
|
!important 키워드 스타일 적용 우선 순위의 우선권 부여하기 |
CSS 선택자의 속성과 값의 끝을 나타내는 세미꼴론(;) 앞에 !important 키워드를 추가하면 CSS 스타일 우선순위 규칙을 변경하여 일반적으로 선언한 속성의 값 보다 우선권이 부여되어 우선적으로 선택됩니다. |
|
px 절대 길이의 표준 단위 |
CSS에서 px(pixels, 픽셀)은 절대 길이의 표준 단위(canonical unit)입니다. px은 물리적인 길이가 아니라 시각적(visual angle) 크기를 기준으로 하는 '참조 픽셀'의 개념을 사용하는 길이 단위입니다. |
|
rem, em 글자 크기 상대 길이 단위 |
rem과 em 단위는 둘 다 font-size를 기준으로 그에 따른 크기나 길이를 지정하는 상대적 길이 단위입니다. rem과 em 단위에 대한 올바른 이해와 사용법에 대해 알아봅니다. |
|
vh, vw, vmax, vmin 뷰포트 백분율 상대 길이 단위 |
뷰포트(viewport)의 너비와 높이에 대한 백분율로 크기나 길이를 설정하는 vh, vw, vmax, vmin 단위에 대해 알아봅니다. 이 단위들은 화면의 크기에 따라 요소의 상대적인 크기나 길이를 쉽게 조정할 수 있도록 합니다. |
|
calc() 괄호 안의 수식을 계산해서 값으로 나타내는 함수 |
calc()는 CSS 속성 값을 지정할 때 사용하며, 괄호 안의 숫자나 숫자와 단위가 조합된 수식을 계산해서 값으로 나타내는 함수형 표기법입니다. |
|
min() 괄호 안의 목록 중에서 가장 작은 값을 나타내는 함수 |
min()은 CSS 속성의 값을 지정할 때 사용하며, 괄호 안의 하나 이상의 쉼표로 구분된 값들을 비교해서 그중 가장 작은 하나의 값만을 나타내는 비교 함수형 표기법입니다. |