1. 선택자

CSS PPT

01. 내부스타일시트

Info: 👁️‍🗨️ head 태그 사이에 style 태그로 작성하는 방식

1.00

“`html
우리를 기쁘게 하는 것들.
“`

“`text

내부스타일시트

우리를 기쁘게 하는 것들.

“`

02. 외부스타일시트

“`html
“`

Info: 👁️‍🗨️ head 태그 사이에 link 태그에 css 문서의 주소를 링크하는 방식

1.00

“`html
우리를 기쁘게 하는 것들.
“`

ex2-2.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>외부스타일시트</title>
    <link rel="stylesheet" href="./style1.css" />
  </head>
  <body>
    <p><span>우리를</span> 기쁘게 하는 것들.</p>
  </body>
</html>

style1.css

body {
  background-color: blue;
}
p {
  color: white;
  background-color: black;
}
span{color:red}

03. @import

교재98p

Info: 👁️‍🗨️ css 문서에 다른 css 문서를 넣는다

1.00

“`html
우리를 기쁘게 하는 것들.
box1
“`

ex2-3.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>@import</title>
    <style>
        @import url("style.css");
    </style>
  </head>
  <body>
    <p>우리를 기쁘게 하는 것들. </p>
    <div>box1</div>
  </body>
</html>

style.css

/* css의 문자세트 지정 */
@charset "UTF-8";
@import url("./style1.css");
body{background: red;}

style1.css

body {
  background-color: blue;
}
p {
  color: white;
  background-color: black;
}
div{background-color: aqua;}

04. 인라인

Info: 👁️‍🗨️ html 태그안에 작성

1.00

“`html
우리를 기쁘게 하는 것들.

menu1
menu2
menu3
menu4

</Accordion>

<Accordion title="💌 ex2-4-result.html">
```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>Document</title>
    <style>

    </style>
    <link rel="stylesheet" href="">
  </head>
  <body>
    <p style="color:red;">우리를 기쁘게 하는 것들.</p>
    <ul style="background-color: yellow;">
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </ul>
  </body>
</html>

04. 선택자 표 #MDN참고

Info: 👁️‍🗨️ Selector

1.00

05. 태그선택자

Info: 👁️‍🗨️ 태그의 이름을 선택한다

태그{ }

1.00

“`html
머리가 좋아지는 음식
“`

“`html

type,tag선택자

머리가 좋아지는 음식

“`

06. 아이디선택자

Info: 👁️‍🗨️ 태그에 아이디를 부여하고 선택

#아이디{ }

1.00

“`html
우리를 기쁘게 하는 것들

건강에 좋은 차

머리가 좋아지는 음식

</Accordion>

<Accordion title="💌 ex2-6.html">
```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>ID선택자</title>
    <style>
        p{color:red;}
        #health{color:blue;}
        #brain{color:green;}
    </style>
</head>
<body>
    <p>우리를 기쁘게 하는 것들</p>
    
    <p id="health">건강에 좋은 차</p>
    <p id="brain">머리가 좋아지는 음식</p>

</body>
</html>

07. 클래스선택자

Info: 👁️‍🗨️ 태그에 클래스를 부여하고 선택

.클래스{ }

1.00

“`html
우리를 기쁘게 하는 것들

건강에 좋은 차

머리가 좋아지는 음식

</Accordion>

<Accordion title="💌 ex2-7.html">
```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>CLASS선택자</title>
    <style>
        .happy{color:red; background: gray;}
        .health{color:blue;}
        .brain{color:green;}
        .t_center{text-align: center;}
        .t_color{color:yellow;}
        .bg_black{background-color: black;}
    </style>
</head>
<body>
    
    <p class="happy">우리를 기쁘게 하는 것들</p>
    <p class="health t_center bg_black">건강에 좋은 차</p>
    <p class="brain bg_black t_center">머리가 <span class="t_color">좋아지는</span> 음식</p>

</body>
</html>

08. 전체선택자

Info: 👁️‍🗨️ 모든 요소를 선택

*****{ }

1.00

“`html
입고신고쓰고끼는 것들..
옷
신발
안경
장갑
발이 편한 신발과 눈이 편한 안경은 필수이다.
“`

“`html

전체선택자

입고신고쓰고끼는 것들..

옷
신발
안경
장갑

<p>발이 편한 신발과 눈이 편한 안경은 필수이다.</p>

“`

09. 하위선택자

Info: 👁️‍🗨️ 자손 태그를 선택

요소 요소{ }

1.00

“`text
7월의 여행지

8월의 여행지

1주차 여행지

2주차 여행지

내년의 여행지

</Accordion>

<Accordion title="💌 ex2-9.html">
```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>하위선택자</title>
    <style>
        /* 하위의 모든 요소선택 */
        div p{color:blue;}
        li p{background: gray;}
    </style>
  </head>
  <body>
    <div class="abox">
      <p>7월의 여행지</p>
      <p>8월의 여행지</p>
      <ul>
        <li>
          <p>1주차 여행지</p>
        </li>
        <li>
          <p>2주차 여행지</p>
        </li>
      </ul>
    </div>
    <p>내년의 여행지</p>
  </body>
</html>

10. 자식선택자

Info: 👁️‍🗨️ 자식요소 선택

요소>요소{ }

1.00

