728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 특성(속성)</title>
            <meta charset="UTF-8">
            <style>
                a {
                    cursor: pointer;
                }
                a:hover {
                    text-decoration: underline;
                }
                a[disabled] {
                    color: gray;
                    cursor: default;
                }
               
                a[disabled]{
                    text-decoration: none;
                }
                /* 우선순위
                0. 겹치는 속성에 대해서만 적용이 된다.
                1. 선택자가 보다 상세하게 명시된 선택자가 우선순위를 가진다.
                2. 선택자의 상세한 정도가 같다면 보다 아래 쪽에 명시된 선택자가 우선순위를 가진다.
                */

                /*
                ['속성 이름'] {
                    ...
                }
                '속성 이름'에 해당하는 속성이 있는 선택자
                */
                /*
                ['속성 이름'='속성 값']{
                        ...
                }
                '속성 이름'에 해당하는 속성 값이 '속성 값'인 선택자
                */
            </style>
    </head>
    <body>
        <a>Hello</a>
        <a disabled>Hello</a>
        <a>Hello</a>
        <input type="test" disabled>
    </body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

폰트  (0) 2022.12.19
형제 선택자  (0) 2022.12.19
클래스 선택자  (0) 2022.12.19
자식 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 클래스</title>
            <meta charset="UTF-8">
            <style>
                /*
                클래스 선택자
                .'클래스 이름' {
                    ...
                }
                HTML 태그에 부여된 class 속성(Attribute)을 기준으로 선택
                */
                a.color-red{
                    color: red;
                }
                /* a태그 이면서, color-red 클래스를 가지는 것*/
                a.back-yellow {
                    background-color: yellow;
                }
                a.color-red.back-yellow {
                    text-decoration: underline;
                }
                /* a태그 이면서,color-red와 back-yellow 클래스를 모두 가지는 것*/
            </style>
    </head>
    <body>
        <a class="color-red">1</a>
        <a class="color-red back-yellow">2</a>
        <a class="back-yellow">3</a>
    </body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

형제 선택자  (0) 2022.12.19
특성 선택자  (0) 2022.12.19
자식 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 자식</title>
            <meta charset="UTF-8">
            <style>
                /*
                '부모 선택자' > '선택자' {
                    ...
                }
                */
                div > a{
                    color: red;
                }
                span > a{
                    color: blue;
                }
            </style>
    </head>
    <body>
        <a>I'm child of body</a>
        <div>
            <a>I'm child of div</a>
            <span>
                <a>I'm child of span</a>
            </span>
        </div>
    </body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

특성 선택자  (0) 2022.12.19
클래스 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 자손</title>
            <meta charset="UTF-8">
            <style>
                /*
                '부모/선조 선택자' '선택자' {
                    ...
                }
                */
                div a{
                    color: red;
                }

            </style>
    </head>
    <body>
        <a>I'm child of body</a>
        <div>
            <a>I'm child of div</a>
            <span>
                <a>I'm child of span</a>
            </span>
        </div>
    </body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

클래스 선택자  (0) 2022.12.19
자식 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 요소</title>
            <meta charset="UTF-8">
            <style>
                /*
                '태그 이름' {
                    '속성' : '값';
                    ...
                }
                */
                SPAN {
                    color: red;
                }
                DIV {
                    color: blue;
                }
            </style>
    </head>
    <body>
        <SPAN>ABC</SPAN>
        <DIV>123</DIV>
    </body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

자식 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 그룹</title>
            <meta charset="UTF-8">
            <style>
                /*
                그룹 선택자 : 서로 다른 두 개 이상의 선택자에게 동일한 CSS 속성을 적용하기 위해 사용.
                '선택자 A', '선택자 B', '선택자 C', ... {
                    ...
                }
                */
                a, b, strong, sup, sub {
                    color: red;
                }
            </style>
    </head>
    <body>
        <a>I'm a.</a>
        <a>I'm b.</a>
        <strong>I'm strong.</strong>
        <sup>I'm sup.</sup>
        <sub>I'm sub.</sub>
    </body>
</html>
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

자손 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
ul 태그  (0) 2022.12.18
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자</title>
        <meta charset="UTF-8">
        <style>
            /*
            <선택자(Selector)>{
                <속성(Property)>:<값>;
                <속성(Property)>:<값>;
                <속성(Property)>:<값>;
            }
            */
            /* 요소 선택자 (Element Selector)*/
            a {
                background-color: black;  
                /* 배경 색상 */
                color:red;
                 /* 글씨 색상*/
            }
            b {
                color:blue;
            }
            /* 자식 선택자 */
            /*
            '부모 선택자' > '자식 선택자' {
                ...
            }
            */
            body > a {
                font-size: 32px;
                /* 글씨 크기 */
            }


            body > b > a {
                text-decoration: underline;
            }
            /* 자손(후손) 선택자 (자식도 선택) */
            /*
            '선조' '자손(후손) 혹은 자식'{
                ...
            }
            */
            div a {
                color: red;
            }
        </style>
    </head>
    <body>
        <!-- <a >Hello!</a>
        <b>
            Hi
            <A>child</A>
        </b>
        <a >ABCD</a>
        <div>
            <div>
                <b>
                    <a>
                        ??
                    </a>
                </b>
            </div>
        </div> -->
        <a>1</a>
        <div>
            <a>2</a>
            <div>
                <a>3</a>
                <span>
                    <a>4</a>
                </span>
            </div>
        </div>
        <a>5</a>


    </body>
</html>




<!-- /* */ -->
728x90
반응형

'정보 > WEB' 카테고리의 다른 글

요소 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
ul 태그  (0) 2022.12.18
u 태그  (0) 2022.12.18

+ Recent posts

728x90
반응형
">