CSS

[CSS]선택자

로돌씨 2024. 6. 5. 17:36

타입 선택자 / id선택자 / 클래스 선택자

<!DOCTYPE html>
<html lang="en">
<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>
    <!-- 
        css를 통해 스타일을 적용하기위한 대상을 선택하기 위해서 선택자 활용.
        
    -->
    <link href="./resource/css02.css" rel="stylesheet" type="text/css" >
</head>
<body>
    <h1>선택자</h1>
    <article>
        <h3>타입 (태그) 선택자</h3>
        <pre>태그 이름을 지정하여 선언</pre>
    </article>
    <article>
        <h3>id선택자</h3>
        <ul>
            <li id="sid01">요소에 id를 지정하고</li>
            <li id="sid02">style에서 지정된 id값을 사용</li>
            <li id="sid03">#으로 구분</li>
        </ul>
    </article>
    <!-- '유일한 하나' id는 각각 다르게 설정해주어야함 -->

    <article>
        <h3>class 선택자</h3>
            <ol>
                <li id="scls01">요소에 class 지정하고</li>
                <li class="scls">style에서 지정된 class값을 사용</li>
                <li class="scls">.(dot)으로 구분한다.</li>
            </ol>
    </article>
    <!-- 여러 요소에 공통적으로 적용-->

 

CSS파일

/*타임 선택자*/
pre{
    text-align: center;
}
h1{
    text-align: right; color: blue;
 }    

 /*id 선택자*/
 #sid01{
    color: orange;
 }
 #sid02 {
    color: green;
 }
 #sid03 {
    color: brown;
 }
 /* class 선택자 */
 .scls{
    color:pink;

 }
 #scls01{
    color: black;
 }

 

출력화면

 

전체선택자 / 자식선택자 / 인접선택자 / 속성선택자 / 가상클래스선택자

<article>
        <h3>전체 선택자</h3>
    </article>
    <article id="at">
        <h3>자식 선택자</h3>
        <div><p>자식1</p></div>
        <p>자식2</p>
        <h4>자식?</h4>
    </article>
    <article>
        <h3>인접 선택자</h3>
        <b>지정한 요소 다음</b>
        <span>에 나오는 요소 선택</span>
        <b>인접???</b>
    </article>
    <article>
        <h3>속성 선택자</h3>
        <p title="a">속성이 정의된</p>
        <p title="b">태그만 선택하는</p>
        <p name="c">선택자</p>
    </article>
    <article>
        <h3>가상 클래스 선택자</h3>
        <ui>
            <li>특정 이벤트가 발생된 태그</li>
            <li><a href="http://www.naver.com">네이버</a></li>
            <li><a href="http://www.google.com">구글</a></li>
            <li><a href="http://www.daum.net">다음</a></li>
            <li><input type = "checkbox"> 체크박스 </li>
        </ui>
    </article>

 

CSS

/* 전체 선택자 */
/*  *{
    text-align: right;
    margin: 0;
    padding: 0;
 }
 */

 /* 자식 선택자 */
 #at > p {
    color: orange;
 } 
/* 바로 밑의 자식인 p만 해당이 되고 div의자식인 p태그는 적용이 안됐음 */

/*text가 자식1인 p태그를 선택(자식선택자로)해서 글자색을 red로 변경*/
#at > div > p{
    color: red;
}

/* 인접 선택자 */
h3 + b{
    background-color: black;
    color: white;
}

span + b{
    background-color: yellow;
    color: violet;
}
/* 속성 선택자 */
p[title]{
    color: skyblue;
}
p[title="b"]{
    background-color: black;
}

/* 가상 클래스 선택자 */
/* link : 방문 전 링크 선택
    viseted: 방문 후 링크 선택
    hover:마우스를 태그에 올라가있는동안 선택
    active: 클릭할 때 , focus:포커스가 머물러 있는동안...
*/
a:link{
    color:pink;
    font-size: 20pt;
}
a:visited{
    color:gray
}
/* 마우스가 태그위에 올라와있으면 감지 */
a:hover{
    background-color: purple;
}
input:checked{
    width : 200px;
    height: 200px;
}

 

출력화면

 

종속 선택자 / 하위 선택자 / 그룹 선택자

<article>
        <h3 class="acls01">종속 선택자</h3>
        <ol>
            <li class="acls01">타입 선택자와</li>
            <li class="acls02">아이디 선택자(#)</li>
            <li class="acls01">클래스 선택자(.)</li>
            <li class="acls02" id="sidli">가 혼합된 형태입니다.</li>
        </ol>
    </article>
      
    <aritcle>
        <h3>하위 선택자</h3>
        <div>
            <span>특정 요소 하위의</span>
            <p><span>요소를 지정할때 사용</span><p><span>한번더?</span></p></p>
            
        </div>
    </aritcle>
       
    <article>
        <h3>그룹 선택자</h3>
        <p>여러 요소에</p>
        <pre>각각 같은 스타일을</pre>
        <strong>적용한다.</strong>
    </article>

</body>
</html>

/* 종속선택자 */
li.acls01{
    background-color: green;
}
li.acls02#sidli{
    color: brown;
}
/* 하위 선택자 */
div span{
    background-color: yellow;
}
/* 그룹선택자 */
p,pre,strong{
    color:lime;
}

 

출력화면

 

선택자의 우선순위

 

<!DOCTYPE html>
<html lang="en">
<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>
        /* 태그 선택자 */
        div{
            width: 300px;
            height:300px;
            background-color: orangered;
        }
        /* 클래스 */
        .test1{
            background-color: yellowgreen;
            color: white;
        }
        /* 아이디 선택자 */
        #test1 {
            background-color: pink;
        }
        /* 인라인스타일
        <div안에 style 삽입 */

        #test2{
            width:300px;
            height: 300px;
            background-color: yellow;
            color: black;
        }
        .test3{
            background-color: black;
            color: white;
        }
        p{
            background-color: deeppink !important;
            color: white !important;
        }
     
    </style>
</head>
<body>
    <h1>선택자 우선순위</h1>
    <p>기본적으로 css속성은 위에서 아래로 적용, 같은 태그에 여러 css속성이
        설정된 경우 우선순위에 따라 스타일이 적용된다.
    </p>
    <pre>태그 선택자 < 클래스 선택자 < 아이디선택자 < 인라인스타일 < !important 순서로 우선순위를 가진다.</pre>
    <div id="test1" class="test1" style="background-color: blueviolet;"> 우선순위 테스트</div>
    <p id="test2" class="test3"> 우선순위 테스트2</p>
</body>
</html>

 

출력화면

'CSS' 카테고리의 다른 글

[CSS]CSS#4(반응형)  (0) 2024.06.28
[CSS]CSS#3  (0) 2024.06.21
[CSS] CSS#2  (0) 2024.06.13
[CSS] CSS #1  (1) 2024.06.11
[CSS]인라인스타일시트 / 외부스타일시트  (0) 2024.05.26

'CSS'의 다른글

  • 현재글[CSS]선택자

관련글

티스토리툴바