1 선택자

Chap1. 기본문법과 선택자

요소선택 단축키: ctrl+shift+c
1. CSS 개요

css.pdf
2. 주요 선택자 요약

MDN레퍼런스 css선택자.pdf
3. CSS 기본문법과 적용하기

3.1. 내부스타일시트 (Internal)

head 태그 사이에 style 태그로 작성하는 방식
3.1.1. ex

실행화면
Step 1
Step 2
우리를 기쁘게 하는 것들.
<!DOCTYPE html>

3.2. 외부스타일시트 (external)

head 태그 사이에 link 태그에 css 문서의 주소를 링크하는 방식

3.2.1. ex
실행화면
Step 1
Step 2
우리를 기쁘게 하는 것들.
<!DOCTYPE html>

3.3. 인라인 (inline)

html 태그안에 작성

실행화면
3.3.1. ex
Step 1
Step 2
우리를 기쁘게 하는 것들.
<!DOCTYPE html>

3.4. @import

css 문서에 다른 css 문서를 넣는 방식

실행화면
3.4.1. ex
Step 1
Step 2
우리를 기쁘게 하는 것들.
<!DOCTYPE html>

4. 선택자
4.1. 태그선택자
태그


ex2-5.html
머리가 좋아지는 음식



ex2-5.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>type,tag선택자</title>
    <style>
        body{background: red;}
        p{color:aliceblue;}
    </style>
</head>
<body>
    <p>머리가 좋아지는 음식</p>
</body>
</html>




4.2. 아이디선택자
#아이디


ex2-6.html
우리를 기쁘게 하는 것들

건강에 좋은 차

머리가 좋아지는 음식



ex2-6.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>




4.3. 클래스선택자
.클래스


ex2-7.html
우리를 기쁘게 하는 것들

건강에 좋은 차

머리가 좋아지는 음식



ex2-7.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>




4.4. 전체선택자
*****


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



ex2-8.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>
        /* 웹브라우저가 갖고있는 기본스타일 속성을 초기화 할때 주로 사용 */
      * {
        margin: 0px;
        padding: 0px;
        color: #0000ff;
      }
    </style>
  </head>
  <body>
    <h2>입고신고쓰고끼는 것들..</h2>
    <ul>
      <li>옷</li>
      <li>신발</li>
      <li>안경</li>
      <li>장갑</li>
    </ul>

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




4.5. 하위선택자
요소 요소


ex2-9.html
7월의 여행지

8월의 여행지

1주차 여행지

2주차 여행지

내년의 여행지



ex2-9.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>




4.6. 자식선택자
요소>요소


ex2-10.html
7월의 여행지

8월의 여행지

1주차 여행지

2주차 여행지

내년의 여행지



ex2-10.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>




4.7. 인접선택자
요소+요소


ex2-11.html
엑스포 안내
책자를 배부하고 있습니다.

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



ex2-11.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>




4.8. 형제선택자
요소~요소


ex2-12.html
엑스포 안내
책자를 배부하고 있습니다.

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

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

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

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



ex2-12.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>




4.9. 그룹선택자
태그,선택자


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

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




4.10. 형성퀴즈 1
4.10.1. 망고네-공유\공용파일 본인이름의 폴더에 완성파일넣기

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

전체선택자
그룹선택자
태그선택자
아이디선택자
클래스선택자
하위선택자
자식선택자
형제선택자
인접선택자



<!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>
          <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>

4.11. 형성퀴즈 2

css


4.12. 속성선택자


ex2-14-복습용.html
<h3 class="logo">서울특별시</h3>
<h3>경기도</h3>
<p class="address">주소록을 작성합니다.</p>
<p class="phone">전화번호부를 작성합니다.</p>
<p class="health">건강기록부를 작성합니다.</p>
<p class="I am U">금전출납부를 작성합니다.</p>
<p class="profit-1">손익계산서를 작성합니다.</p>



ex2-14-1.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>

