상속, 그룹

younghyun·2022년 2월 2일
0
  • 상속
    말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미

    body {
      color: red;
      font-size: 14px;
    }

    body라는 태그에 color는 빨간색으로, 크기는 14px로 스타일함
    그런데 p태그는 아무 스타일도 갖고 있지 않는데, 부모인 body태그에 영향을 받아서 빨간색과 14px로 변경됨
    blockquote 태그 또한 14px이 적용.

    blockquote {
      color: black;
    }

    부모에게 color: red;라는 속성이 있더라도
    본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용

    .javascript {
      color: blue;
      font-weight: bold;
    }

    javascript 클래스의 부모(blockquote)는 color: black;를, 하나 더 위의 부모(body)는 color: red;속성을 가졌지만, 본인도 color 속성을 갖고 있으므로 파란색

  • 그룹 ( Group )
    이 태그에, 저 태그, 이 클래스에.. 같은 스타일을 적용하고 싶음. 그럴 때 각자의 selector에 모두 똑같은 스타일을 적기보다는, 다음과 같이 한꺼번에 스타일을 지정할 수 있음

    .what-is-blockquote, span {
      color: green;
    }
profile
선명한 기억보다 흐릿한 메모

0개의 댓글