initial
initial
은
해당 속성의 초깃값(기본값)을 나타내는 CSS의 키워드입니다.
이 키워드는 사용자 정의 스타일이나 다른 선택자에 의해 변경된 스타일을 무시하고, 브라우저가 처음 해당 요소를 렌더링할 때 적용했던 값으로 되돌리고 싶을 때 유용합니다.
영어 단어 initial
은 "처음의" 또는 "초기의"라는 뜻을 가지고 있습니다.
CSS에서 initial
키워드는 속성을 CSS 사양에 정의된 초깃값으로 되돌린다는 의미로 사용됩니다.
예제
이 텍스트는 빨간색입니다. 이 텍스트는 초기 색상(일반적으로 검정색)입니다. 이 텍스트는 다시 빨간색입니다.
설명
주의할 점
initial
키워드 값을 사용할 때에는 다음의 두 가지를 주의해야 합니다.
단축 속성에서 사용 시
initial
키워드 값을 사용 할 때 margin
, border
, background
같은 단축 속성(shorthand property)에서는 전체 값을 initial
으로 지정할 수는 있으나, 단축 속성의 개별 값으로 지정할 수는 없습니다.
브라우저마다 설정된 초기값이 다를 수 있음
initial
키워드 값을 사용하면 명세서에서 정의한 초깃값을 대부분 사용하지만, 이 초기값은 브라우저마다 다를 수 있습니다. 이런 경우에는 예상치 못한 결과가 발생할 수 있습니다.
특히, font-family
속성의 경우에는 초깃값이 브라우저에 따라 달라집니다. 각 브라우저는 자신이 기본적으로 설정한 글꼴로 텍스트를 렌더링합니다.
브라우저 호환성
키워드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
initial
|
1 | 13 | 19 | 1.2 |
명세서
명세서 사양 | |
---|---|
initial
|
CSS Cascading and Inheritance Level 4 #initial |