css: universal selector vs body type selector

background color를 적용시키다가 다음과 같은 에러가 발생할 수 있다. 구분하기 편하게 디버깅 색을 빨간색으로 지정해서 빠르게 알아보자.

참고로 빨간색은 #ff0000 인데 #(빨간색)(초록색)(파란색)에서 빨간색에 16진수 중에 가장 큰 강도(255)에 해당하는 ff를 적용하면 된다.

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #f7f7f7;
}

그냥 순수하게 배경 색으로 적용시킬려고 했던 색이 위에서 보이는 검은색 상자처럼 모든 부분에 적용이 된다. 그렇다면 body type selector에 적용시켜 보면 어떻게 될까?

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
    background-color: #f7f7f7;
}

body에 값을 넣어줬더니 의도한대로 배경색만 빨간색으로 되었다.

Universal Selectors

* 는 css에서 Universal selectors라고 불린다. 이 universal selector는 모든 요소에 전부 적용되게끔 하는 selector이다. 따라서, 위에서 background color를 지정해주면, 모든 요소에 전부 다 적용되는 일이 발생하게 된 것이다.

body에 background color를 적용시켜 어떠한 배경 위에 다른 색을 배치하게끔 적용할 수 있게 된다. 이것은 background color는 상속이 되지 않기 때문이기도 하다.

상속(inheritance)

css에서는 상속의 개념이 존재한다. 말그대로 부모 속성을 자식 속성도 물려 받는다. 하지만 모든 것이 상속되어지진 않는다.

• 상속되는 속성: 텍스트 관련(color, font-size, font-family, 등등)
• 상속되지 않는 속성: 레이아웃 관련(margin, padding, background color)

그리고 input태그나 a태그는 html 스펙상 기본적으로 투명한 배경이 적용되어 있다. 따라서, 위의 화면처럼 form태그의 background가 흰색일 때 마치 상속이 된 것처럼 보이는 거 뿐이다.

margin, padding의 경우에도 생각해볼 것이 있다. 어떤 특정 태그들은 본인들만의 margin 혹은 padding을 갖고 있다. 태그들이 많아질 경우 layout을 관리하기 힘들어진다. 따라서, 모든 요소들에 기본적으로 marigin, padding을 0으로 적용시켜야 한다.