5. CSS selector(CSS 선택자)

1. Type h1 { }1.1 전체 선택자(universal)1.2 태그 선택자 2. Class .box { }3. Id #box { }4. 복합선택자 4.1 하위 선택자 4.2 자식 선택자 4.3 인접 형제 선택자 4.4 일반 형제 선택자 5. 속성 선택자 5.1 태그[속성이름]5.2 태그[속성이름="변수"]5.3 태그[속성이름~="변수"]5.4 태그[속성^="변수"]5.5 태그[속성$="변수"]5.6 태그[속성*="변수"]5.7 태그[속성|="변수"]6. 가상 클래스 선택자(Pseudo class selector)7. 가상 요소 선택자 8. 우선순위 8.1 우선 순위 계산 9. * 선택자와 body 선택자의 차이 (상속)10. CSS selector game

아래 내용을 통해 모두 실습해봅시다.

1. Type `h1 { }`

1.1 전체 선택자(universal)

전체 선택자를 통해서 모든 HTML 요소에 접근을 할 수 있습니다. 이를 통해 문서 전체에 공통적으로 기본값을 지정할 수 있습니다. 전체 선택자는 * 을 사용하여 나타냅니다.


* {
    margin: 0 auto;
}

1.2 태그 선택자

태그 선택자는 태그 이름 을 사용하여 나타냅니다. 해당 태그의 이름에 해당하는 모든 태그에 속성을 적용합니다.


p {
    color: red;
}


h1 {color: red;}


/* 선택자 */
body {
	background-color: red;
			/* 속성 */  /* 값 */
}

▲ body의 background-color를 red로 설정

* : 문서 내의 모든 엘리먼트를 선택.

body, header, h1, section 등 해당 이름을 가진 html 엘리먼트를 선택.

2. Class `.box { }`

class 속성은 또한 id 속성과 마찬가지로 해당 요소를 식별할 때 사용합니다. 그러나 id 속성은 한 페이지에 하나만 존재해야 하는 반면 class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있습니다. class 속성도 id 속성과 마찬가지로 css와 javascript에서 활용할 수 있으니 아주 중요한 속성 중 하나입니다. class도 id와 마찬가지로 이름을 지을 때 직관적이고 간단명료하게 적어주는 것이 중요합니다.


<head>
  <meta charset="utf-8">
  <title>id</title>
  <style type ="text/css">
    .blue  { color          : blue;      }
    .bic   { font-size      : 20px;      }
    .upper { text-transform : uppercase; }
  </style>
</head>
<body>
  <p>이 문단은 평범한 p태그를 사용하였습니다.</p>
  <p class="blue">이 문단은 blue class를 부여하였습니다.</p>
  <p class="blue bic">이 문단은 blue, bic class를 부여하였습니다.</p>
  <p class="blue upper">이 문단은 blue, bic class를 부여하였습니다. </p>
</body>

[실행화면]

.foo class 선택자 : <div class="foo">의 형태로, 중복이 가능. class로 자주 쓰는 스타일을 정의해두고 재사용.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    <style>
    .one{
        color: red;    
    }
    
    .two{
        font-size: 20px;
    }
    
    .three{
        color: green;
    }
    </style>
</head>
<body>
    <h1 class="one two">hello</h1>
    <h1 class="two">hello</h1>
    <h1 class="three">hello</h1>
    <!-- 
        1. 추가 공부할 선택자 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
        2. 추가 공부할 속성 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/Reference
    -->
</body>
</html>

클래스 선택자는 .클래스 이름 을 사용하여 나타냅니다. 태그 선택자와 마찬가지로 클래스가 클래스 이름과 같은 태그에 속성을 적용합니다.


.ClassName {
    width: 100px;
}

3. Id `#box { }`

