initial

initial은
해당 속성의 초깃값(기본값)을 나타내는 CSS의 키워드입니다.

이 키워드는 사용자 정의 스타일이나 다른 선택자에 의해 변경된 스타일을 무시하고, 브라우저가 처음 해당 요소를 렌더링할 때 적용했던 값으로 되돌리고 싶을 때 유용합니다.

영어 단어 initial은 "처음의" 또는 "초기의"라는 뜻을 가지고 있습니다.
CSS에서 initial 키워드는 속성을 CSS 사양에 정의된 초깃값으로 되돌린다는 의미로 사용됩니다.

예제

HTML 
<p>
    <span>이 텍스트는 빨간색입니다.</span>
    <em>이 텍스트는 초기 색상(일반적으로 검정색)입니다.</em>
    <span>이 텍스트는 다시 빨간색입니다.</span>
</p>
CSS 
p {
  color: red;
}
em {
  color: initial;
}
실제 적용된 모습

설명

이 예제에서 <p> 요소에 color: red; 스타일이 적용되어 있어 <p> 요소의 모든 텍스트가 빨간색으로 설정됩니다. 하지만 <em> 요소에 color: initial;이 적용되어 초기 색상으로 돌아가므로, 일반적으로 <em> 요소의 텍스트는 기본 검정색으로 표시됩니다.

주의할 점

initial 키워드 값을 사용할 때에는 다음의 두 가지를 주의해야 합니다.

단축 속성에는 사용할 수 없음

initial 키워드 값은 개별 속성에만 사용할 수 있습니다.

border, background 같은 단축 속성(shorthand property)에서 적용되지 않습니다. 예를 들어 border의 경우 각 개별 속성(border-width, border-color, border-style)에 사용해야 합니다.

CSS 
div {
    border: initial; /* 오류 발생 */
}
article {
    border: 3px solid initial; /* 오류 발생 */
}
CSS 
div {
    border-width: initial;
    border-style: dashed;
    border-color: initial;
}
article {
    border-width: 3px;
    border-style: solid;
    border-color: initial;
}

브라우저마다 설정된 초기값이 다를 수 있음

initial 키워드 값을 사용하면 명세서에서 정의한 초깃값을 대부분 사용하지만, 이 초기값은 브라우저마다 다를 수 있습니다. 이런 경우에는 예상치 못한 결과가 발생할 수 있습니다.

특히, font-family 속성의 경우에는 초깃값이 브라우저에 따라 달라집니다. 각 브라우저는 자신이 기본적으로 설정한 글꼴로 텍스트를 렌더링합니다.

HTML 
<p>이 텍스트는 기본 글꼴입니다.</p>
CSS 
p {
  font-family: initial; /* 브라우저마다 초깃값이 다를 수 있음 */
}

브라우저 호환성

initial 키워드의 브라우저 호환성
키워드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
initial 1 13 19 1.2

명세서

initial 키워드의 명세서 사양
명세서 사양
initial CSS Cascading and Inheritance Level 4
#initial

참고문헌

같이 보기