본문 바로가기
웹언어/CSS3

[CSS3강좌] 18강 CSS3선택자

OSSAM 2020. 5. 19. 17:40
728x90
반응형

 

 

 

 

 

 

 

 

 

 

** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.

https://www.youtube.com/watch?v=PzNIJxi7HzA 

 

 

 

 

 

 

 

 

1. CSS3선택자

- html5에서만 사용가능한 CSS선택자

선택자 정리
구조선택자1 :first-child 배열된 선택자의 첫 번째 자손 선택
:last-child 배열된 선택자의 마지막 자손 선택
:nth-child(num) 배열된 선택자의 순서를 번호로 작성해서 선택
1부터 시작
:nth-child(odd/even) 배열된 선택자의 순서를 홀수/짝수로 나눠 선택
구조선택자2 :first-of-type 배열된 선택자 중 같은 태그타입의 첫 번째 자손 선택
:last-of-type 배열된 선택자 중 같은 태그 타입의 마지막 자손 선택
:nth-of-type(num) 배열된 선택자 중 같은 태그의 번호를 선택
:nth-of-type(odd/even) 배열된 선택자 중 같은 태그의 순서 중 홀수/짝수로 선택
문자열
선택자		 :first-line 선택자의 첫 번째 줄을 선택하여 CSS설정
:first-letter 선택자의 첫 번째 글자를 선택하여 CSS설정
컨텐츠
전후선택자		 :before 선택자의 앞부분에 컨텐츠를 삽입, content속성사용
:after 선택자의 뒷부분에 컨텐츠를 삽입, content속성사용
드래그
선택자		 ::selection
드래그시 배경색과 글자색을 변경
부정선택자 :not(클래스명)
해당클래스명만 제외하고 CSS설정
상태선택자 :hover 모든 태그에 적용 가능
마우스올렸을 때 설정
:active 모든 태그에 적용 가능
마우스활성화 시 설정

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 구조선택자1(child계열)

- 나열된 태그의 종류보다는 순번으로 처리되는 선택자

 

선택자 정리
구조선택자1 :first-child 배열된 선택자의 첫 번째 자손 선택
:last-child 배열된 선택자의 마지막 자손 선택
:nth-child(num) 배열된 선택자의 순서를 번호로 작성해서 선택, 1부터 시작
:nth-child(odd/even) 배열된 선택자의 순서를 홀수/짝수로 나눠 선택

 

 

 

 

 

 

 

 

 

1) 예시 코드

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3선택자</title>
        <style>
            *{ padding: 0; margin: 0; }
            ul{ margin: 50px; }
            li{ float: left; list-style: none; padding: 20px; }
            
            /* 구조선택자 : 나열된 요소의 순번으로 선택하는 방식 */
            li:nth-child(1){ background-color: red; }
            li:nth-child(2){ background-color: orange; }
            li:nth-child(3){ background-color: yellow; }
            li:nth-child(4){ background-color: green; }
            li:nth-child(5){ background-color: blue; }
            li:nth-child(6){ background-color: navy; }
            li:nth-child(7){ background-color: purple; }
            
            li:first-child{ border-radius: 10px 0 0 10px; }
            li:last-child{ border-radius: 0 10px 10px 0; }
            
            li:nth-child(odd){ color: gray; }
            li:nth-child(even){ color: white; }


            /* 1~3번까지 밑줄 */
            li:nth-child(-n+3){ text-decoration: underline; }

            /* 4번이후부터 기울기 */
            li:nth-child(n+4){ font-style: italic; }
        </style>
    </head>
    <body>
        <ul>
            <li>red</li>
            <li>orange</li>
            <li>yellow</li>
            <li>green</li>
            <li>blue</li>
            <li>navy</li>
            <li>purple</li>
        </ul>
    </body>
</html>

 

- 각각의 요소의 배경색을 무지개로 처리

- 첫번째 요소의 모서리 둥글기처리, 마지막 요소의 모서리 둥글기 처리

- 홀수, 짝수번째를 통한 글자색 처리

- nth-child(-n+숫자) : 1~숫자까지만 선택

