[CSS] pseudo, inheritance, direction, box model

pseudo-classes

element의 현재 상태에 따라 적용되는 css (e.g. hover, focus)

button:hover {
  color: blue;
}

pseudo-elements

해당 element의 sub element이면서, 우리가 명확히 만든적 없는 DOM element를 타겟하는 경우. (e.g. placeholder, before, after)

input::placeholder {
  color: green;
}

/* p element 안에, text가 시작되기 전 앞에 핑크색 대시를 추가 */
p::before {
  content: '-',
  color: pink;
}

selector - children, descendent의 차이

/* only children */
p > a {
  color: blue;
}

/* all descendent */
p a {
  color: blue;
}

children은 바로 밑의 자식만 의미한다. descendent는 children을 포함하여 nested children까지 포함하는 것이다.

user-agent stylesheet

모든 브라우저는 기본적으로 갖고 있는 스타일이 있다. 예를 들어 크롬은 a링크가 있으면 cursor: pointer; 등의 스타일을 자동으로 입혀준다. 이런 스타일을 user-agent stylesheet 이라고 한다. 이렇게 모든 브라우저가 각기 갖고 있는 user-agent stylesheet가 다르기 때문에 모든 브라우저에 똑같은 스타일을 렌더링하는 일은 어렵다.

상속

몇몇 스타일은 자동으로 상속이 되고, 몇몇 스타일은 그렇지 않다. 상속되는 대표적인 프로퍼티는 color이다.

p {
  color: blue;
}

<p>I am <strong>sleepy</strong></p>

p에만 컬러를 입혔지만 strong태그 내의 텍스트에도 적용된다. 이는 color가 상속되기 때문이다. 보통 타이포그라피와 관련된 color, text-shadow, font-size 등이 자동으로 상속된다. 반면 border와 같은 속성은 적용되지않는다. 얘는 적용하려면 아래처럼 해줘야 한다.

p, strong {
  border: 1px solid pink;
}

상속을 강제하고 싶은 경우도 있다. 예를 들어 a 태그의 스타일은 user-agent 스타일시트에 있기 때문에, 아래와 같은 경우 a 태그의 디폴트 스타일이 overwrite된다.

p {
  color: pink;
}

<p>I am <a>happy</a></p>

p 태그의 color 속성을 강제 상속하고 싶다면 inherit 속성을 주면 된다.

a {
  color: inherit;
}

방향

• css는 기본적으로 2가지 direction이 있다. x축은 inline direction, y축은 block direction이다.
• 아래는 크롬의 user-agent 스타일의 일부이다. margin-block-start라는 건 margin-top을 의미한다. 왜냐하면 블록은 y축으로 쌓이는 것을 의미하기 때문이다.

p {
  display: block;
  margin-block-start: 1em; /* margin top */
  margin-block-end: 1em; /* margin bottom */
  margin-inline-start: 0px; /* margin left */
  margin-inline-end: 0px; /* margin right */
}

margin top, bottom, left, right 대신에 저런 표현을 쓰는 이유는, 언어마다 방향이 다를 수 있기 때문이다. 영어는 왼쪽에서 오른쪽으로 읽는 언어이지만, 아랍어는 오른쪽에서 왼쪽으로 읽는다. 그 경우에는 margin-inline-start가 margin-right를 의미하게 된다. 이런 속성들을 logical properties 라고 한다. (MDN)

Box Model

박스모델을 두꺼운 겨울 옷을 입은 사람에 비유하자면 아래와 같다.

• content - 사람의 몸
• padding - 사람의 몸을 감싼 외투의 충전재
• border - 외투의 소재. 나름의 두께와 색깔을 가질 수 있다.
• margin - 그 사람의 퍼스널 스페이스

<style>
  section {
    width: 500px;
  }
  .box {
    width: 100%;
    padding: 20px;
    border: 4px solid;
  }
</style>
<section>
  <div class="box"></div>
</section>

위와 같은 코드에서는 box의 크기가 어떻게 될까? 정답은 548px x 48px 이다. width가 100%라는 것은 content에 적용되는 것이다. padding과 border는 그 위에 더해진다.

이런 동작은 직관적이지 않다. 다행히 css의 box-sizing이라는 프로퍼티로 사이즈 룰에 대한 설정을 바꿀 수 있다. 디폴트 값은 content-box 로 content만 측정하지만, border-box 로 설정하면 훨씬 직관적이다. border-box 로 설정하면 content, padding, border까지 포함하여 사이즈를 측정하기 때문에, 위의 코드에 적용하면 box가 500px로 맞춰진다.

글로벌 스타일에 적용하기 위해서는 아래처럼 설정하면 된다.

*, 
*::before,
*::after {
    box-sizing: border-box; 
}