repl.it #9&10. CSS: 상속 , 그룹 , 셀렉터 결합과 우선순위

이지·2020년 9월 14일

HTML&CSS

목록 보기
6/8
post-thumbnail

상속(Inheritance)

상속은 css가 가진 특성입니다.
말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미입니다.

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

그룹(Group)

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

.what-is-blockquote, span {
  color: green;
}

Selector 결합

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}

class나 id가 selector일때 태그와 결합할 수 있습니다.
첫 번째는 p태그이면서 p-tag 클래스이다.
두 번째는 p태그이면서 third-line 아이디이다. 라는 뜻입니다.

Selector 우선순위


tag <<<<< class <<<< id <<<<<< inline css
profile
이지피지레몬스퀴지🍋

0개의 댓글