width, height의 기본값, Cascading과 specificity

binary·2022년 10월 23일

엄밀하게 따져보는 CSS 지식

목록 보기

1/1

width와 height

만약 content 없이 <div> 요소를 생성한다면 어떤 일이 일어날까?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>02 Box-Model</title>
    <style>
      div {
  		background-color: black;
	  }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

검은 색의 block이 보일 것이라 예상했지만, 보이지 않는다.

width 와 height 를 명시적으로 지정하지 않으면 초기 값 (initial value) 이 설정된다.

그 이유는 바로 width 와 height 의 초기 값 (initial value) 이 auto 이기 때문이다.

width: auto;

먼저 width 프로퍼티에서의 auto 라는 값을 생각해보자.

MDN 에서는 width 프로퍼티의 값으로 auto 를 주게 되면, 요소의 너비를 브라우저가 계산해 지정한다고 말한다.

🤔 그러면 브라우저는 어떤 기준으로 계산하여 width 를 지정하는 걸까?

❗️ 바로, 부모 요소가 제공해주는 컨텐츠 영역을 기준으로 계산하게 된다.

➕ 여기서 부모 요소가 제공해주는 컨텐츠 영역을 Containing Block 이라고 한다.
(그런데 Containing Block 이 항상 부모 요소를 가리키진 않는다!)

height: auto;

height 프로퍼티에서의 auto 라는 값은 어떤 의미일까?

MDN 에서는 height 프로퍼티의 값으로 auto 를 주게 되면, 브라우저가 요소의 높이를 계산한다 고 한다.

🤔 그러면 브라우저는 어떤 기준으로 계산하여 height 를 지정하는 걸까?

❗️ 바로, content 내용의 높이만큼을 기준으로 계산한다.

정리

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>02 Box-Model</title>
    <style>
	.container {
		border: 1px solid black;
		width: 300px;
	}

	.item {
  		background-color: skyblue;
	}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">hi</div>
    </div>
  </body>
</html>

class 이름이 'item' 인 요소에 width 값을 지정해주지 않는다면, 기본 값(initial value) 이 auto 가 width 의 값이 될 것이다.

그러면, width 의 값이 auto 이기 때문에 'item'은 그의 부모인 'container'가 제공해주는 크기인 "300px" 만큼 차지하도록 width 가 자동으로 계산될 것이다.

마찬가지로 'item' 요소의 height 값을 지정해주지 않았으니, 기본값이 auto 가 될 것이다.
height 가 auto 이기 때문에 content 내용의 높이만큼 height 가 자동으로 계산될 것이다.

결과 화면

width: 100%;

width: 100% 를 언제 활용할까?

일반적으로 부모 요소의 width 만큼 자식 요소 width 가 채워지길 바랄 때 사용한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>02 Box-Model</title>
    <style>
      .container {
        border: 1px solid black;
        width: 300px;
      }

      .item {
        background-color: skyblue;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">hi</div>
    </div>
  </body>
</html>

방금의 코드에서 'item' 요소의 width 프로퍼티 값을 "100%" 로 지정해주었다.

결과는 width: auto 일 때와 똑같다.

🤔 흠 그러면, width: 100% 와 width: auto 는 같은 거 아닌가?

'item' 요소에 margin-left: 20px 라는 값을 추가하면 그 차이를 알게 될 것이다.

`width: 100%` 일때

🤨 'item' 요소가 삐져나와요 !

`width: auto` 일때

😃 편안

두 예시에서 볼 수 있듯이 width: auto 는 브라우저가 유연하게 자동으로 padding, margin, border 까지 고려하여 차지하게 될 width 를 계산해준다.

하지만, width: 100% 는 정말 단순하게 width 값만 계산해준다.

3줄 요약

프로퍼티의 값을 지정하지 않으면 초기 값 (initial value ) 이 존재한다.
width 와 height 의 초기 값 (initial value ) 은 auto 이며 width 와 height 의 auto 는 다르게 계산된다.
width: 100% 는 width의 초기 값 (initial value ) 이 아니다.

Cascading

요소에 적용된 많은 스타일들을 어떻게 브라우저에 표현할 지 결정해주는 원리이다.

먼저, 브라우저의 기본 스타일(user agent stylesheet) 이 적용된 후 내가 작성한 스타일이 적용된다. 만약 하나의 요소에 여러가지의 스타일이 적용되었을 경우에 요소와 관련된 선택자가 구체적이면 구체적일 수록 우선 순위가 높아지게 된다. 또는 더 아래에 위치할 수록 더 우선순위가 높다. specificity 점수가 높을수록 우선 순위가 높다로 정리할 수 있다.

specificity

유니버설 셀렉터(*), 셀렉터와 셀렉터 사이에 있는 콤비네이터들은 specificity에 영향을 끼치지 않는다.
셀렉터에 클래스 개수가 많으면 많을수록 specificity의 점수가 높다.

이때 생긴 궁금증!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>02 Box-Model</title>
    <style>
      div:first-child {
        color: black;
      }

      .item:first-child {
        color: red;
      }

      .item {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="item">hi</div>
  </body>
</html>