</head>
<body>
    <h1>속성 선택자 사용하기</h1>
    <hr>
    <h2>조리학부 자격증</h2>
    <ul>
        <li><a href="http://www.q-net.or.kr">복어조리기능사</a></li>
        <li><a href="http://www.q-net.or.kr" target="_blank">양식조리기능사</a></li>
        <li><a href="http://www.q-net.or.kr" target="_blank">일식조리기능사</a></li>
        <li><a href="http://www.q-net.or.kr">제과기능장</a></li>
        <li><a href="http://www.q-net.or.kr" target="_blank">제과기능사</a></li>
        <li><a href="http://www.q-net.or.kr" target="_blank">제빵기능사</a></li>
        <li><a href="http://www.q-net.or.kr">조리기능장</a></li>
        <li><a href="http://www.q-net.or.kr">조리산업기사(복어조리)</a></li>
        <li><a href="http://www.q-net.or.kr" target="_blank" title="조리산업기사(양식)">조리산업기사(양식)</a></li>
        <li><a href="http://www.q-net.or.kr" target="_blank" title="조리산업기사(일식)">조리산업기사(일식)</a></li>
        <li><a href="http://www.q-net.or.kr" target="_blank" title="조리산업기사(중식)">조리산업기사(중식)</a></li>
        <li><a href="http://www.q-net.or.kr" target="_blank" title="조리산업기사(한식)">조리산업기사(한식)</a></li>
        <li><a href="http://www.q-net.or.kr">조주기능사</a></li>
        <li><a href="http://www.q-net.or.kr" title="중식조리기능사">중식조리기능사</a></li>
        <li><a href="http://www.q-net.or.kr" title="한식조리기능사">한식조리기능사</a></li>
    </ul>
</body>
</html>



ex2-14-2.html
html
<ul>
    <li><a href="http://www.q-net.or.kr" title="복어조리기능사">복어조리기능사</a></li>
    <li><a href="http://www.q-net.or.kr" title="조리기능사">조리기능사</a></li>
    <li><a href="http://www.q-net.or.kr" title="일식조리기능사">일식조리기능사</a></li>
    <li><a href="http://www.q-net.or.kr" title="제과기능장">제과기능장</a></li>
    <li><a href="http://www.q-net.or.kr" title="제과기능사">제과기능사</a></li>
    <li><a href="http://www.q-net.or.kr" title="제빵기능사">제빵기능사</a></li>
    <li><a href="http://www.q-net.or.kr" title="조리기능장">조리기능장</a></li>
    <li><a href="http://www.q-net.or.kr" title="조리산업기사(복어조리)">조리산업기사(복어조리)</a></li>
    <li><a href="http://www.q-net.or.kr" title="조리산업기사(양식)">조리산업기사(양식)</a></li>
    <li><a href="http://www.q-net.or.kr" title="조리산업기사(일식)">조리산업기사(일식)</a></li>
    <li><a href="http://www.q-net.or.kr" title="조리산업기사(중식)">조리산업기사(중식)</a></li>
    <li><a href="http.q-net.or.kr" title="조리산업기사(한식)">조리산업기사(한식)</a></li>
    <li><a href="http.q-net.or.kr" title="조주기능사">조주기능사</a></li>
    <li><a href="http.q-net.or.kr" title="중식조리기능사">중식조리기능사</a></li>
    <li><a href="http.q-net.or.kr" title="한식조리기능사">한식조리기능사</a></li>
  </ul>

css
a[title="조주기능사"]{
            background: #ff9;
            background: #ffff99;
            font-weight: bold;
        }
        a[title^="제과"]{
            background: #48483b;
            color:#ffff99
        }
        a[title$="기능장"]{
            background:#00b627;
            color:#ffffff;
            font-size:24px;
        }
        a[title$="기능사"]{
            background:#2400b6;
            color:#dbfb0b;
            font-size:24px;
            font-weight: bold;
        }
        a[title*="조리"]{
            color:#ff0000;
            text-decoration:none;
            background-color: #dff112;
        }
        a[title^="복"]{
            color:#000000;
            font-size: 36px;
            background-color: #6aff65;
        }