- nth-child(n+숫자) : 숫자이후부터 모두 선택

 

 

 

 

 

 

 

 

2) 코드 완성 뷰

- 클래스를 주지 않아도 순번으로 정리가 가능해서 편하게 사용할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 구조선택자2(of-type계열)

- 나열되어 있어도 태그별로 따로 인식하는 구조 선택자

선택자 정리
구조선택자2 :first-of-type 배열된 선택자 중 같은 태그타입의 첫 번째 자손 선택
:last-of-type 배열된 선택자 중 같은 태그 타입의 마지막 자손 선택
:nth-of-type(num) 배열된 선택자 중 같은 태그의 번호를 선택
:nth-of-type
(odd/even)		 배열된 선택자 중 같은 태그의 순서 중 홀수/짝수로 선택

 

 

 

 

 

1) 예시 코드

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3선택자</title>
        <style>
            div > *:nth-of-type(1){ color: red; }
            div > *:nth-of-type(2){ color: green; }
            div > *:nth-of-type(3){ color: blue; }
        </style>
    </head>
    <body>
        <div>
            <h1>제목1</h1>
            <h2>제목2</h2>
            <h3>제목3</h3>
            <h1>제목1</h1>
            <h2>제목2</h2>
            <h3>제목3</h3>
            <h1>제목1</h1>
            <h2>제목2</h2>
            <h3>제목3</h3>
        </div>
    </body>
</html>

- 태그별로 첫번째 있다면 빨간색

- 태그별로 두번째 있다면 녹색

- 태그별로 세번째 있다면 파란색

 

 

 

 

 

 

 

2) 코드 완성 뷰

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. 문자열 선택자

- 첫번째 문자 혹은 첫번째 줄을 선택하는 선택자

선택자 설명
:first-letter 요소의 첫번째 글자를 선택
:first-line 요소의 첫번째 줄을 선택

 

 

 

 

1) 예시 코드

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3선택자</title>
        <style>
            p{
                width: 500px; padding: 20px;
                border: 3px solid black;
                text-align: justify; /* 양쪽 정렬 */
            }
            /* 첫번째 글자선택*/
            p::first-letter{ font-size: 3em; } /* em : 등배 - 3배 */
            
            /* 첫번째 줄 선택 */
            p::first-line{ color: red; }
        </style>
    </head>
    <body>
        <p>
            유소년에게서 가치를 그들에게 미묘한 무엇을 청춘의 모래뿐일 위하여서 있다. 낙원을 창공에 물방아 착목한는 아니다. 같이 가슴에 인간의 예수는 거선의 따뜻한 우리의 아니다. 청춘 황금시대의 싶이 무엇을 봄바람이다. 품고 못할 이상은 동력은 것이다. 날카로우나 뭇 얼마나 새 하는 무엇을 인생을 대한 때문이다. 얼음 열락의 꾸며 역사를 넣는 방지하는 이상이 끝에 낙원을 말이다. 곳으로 없으면, 피고, 스며들어 남는 방황하였으며, 피다. 같이 청춘이 인도하겠다는 것이다. 지혜는 무엇을 그들의 기관과 살 예수는 끓는다.
        </p>
    </body>
</html>

 

 

 

 

 

2) 코드 완성 뷰

- 첫번째 글자 크기만 커지고, 첫번째 줄만 빨간색으로 변경된 것을 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. 드래그 선택자

- ::selection : 요소의 컨텐츠를 드래그 했을 때의 CSS설정

 

 

 

