상속(Inheritance), 그룹(Grouping)

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

//html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <p>나는 p태그</p>
    
    <blockquote><span class="javascript">자바스크립트(영어: JavaScript)</span>는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. </blockquote>
    
    <p class="what-is-blockquote">blockquote는 인용문구에 쓰이는 태그이다.</p>
    
    <span>사실 인용문구라고 해서 꼭 blockquote 태그를 써야하는 것은 아니지만..</span>
  </body>
</html>
//css
body {
  color: red;
  font-size: 14px;
}

blockquote {
  color: black;
}

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

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

👨‍👩‍👧
body 태그에 color는 빨간색으로, 크기는 14px로 스타일했습니다.
p태그는 아무 스타일도 갖고 있지 않는데 부모인 body태그에 영향을 받아서 빨간색과 14px로 변경되었습니다.

blockquote 태그 또한 14px이 적용되었습니다.

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

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


p, span, .className {
color: green;
}

p, span 태그와 javascript 클래스에 폰트 크기가 20px이 되도록 css를 작성해주세요.

CSS selector

//html
<div class="pre">
  <span>이건 노란색 배경이고</span>
</div>
<div class="main">
  <span>이건 아님!</span>
</div>
<span class="pre">이것도 아님</span>
<div>
  <p class="pre">
    <span>이건 적용됩니다! 노란색배경!</span>
  </p>
</div>

//css
.pre span {
  background-color: yellow;
}
// 모든 span이 아니라 "pre" 클래스 내부에 있는 span이라는 뜻.
//html
<div class="a">
  <div>
    <header class="b">
      <h1 class="pre">
        <span>제목! 노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>

//css
.a div .b .pre span {
  background-color: yellow;
}
//span 태그에 적용되는 css입니다.
그런데 a클래스 밑에, div밑에, b클래스 밑에, pre클래스 밑에 span태그에 적용이 됩니다.

CSS 우선순위

tag: 1점
class: 10점
id: 100점
inline styling(요소로 직접): 1000점

style.css 파일의 18번 째 줄에 css하나가 있습니다.
.container header p.title {
font-size: 50px;
}
이 css가 적용되어 제목이 나올 수 있도록 html을 추가해주세요.

Vant+postcss-pxtorem 브라우저 적응 기능 구현
JavaScript WeakMap 사용 상세 정보

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage