CSS에서 스타일을 적용할 때는 속성과 그 값을 쌍으로 설정하여 원하는 디자인을 구현합니다.
CSS의 속성에서 사용되는 주요 값와 값에 사용하는 단위의 종류를 소개하고, 각 값과 단위가 어떤 상황에서 적합하게 사용되는지에 대해 설명합니다.
|
initial 키워드 값 해당 속성의 초깃값을 나타내는 값 |
initial은 해당 속성의 초깃값(기본값)을 나타내는 CSS의 키워드입니다. 이 키워드는 사용자 정의 스타일이나 다른 선택자에 의해 변경된 스타일을 무시하고, CSS 사양에 정의된 해당 속성의 초깃값으로 되돌리고 싶을 때 유용합니다. |
|---|---|
|
inherit 키워드 값 부모 요소의 계산된 속성 값 |
inherit은 부모 요소의 계산된 속성 값을 나타내는 CSS 키워드입니다. 이 키워드는 부모 요소에 적용된 스타일을 그대로 이어받아 사용하고 싶을 때 적용합니다. |
|
unset 키워드 값 해당 속성의 이전 선언값 해제 |
unset은 해당 속성이 부모로부터 자연스럽게 상속받는 경우 속성을 상속된 값(inherit)으로 재설정하고, 그렇지 않은 경우 초깃값(initial)으로 재설정하는 CSS 키워드입니다. |
|
currentcolor 키워드 값 현재 요소의 글자색을 나타내는 값 |
currentcolor는 현재 요소의 글자색(color 속성의 계산된 값)을 나타내는 CSS의 키워드입니다. 이 키워드는 다른 속성을 현재 요소의 글자색과 동일하게 하고 싶을 때 유용하게 사용할 수 있습니다. |
|
!important 키워드 사용법 스타일 적용 우선 순위의 우선권 부여하기 |
CSS 선택자의 속성과 값의 끝을 나타내는 세미꼴론(;) 앞에 !important 키워드를 추가하면 CSS 스타일 우선순위 규칙을 변경하여 일반적으로 선언한 속성의 값 보다 우선권이 부여되어 우선적으로 선택됩니다. |
|
글자 크기 상대 길이 단위 rem, em |
rem과 em 단위는 둘 다 font-size를 기준으로 그에 따른 크기나 길이를 지정하는 상대적 길이 단위입니다. rem과 em 단위에 대한 올바른 이해와 사용법에 대해 알아봅니다. |
|
뷰포트 백분율 길이 단위 vh, vw, vmax, vmin |
뷰포트(viewport)의 너비와 높이에 대한 백분율로 크기나 길이를 설정하는 vh, vw, vmax, vmin 단위에 대해 알아봅니다. 이 단위들은 화면의 크기에 따라 요소의 상대적인 크기나 길이를 쉽게 조정할 수 있도록 합니다. |
|
calc() 속성 값에 수식의 계산을 수행하는 함수 |
calc()는 CSS 속성 값을 지정할 때 값으로 사용할 수식의 계산(calculation)을 수행하는 함수입니다. 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 및 괄호 등을 사용하여 숫자나 숫자와 단위가 조합된 수식의 계산을 수행합니다. |