id 속성은 페이지에 있는 해당 요소를 유일하게 식별할 때 씁니다. 주의 사항으로는 같은 페이지 안에 id는 단 한 개만 존재해야 합니다. 또 id 이름은 알파벳 또는 '_'으로 시작해야 합니다. id를 이용해 css와 javascript에서 활용할 수 있으니 중요한 속성 중 하나입니다. 개인 프로젝트일 경우는 상관없지만 여러 사람들과 같이 하는 프로젝트에서는 id이름을 최대한 직관적이고 간단명료하게 지어주는 것도 중요하답니다.

만약 단 한개만 존재하지 않고 여러개가 페이지 내 존재한다면 가장 최상단에 있는 id를 선택합니다. class와 많이 비교가 되는데, class보다 id가 우선순위가 더 높습니다.


<head>
  <meta charset="utf-8">
  <title>id</title>
  <style type ="text/css">
    #blue { color : blue;}
  </style>
</head>
<body>
  <p>이 문단은 평범한 p태그를 사용하였습니다.</p>
  <p id = "blue">이 문단은 blue id를 부여하였습니다.</p>
</body>

[실행화면]

#foo id 선택자 : <div id="foo">의 형태로, id는 중복이 불가능한 유일한 값.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    <style>
    #one{
        color: red;    
    }
    
    #two{
        color: blue;
    }
    
    #three{
        color: green;
    }
    </style>
</head>
<body>
    <a href="#one">one으로 가라</a>
    <a href="#two">two으로 가라</a>
    <a href="#three">three으로 가라</a>
    <h1 id="one">hello</h1>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h1 id="two">hello</h1>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <h1 id="three">hello</h1>
</body>
</html>

ID 선택자는 #아이디 이름 을 사용하여 나타냅니다. 위와 동일하게 id 가 id 이름과 같은 태그에 속성을 적용합니다.


#IdName {
    position: fixed;
}

4. 복합선택자


/* 선택자 */
header a {
	display: inline-block;
 /* 속성 */   /* 값 */
}

▲ header에 포함되어 있는 a의 display를 inline-block으로 설정

선택자를 여러 개 쓰는 경우를 복합 선택자라고 합니다. 복합 선택자에도 여러 가지 종류가 있어 이에 대해서 알아보겠습니다.

대표적으로는 아래와 같은 그룹 선택자가 있습니다.


h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
h4 {color: red;}
h5 {color: red;}
h6 {color: red;}

h1, h2, h3, h4, h5, h6 {color: red;}

4.1 하위 선택자

하위 선택자는 선택자 사이를 공백을 사용하여 나타냅니다. 앞 요소의 자손인 뒤 요소를 선택합니다.

이 태그는 section 아래 있는 모든 ul태그를 가리키기 때문에 바로 아래 자식을 선택할 때에는 자식선택자를 사용해주세요.


section ul {
    text-shadow: none;
}

4.2 자식 선택자

하위 선택자는 선택자 사이를 > 를 사용하여 나타냅니다. 앞 요소의 자식 인 뒤 요소를 선택합니다.


section > ul {
    text-shadow: none;
}

자손은 자식 을 포괄하는 의미입니다. 자손은 모든 하위 요소를 의미하고 자식은 바로 아래의 하위 요소에만 적용합니다.

.foo > p : class="foo"인 엘리먼트의 직계 자식 엘리먼트 중 p를 선택.

.foo > p 설명 예시 code


<section class="foo">
	<header>
		<h1>집에서 맛있는 피자 만들기</h1>
		<p>주위에서 쉽게 구할 수 있는 재료를 중심으로</p>
	</header>
	<p>AAAAA</p>
</section>

4.3 인접 형제 선택자

인접 형제 선택자는 선택자 사이를 + 를 사용하여 나타냅니다. + 를 기준으로 앞 요소 직후에 나오는 뒤 요소를 선택합니다.


h1 + ul {
    color: red;
}

<실습 html>


<h1>hello world</h1>
<ul>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>
<ul>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>

4.4 일반 형제 선택자