4.13. 가상선택자
둘이상 사용시 순서중요

:link
:visted
:hover
:active



ex2-15.html
COMPANY
PRODUCT
SERVICE
CUSTOMER
COMMUNITY



ex2-15-1.html
동적 관련 가상 클래스 선택자
로그인

아이디

비밀번호
login



탭인덱스

4.14. 가상요소선택자


ex2-16.html
COMPANY
PRODUCT
SERVICE
COMMUNITY




4.15. 16-1. :nth-of-type

















:nth-child(n) :nth-of-type(n)
부모의 모든 자식요소 중 n번째 부모의 자식 중 특정요소의 n번째



ex2-16-1.html
1. p태그1

2. span태그1
3. p태그2

4. span태그2
5. p태그3




4.16. 우선순위
PPT 참조


ex2-17.html
한국인은 비타민 D가 부족한 사람이 많다.

비타민D는 햇빛에 있다.



ex2-17-2.html
<body id="bgPage1" class="bgPage2">
  <h1>선택자간의 우선 순위 알아보기</h1>
  <hr />
  <div>
    <h2>굴 이야기</h2>
    <p class="bgPage2">
      일명 <span class="blueText">석화</span>라고도 하는데 멀리서 보면 따낸 굴조개 껍질이 바위면에 하얗게 붙어있어서 마치 <span class="blueText">꽃무더기</span>를 연상하게 한다. 굴은 <span class="blueText">3대 영양소</span>는 물론 비타민, 미네랄에 이르기까지 풍부한 영양분을 함유하고 있어서 완전식품인 우유와 별로 다를 바가 없다.
    </p>
  </div>
</body>




4.17. 상속관계


ex2-17-1.html
속성 값의 상속 관계 알아보기
굴 이야기
일명 석화라고도 하는데 멀리서 보면 따낸 굴조개 껍질이 바위면에 하얗게 붙어있어서 마치 꽃무더기를 연상하게 한다. 굴은 3대 영양소는 물론 비타민, 미네랄에 이르기까지 풍부한 영양분을 함유하고 있어서 완전식품인 우유와 별로 다를 바가 없다.




4.18. 형성 퀴즈3


리소스파일
레드향
껍질에 붉은 빛이 돌아 레드향이라 불린다.

레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.

비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.

레드향 샐러드 레시피
상품 구성



4.19. 형성 퀴즈4


리소스파일
밥/죽/면
매일 반찬
국/찌게/전골
가족/초대요리
소스/양념장
간식/음료
기타
게시판
자유 게시판
회원 장터
나만의 레시피
불후의 레시피



4.20. 형성 퀴즈5
4.20.1. 예제
미리보기
html
css
<div>
html body div ul {
목차
1. CSS 개요
2. 주요 선택자 요약
3. CSS 기본문법과 적용하기
3.1. 내부스타일시트 (Internal)
3.2. 외부스타일시트 (external)
3.3. 인라인 (inline)
3.4. @import
4. 선택자
4.1. 태그선택자
4.2. 아이디선택자
4.3. 클래스선택자
4.4. 전체선택자
4.5. 하위선택자
4.6. 자식선택자
4.7. 인접선택자
4.8. 형제선택자
4.9. 그룹선택자
4.10. 형성퀴즈 1
4.11. 형성퀴즈 2
4.12. 속성선택자
4.13. 가상선택자
4.14. 가상요소선택자
4.15. 16-1. :nth-of-type
4.16. 우선순위
4.17. 상속관계
4.18. 형성 퀴즈3
4.19. 형성 퀴즈4
4.20. 형성 퀴즈5
:nth-child(n)	:nth-of-type(n)
부모의 모든 자식요소 중 n번째	부모의 자식 중 특정요소의 n번째