“`html
7월의 여행지

8월의 여행지

1주차 여행지

2주차 여행지

내년의 여행지

</Accordion>

<Accordion title="💌 ex2-10.html">
```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>하위선택자</title>
    <style>
      /* 하위의 자식 요소선택 */
       
      div > * {
        color: blue;
      }
      li p {
        background: gray;
      }
    </style>
  </head>
  <body>
    <div class="abox">
      <p>7월의 여행지</p>
      <p>8월의 여행지</p>
      <ul>
        <li>
          <p>1주차 여행지</p>
        </li>
        <li>
          <p>2주차 여행지</p>
        </li>
      </ul>
    </div>
    <p>내년의 여행지</p>
  </body>
</html>

11. 인접선택자

Info: 👁️‍🗨️ 동위관계의 요소 하나만 선택

요소+요소{ }

1.00

“`html
엑스포 안내
책자를 배부하고 있습니다.

안내데스크를 활용하시기 바랍니다.

</Accordion>

<Accordion title="💌 ex2-11.html">
```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>인접선택자</title>
    <style>
      .title + p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="abox">
      <p class="title">7월의 여행지</p>
      <p>8월의 여행지</p>
      <p>9월의 여행지</p>
      <p>10월의 여행지</p>
      <p>11월의 여행지</p>
      <ul>
        <li>
          <p>1주차 여행지</p>
        </li>
        <li>
          <p>2주차 여행지</p>
        </li>
      </ul>
    </div>
    <p>내년의 여행지</p>
  </body>
</html>

12. 형제선택자

Info: 👁️‍🗨️ 모든 동위요소 선택

요소~****요소{ }

1.00

“`html
엑스포 안내
책자를 배부하고 있습니다.

안내데스크를 활용하시기 바랍니다.

주중에는 정오 이벤트가 있습니다

주말에는 자정 이벤트가 있습니다

9월에는 가을 이벤트가 시작됩니다

</Accordion>

<Accordion title="💌 ex2-12.html">
```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>형제선택자</title>
    <style>
      .title ~ p {
        color: red;
      }
      .abox ~ p {
        color: aqua;
      }
      ul p {
        color: purple;
      }
      li + li > p {
        color: white;
        background: black;
      }
    </style>
  </head>
  <body>
    <div class="abox">
      <p class="title">7월의 여행지</p>
      <p>8월의 여행지</p>
      <p>9월의 여행지</p>
      <p>10월의 여행지</p>
      <p>11월의 여행지</p>
      <ul>
        <li>
          <p>1주차 여행지</p>
        </li>
        <li>
          <p>2주차 여행지</p>
        </li>
      </ul>
    </div>
    <p>내년의 여행지</p>
    
  </body>
</html>

13. 그룹선택자

Info: 👁️‍🗨️ 여러 요소에 같은 속성적용

태그,선택자{ }

1.00

“`html
웹 표준 퍼블리싱
웹디자인의 한 분야로 원래 용어는 웹 콘텐츠 UI 디자인이다.

퍼블리싱에서 요구하는 것들

</Accordion>

***

### 형성퀴즈 1

#### 망고네-공유공용파일 본인이름의 폴더에 완성파일넣기

* 아래의 선택자를 모두 사용해서 만드세요

  * 전체선택자

  * 그룹선택자

  * 태그선택자

  * 아이디선택자

  * 클래스선택자

  * 하위선택자

  * 자식선택자

  * 형제선택자

  * 인접선택자

![1.00](https://aabbee.cafe24.com/wp-content/uploads/2026/06/19-8.png)

```html
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Document</title>
  </head>
  <body>
    <h1>건강한 하루</h1>
    <div id="container">
      <h2>건강해지는 차</h2>
      <p>
        머리와 피부에 좋은 차는 어떤 것들일까. <span>차의 종류</span>에 대해
        알아보도록 합니다
      </p>
      <ul>
        <li class="tea1">
          <h3>대나무차<span>15,000원</span></h3>
          <p>얼굴에 물을 주는 효과가 있다.</p>
        </li>
        <li class="tea2">
          <h3>감잎차<span>14,000원</span></h3>
          <p>빈혈있는 사람에게 효과가 있다.</p>
        </li>
        <li class="tea3">
          <h3>결명자차<span>20,000원</span></h3>
          <p>
            눈을 밝혀주는 효과가 있다. 보리차와 비슷하나 맛이 더 은은하고
            구수하다.
          </p>
        </li>
      </ul>
    </div>
  </body>
</html>

형성퀴즈 2

Info: 💡 이미지다운로드

![1.00](https://aabbee.cafe24.com/wp-content/uploads/2026/06/20-7.png)

Info: 👁️‍🗨️ ex1-18-2.html 을 아래와 같이 수정하시오

네임앵커 이용하기
Model1
Model2
Model3
오피스룩
페미닌룩
씨티룩
위로이동하기

1.00

14. 속성선택자

Info: 👁️‍🗨️ 속성을 선택해서 스타일 지정

태그[속성]{ }

속성	의미	예문
^ (캐럿)	시작	[속성^=”망고”]	속성의 값이 “망고”로 시작
$ (달러)	끝	[속성$=”망고”]	속성의 값이 “망고”로 끝남
* (애스터리스크)	포함	[속성*=”망고”]	속성의 값에 “망고”가 포함
= (이퀄)	일치	[속성=”망고”]	속성의 값이 “망고”와 일치

1.00

“`html

서울특별시

경기도

주소록을 작성합니다.

전화번호부를 작성합니다.

건강기록부를 작성합니다.

금전출납부를 작성합니다.

손익계산서를 작성합니다.

“`

😺 속성을 지정하기

1.00

“`html

속성선택자