일반 형제 선택자는 선택자 사이에 ~ 를 사용하여 나타냅니다. ~ 을 기준으로 앞 요소 이후에 나오는 모든 뒤 요소를 선택합니다. 실습은 위와 같은 예제를 사용해주세요.


h1 ~ ul {
    color: red;
}

형제 선택자는 같은 부모를 가지는 요소들을 말합니다.

5. 속성 선택자


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    <style>
        /* 1. 태그[속성이름] */
        /* 속성명으로 선택했을 경우 */
        /* div 태그이면서 class 속성을 가지고 있는 요소 */
        div[class] {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        /* a 태그이면서 href 속성을 가지고 있는 요소 */
        a[href] {
            color: gray;
        }

        /* 2번부터 하나씩 주석을 해제해보며 실습해 보세요 :) */

        /* 2. 태그[속성이름="값"] */
        /* div 태그이면서 class명이 red인 요소*/
        /* 공백을 포함하지 않기 때문에 red 클래스 하나만 가진 요소가 선택됩니다. */
        /* div[class="red"] {
            background-color: red;
        } */

        /* 3. 태그[속성이름~="값"] */
        /* div 태그이면서 red인 class를 가지고 있는 요소 */
        /* 공백을 포함하기 때문에 red 클래스를 가진 요소는 div 태그는 모두 선택됩니다. */
        /* div[class~="red"] {
            background-color: red;
        } */

        /* 4. 태그[속성이름*="값"] */
        /* div 태그이면서 class 중 red 문자열을 포함하는 요소 */
        /* div[class*="red"] {
            background-color: red;
        } */

        /* 5. 태그[속성이름^="값"] */
        /* div 태그이면서 class 속성값이 sky로 시작하는 요소 */
        /* div[class^="sky"] {
            background-color: skyblue;
        } */
        /* a 태그이면서 href 속성값이 http로 시작하는 요소 */
        /* a[href^="https"] {
            color: red;
        } */

        /* 6. 태그[속성이름$="값"] */
        /* div 태그이면서 속성값이 pink로 끝나는 요소 */
        /* div[class$="pink"] {
            background-color: pink;
        } */
        /* a 태그이면서 href 속성값이 kr로 끝나는 요소 */
        /* a[href$="kr"] {
            color: black;
        } */

        /* 6. 태그[속성이름|="값"] */
        /* a 태그이면서 href 속성값이 http이거나 http로 시작하는 요소 */
        /* 
           언더바(_), 공백, 합성어가 포함될 경우 적용되지 않으며,
           독립된 값이거나 하이픈을 포함하는 값은 선택됩니다.
         */
        /* a[href|="http"] {
            color: red;
        } */
    </style>
</head>
<body>
    <!-- class 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
    <div>1</div>

    <div class="red">2</div>
    <div class="red pink">3</div>
    <div class="redpink skyblue pink">4</div>
    <div class="skyblue">5</div>

    <hr>

    <!-- href 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
    <a>바울랩</a>

    <a href="http://paullab.co.kr">바울랩1</a>
    <a href="http://paullab.com">바울랩2</a>
    <a href="https://paullab.com">바울랩3</a>
    <a href="http">바울랩4</a>
    <a href="http-paullab">바울랩5</a>
</body>
</html>

a[title] { } a[href="https://example.com"] { }


<a href="http://www.paullab.co.kr">이동햇!</a>

input[type="text"] : input 엘리먼트 중 type 속성의 값이 text인 엘리먼트를 선택.

태그의 이름, 클래스 이름, ID 이름 외에도 속성으로 접근할 수 있습니다. 이를 속성 선택자 라고 합니다.

5.1 태그[속성이름]

속성이름 에 해당되는 속성을 가진 태그를 모두 선택합니다.


a[href] {
	font-size: 10px;
}

5.2 태그[속성이름="변수"]

속성이름 의 속성값이 변수와 일치하는 태그를 선택합니다.


a[href="http://www.paullab.co.kr"] {
    font-size: 32px;
}

5.3 태그[속성이름~="변수"]

속성이름 의 속성값이 변수 를 포함하는 태그를 선택합니다. (단어)


a[href~="paullab"] {
    color: black;
}

5.4 태그[속성^="변수"]

속성 의 속성값이 변수 로 시작하는 태그를 선택합니다.


a[href^="http"] {
    color: black;
}

5.5 태그[속성$="변수"]

속성 의 속성값이 변수 로 끝나는 요소를 선택합니다.


a[href$="kr"]{
    color: black;
}

a[href$=".pdf"]{
    color: black;
}

5.6 **태그[속성*="변수"]**

속성 의 속성값이 변수 를 포함하는 태그를 선택합니다. (문자열)


a[href*="paul"] {
	  color: black;
}

태그[속성~="변수"] 와 태그[속성*="변수"] 의 차이는 무엇인가요?

~= 는 단어를 기준으로 *= 는 문자열을 기준으로 판단을 하게 됩니다. 예를 들어서 위와 같은 상황에서 paullabs 를 어떻게 인식할까요? ~= 은 단어를 기준으로 paullab 와 paullabs 를 다르다고 인식하고 선택을 못하게 되고 *= 은 문자열을 기준으로 paullabs 안에 paullab 가 포함되기 때문에 선택을 합니다.

5.7 태그[속성|="변수"]

속성 의 속성값이 변수 이거나 변수 로 시작하는 태그를 선택합니다.


a[href|="http"]{
    color: black;
}

6. 가상 클래스 선택자(Pseudo class selector)

뒤에가서 좀 더 자세하게 다뤄봅니다.

a:hover { } p:nth-child(1) 와 같이 실재로 html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자로 부릅니다.

elements - after, before, placeholder

classes - nth-child, active, focus, hover 등

.foot:first-child/.foo:last-child/.foo-nth-child(n) 설명 예시 code


<ul>
	<li class="foo">1</li>    <!-- .foo:first-child -->
	<li class="foo">2</li>    
	<li class="foo">3</li>    <!-- .foo:nth-child(3) -->
	<li class="foo">4</li>
	<li class="foo">5</li>    <!-- .foo:last-child -->
</ul>

.foo:first-child : class="foo"인 엘리먼트 중 첫번째 자식인 엘리먼트를 선택

.foo:last-child : class="foo"인 엘리먼트 중 마지막 자식인 엘리먼트를 선택

.foo:nth-child(n) class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 선택

.foo:nth-child(odd) class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 선택

.foo:nth-child(even) class="foo"인 엘리먼트 중 짝수 번째 자식인 엘리먼트를 선택

.foo:nth-child(3n+1) class="foo"인 엘리먼트 중 3n+1번째 자식인 엘리먼트를 선택


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      input:focus {
        color: red;
      }
      input:hover {
        color: green;
      }
      input:active {
        color: blue;
      }
    </style>
  </head>
  <body>
    <form action="./index.html" method="get">
      <label for="id">ID</label><input id="id" name="id" type="text" />
      <label for="pw">PW</label><input id="pw" name="pw" type="text" />
    </form>
  </body>
</html>


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      input:enabled {
        color: blue;
      }
    </style>
  </head>
  <body>
    <form action="./index.html" method="get">
      <label for="id">ID</label><input id="id" name="id" type="text" />
      <label for="pw">PW</label><input id="pw" name="pw" type="text" />
    </form>
  </body>
</html>


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      input:enabled + span {
        color: blue;
      }
      input:disabled + span {
        color: red;
      }
      label + input:checked + span {
        color: green;
      }
    </style>
  </head>
  <body>
    <form action="./index.html" method="get">
      <label for="이름">이름</label>
      <input id="이름" name="name" type="text" /><span>O</span><br />
      <label for="남">남</label>
      <input id="남" name="성별" type="radio" value="male" /><span>O</span><br />
      <label for="여">여</label>
      <input id="여" name="성별" type="radio" value="female" /><span>O</span><br />
      <label for="우주인">우주인</label>
      <input id="우주인" name="성별" type="radio" value="female" disabled/><span>O</span>
    </form>
  </body>
</html>

💡

부정 가상 선택자와 같은 비교적 최신에 채택된(레벨3) 선택자도 있습니다. 아래와 같이 사용할 수 있습니다. li:not(.클래스명){ color: red;}

:active - CSS: Cascading Style Sheets | MDN

active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다.

https://developer.mozilla.org/ko/docs/Web/CSS/:active

:enabled - CSS: Cascading Style Sheets | MDN

CSS :enabled 의사 클래스는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재합니다.

https://developer.mozilla.org/ko/docs/Web/CSS/:enabled

7. 가상 요소 선택자

가상 클래스 선택자와 가상 요소 선택자는 햇갈리는 부분이니 여기서 정확히 정리해가시는 것이 좋습니다.

가장 큰 차이는 아래와 같습니다.

가상 요소 선택자는 콜론이 2개(가상 클래스 선택자는 1개). 간혹 가상요소 선택자에 콜론이 1개만 보이는 경우가 있습니다. 이것은 레거시 브라우저 호환을 위한 선택입니다. (Internet Explorer 8이하)

가상 요소 선택자는 마크업 없는 요소를 삽입(가상 클래스 선택자는 클래스 없는 요소에 클래스 삽입)

가장 많이 사용하는 가상 요소 선택자가 after와 before입니다.


p::after {
    content: 'cm'
}

위에서 보시는 것처럼 after와 before가 콘텐츠의 앞 뒤에 존재한다고 해서 실제 레이아웃 상에도 그렇게 존재하는 것은 아닙니다.

8. 우선순위

아래 코드와 같이 id와 class가 동시에 있을 경우에는 id > class > tag 순으로 style 적용이 됩니다. 여기서 id와 class가 우선순위가 다름은 style에 정의된 순서와는 무방합니다!


<head>
<style>
	h1 {color: red}
	.yellowgreen {color: yellowgreen}
	#four {color: skyblue}
</style>
</head>
<body>
	<h1>h1의 첫번째</h1>
	<h1 id='two' class='yellowgreen'>h1의 두번째</h1>
	<h1 id='three' class='yellowgreen'>h1의 세번째</h1>
	<h1 id='four' class='yellowgreen'>h1의 네번째</h1>
</body>

h1의 두번째, 세번째, 네번째는 다 같은 class(yellowgreen)이었습니다. 여기서 마지막 h1에 id 속성을 style에서 변경해보았습니다. 다시 말해, h1의 네번째는 class의 style도, id의 style도 적용되었지만 우선순위에 따라 id의 속성인 skyblue색을 나타내게 되었습니다.

또한 동일한 속성을 여러 파일이나 class에서 다중으로 정의하고 있다면 가장 나중에 적용된 파일이나 class가 해당 속성을 덮어쓰게 됩니다. 아래와 같은 경우 one이라는 클래스가 one.css, two.css, three.css 모두 적용되어 있다고 하더라도 three.css가 적용됩니다.


<html>
<head>
  <link rel="stylesheet" href="/css/one.css">
  <link rel="stylesheet" href="/css/two.css">
  <link rel="stylesheet" href="/css/three.css">
</head>
<body>
  <h1 class="one">hello world</h1>
</body>
</html>

8.1 우선 순위 계산

선택자 우선순위는 구체적으로 숫자로서 계산이 가능합니다. 중요한 점은 자리올림이 되지 않습니다. 예를 들어 태그로 13개의 점수를 얻어도, 13점이 아닙니다. 따라서 클래스 하나보다 중요도가 낮습니다.

!important : 절대적인 우선순위. 무조건적인 우선 순위를 가집니다. 쉬운 방법이지만 우선 순위 계산을 어렵게 만들기 때문에 인라인 스타일을 덮어 써야하는 등의 불가피한 상황이 아니라면 사용하지 않는 것이 좋습니다. 나쁜 습관입니다.


<body>
	<button>버튼</button>
</body>


button {
  width:100px;
  height:30px;
}

button    { 
  background-color: lightblue !important; 
}
body button {
   background-color: green; 
}

inline-style : 요소의 안에 속성으로 선언되는 스타일입니다. 1000 점의 가중치를 가집니다.


<body>
  <button style="background-color:red">버튼</button>
</body>

id : id 선택자는 100점의 가중치를 가집니다.

class, 가상클래스 선택자 : class, 가상클래스 선택자는 10점의 가중치를 가집니다.

요소, 가상요소 선택자 : 요소, 가상요소 선택자는 1점의 가중치를 가집니다.

다양한 예제


h1 {
    color: blue; /* 0001 점 */
}

section h1 {
    color: red; /* 0002 점으로 선택 */
}


.sector {
    color: blue; /* 0010 점 */
}

section .sector {
    color: red; /* 0011 점으로 선택 */
}


#one {
    color: blue; /* 0100 점 */
}

