initial

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

이 키워드는 사용자 정의 스타일이나 다른 선택자에 의해 변경된 스타일을 무시하고, CSS 사양에 정의된 해당 속성의 초깃값으로 되돌리고 싶을 때 유용합니다.

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

initial 키워드 값을 올바르게 이해하려면,
CSS 속성 값에 대한 '명세서 사양'과 '브라우저의 기본 스타일 시트'에 대한 차이점과 작동방식을 알아야 합니다.

명세서 사양 vs. 브라우저의 기본 스타일 시트

명세서 사양과 브라우저의 기본 스타일 시트(user agent stylesheet)는 서로 다른 개념이며, 이로 인해 혼동이 생길 수 있습니다. 각각의 역할과 차이점을 정리해보겠습니다.

명세서 사양(CSS Specification)

  • CSS 명세서는 CSS 속성의 동작 방식과 초깃값, 값의 범위 등을 정의합니다.
  • 예를 들어, font-weight 속성의 초깃값은 명세서에서 normal로 정해져 있습니다. 이는 스타일스트에서 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

브라우저의 기본 스타일 시트(User Agent Stylesheet)

  • 각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일 시트를 가지고 있습니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다.
  • 대부분의 브라우저는 <h1>~<h6>와 같은 제목 요소에 대해 일반적으로 더 돋보이도록 하는 기본 스타일을 적용합니다.
    예를 들어, font-weight 속성의 값을 명세서에서 지정한 초깃값인 normal이 아닌 bold로 설정되어 있습니다.

왜 두 개념이 다른가?

  • 명세서에서 정의된 초깃값은 CSS 속성의 값이 스타일스트에 명시되지 않았을 때 적용되는 값입니다. 그러나, 브라우저의 기본 스타일은 사용자에게 보다 읽기 쉽고 보기 좋은 웹 페이지를 제공하기 위해 설정됩니다.
  • 즉, 명세서의 초깃값은 규칙적이며 표준화된 것이지만, 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.
  • 따라서 명서세의 사양에 정의된 초깃값은 하나이지만, 각각의 브라우저마다 설정되어 있는 기본 스타일은 서로 다를 수 있습니다.

initial 키워드 값 예제

initial 키워드 값에 대해 예제로 살펴보겠습니다.

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 키워드 값을 사용 할 때 margin, border, background 같은 단축 속성(shorthand property)에서는 전체 값을 initial으로 지정할 수는 있으나, 단축 속성의 개별 값으로 지정할 수는 없습니다.

CSS 
div {
    margin: initial 0; /* 오류 발생 */
}
article {
    border: 3px solid initial; /* 오류 발생 */
}
CSS 
div {
    margin: initial; /* 단축 속성의 전체 값에는 사용할 수 있음 */
}
article {
    border-width: 3px;
    border-style: solid;
    border-color: initial;
}

브라우저마다 초깃값이 다른 속성이 있음

명세서에서 정의한 초깃값 중에는 '브라우저에 맡긴다(depends on user agent)'라는 값이 있습니다. 말 그대로 브라우저가 초깃값을 지정하는 것입니다. 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

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

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

참고문헌

같이 보기