1) 예시 코드

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3선택자</title>
        <style>
            p{
                width: 500px; padding: 20px;
                border: 3px solid black;
                text-align: justify; /* 양쪽 정렬 */
            }
            p::selection{
                background-color: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <p>
            유소년에게서 가치를 그들에게 미묘한 무엇을 청춘의 모래뿐일 위하여서 있다. 낙원을 창공에 물방아 착목한는 아니다. 같이 가슴에 인간의 예수는 거선의 따뜻한 우리의 아니다. 청춘 황금시대의 싶이 무엇을 봄바람이다. 품고 못할 이상은 동력은 것이다. 날카로우나 뭇 얼마나 새 하는 무엇을 인생을 대한 때문이다. 얼음 열락의 꾸며 역사를 넣는 방지하는 이상이 끝에 낙원을 말이다. 곳으로 없으면, 피고, 스며들어 남는 방황하였으며, 피다. 같이 청춘이 인도하겠다는 것이다. 지혜는 무엇을 그들의 기관과 살 예수는 끓는다.
        </p>
    </body>
</html>

- 드래그 시 배경색을 빨간색, 글자색은 흰색으로 변경되게 설정

- 원래는 배경색이 파란색, 글자색은 흰색으로 변경된다.

 

 

 

 

 

 

 

2) 코드 완성 뷰

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. 컨텐츠 전후 선택자

- 요소의 전후를 선택하여 컨텐츠를 추가하는 선택자

- content라는 속성과 함께 사용된다.

 

선택자 설명
:before 요소의 앞에 새로운 컨텐츠를 추가
:after 요소의 뒤에 새로운 컨텐츠를 추가

 

 

 

 

1) 예시 코드

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3선택자</title>
        <style>
            li{ list-style: none; }
            
            li:before{ content: '★'; } /* 요소의 컨텐츠 앞에 다른 컨텐츠를 넣는 선택자 */
            li:after{ content: '고객님'; } /* 요소의 컨텐츠 뒤에 다른 컨텐츠를 넣는 선택자 */
        </style>
    </head>
    <body>
        <ul>
            <li>홍길동</li>
            <li>홍길순</li>
            <li>홍길자</li>
        </ul>
    </body>
</html>

 

 

 

 

 

 

2) 코드 완성 뷰

 

 

- li:before{ content: '★'; } 앞에 별이 들어가도록 처리

- li:after{ content: '고객님'; } 뒤에 고객님이 들어가도록 처리

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7. 부정 선택자

- :not(클래스) : 해당 클래스를 제외한 나머지를 모두 선택하는 선택자

 

 

 

 

1) 예시 코드

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3선택자</title>
        <style>
            li{ list-style: none; }
            
            li:not(.first){ color: red; }
        </style>
    </head>
    <body>
        <ul>
            <li class="first">홍길동</li>
            <li>홍길순</li>
            <li>홍길자</li>
        </ul>
    </body>
</html>

 

 

 

 

 

 

2) 코드 완성 뷰

-li:not(.first){ color: red; } 클래스를 준 첫번째 요소만 제외하고 빨간색이 처리되는 것을 확인

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8. 상태 선택자

- xhtml1.0에서는 a태그에만 사용되었으나 이제 모두 사용되는 선택자

 

선택자 설명
:hover 요소에 마우스를 올렸을 때의 CSS
:active 요소에 마우스를 꾹 누르고 있을 때의 CSS

 

 

 

 

 

1) 예시 코드

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3선택자</title>
        <style>
            div{
                width: 100px; height: 100px;
                background-color: beige;
            }
            
            /* xhtml1.0에서는 a태그에만 적용 */
            /* html5에서는 모든 태그에 적용 */
            div:hover{ background-color: red; }
            div:active{ background-color: blue; }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

 

 

 

 

 

2) 코드 완성 뷰

- 마우스를 올렸을 때 빨간색,

- 마우스를 꾹 누를때 파란색 처리

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'웹언어 > CSS3' 카테고리의 다른 글

[CSS3강좌] 20강 구글웹폰트와 @font-face - OSSAM강좌  (0) 2020.05.22
[CSS3강좌] 19강 CSS 텍스트줄임  (0) 2020.05.22
[CSS3강좌] 17강 CSS2선택자  (0) 2020.05.19
[CSS3강좌] 16강 폼관련 CSS선택자와 속성 + textarea태그 크롬 크기 변경  (0) 2020.05.19
[CSS3강좌] 15강 블록요소의 자손을 가로 세로 가운데 정렬하기  (0) 2020.05.18

'웹언어/CSS3' Related Articles

티스토리툴바