section .sector #one {
    color: red; /* 0111 점으로 선택 */
}

아래 이미지는 가중치의 계산을 이미지로 잘 보여주고 있습니다. 1개의 ID 선택자를 사용하여 100점 +, 1개의 class 선택자를 사용하여 10점 +, 2개의 요소 선택자를 사용하여 2점 +. 총 112점의 가중치를 가집니다.

** 참고 링크 : https://specificity.keegan.st/ **

9. * 선택자와 body 선택자의 차이 (상속)

* 선택자와 body 선택자로 color 선택하는 예제입니다. 아래 예제를 통해 어떻게 다른지 확인해보세요.


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inherit</title>
    <style>
        /* color는 상속이 되기 때문에 모두 빨간색이 됩니다. */
        body {
            color: red;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <p>hello world</p>
    <section>
        <h2>hello world</h2>
        <article>
            <p>hello world</p>
        </article>
    </section>
</body>
</html>


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inherit</title>
    <style>
        /* 이건 상속이 아니라 모두 빨간색으로 변경시키는 코드이고요. */
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <p>hello world</p>
    <section>
        <h2>hello world</h2>
        <article>
            <p>hello world</p>
        </article>
    </section>
</body>
</html>


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inherit</title>
    <style>
        /* 4번을 보기 전에 어떤 의미일지 고민해보세요. */
        body {
            font-size: 10px;
        }
    </style>
</head>
<body>
    hello world
    <h1>hello world</h1>
    <p>hello world</p>
    <section>
        <h2>hello world</h2>
        <article>
            <p>hello world</p>
        </article>
    </section>
</body>
</html>


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inherit</title>
    <style>
        /* 눈에 보이지 않는 모든 태그들까지 10px */
        
        * {
            font-size: 10px;
        }
    </style>
</head>
<body>
    hello world
    <h1>hello world</h1>
    <p>hello world</p>
    <section>
        <h2>hello world</h2>
        <article>
            <p>hello world</p>
        </article>
    </section>
</body>
</html>


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>inherit</title>
    <style>
        /* 자기 자식, 자손 등에 모두 빨간색을 상속합니다. */
        body {
            color: red;
        }
        h1 {
            /* 상속되는 것으로부터 스스로를 지켜냅니다. */
            color: initial;
        }
    </style>
</head>
<body>
    hello world
    <h1>hello world</h1>
    <p>hello world</p>
    <section>
        <h2>hello world</h2>
        <article>
            <p>hello world</p>
        </article>
    </section>
</body>
</html>

10. CSS selector game

CSS Diner

You're about to learn CSS Selectors! Selectors are how you pick which element to apply styles to. Exhibit 1 - A CSS Rule p { margin-bottom: 12px; } Here, the "p" is the selector (selects all elements) and applies the margin-bottom style.

https://flukeout.github.io/