221220 HTML CSS 선택자, 가상선택자

HTML·CSS

221220 HTML CSS 선택자, 가상선택자

주영재 2022. 12. 20. 18:41

선택자
HTML 문서 안의 태그를 선택할 때 선택자 사용

* : HTML페이지 내부의 모든 태그 선택
태그 : 특정한 태그 선택
#아이디 : 아이디속성을 가지고 있는 태그 선택
.클래스 : 특정한 클래스를 가지고 있는 태그를 선택

*는 margin, padding 등 여백을 없앨 때 사용함

띄어쓰기도 선택자다.
선택자A 선택자B : 선택자A의 후손에 위치하는 선택자B를 선택한다.
#header h1{color : red;}-id가 header인 태그의 자식으로 있는 h1태그 모두. id가 header인 애한테 적용되는게 아님

선택자A>선택자B : 띄어쓰기와 비슷하나, 직속 자식만 선택한다.
#header>h1{color:red;}-바로 하위 자식에게만.

ex)예를 들어 div안에 form이 있고, 그 사이와 form태그 안 모두 p태그가 있을 때 >를 쓰면
form안에 있는 p태그에는 적용되지 않는다.

<div>
	<p>글자</p>
    
    <form>
    	<p>글자2</p>
    </form>
</div>

이때 div에 class를 주고 >p를 하면 '글자'는 바뀌지만 '글자2'는 바뀌지 않는다.

선택자는 ,로 여러개를 연결해서 붙이기가 가능.

선택자[속성] : 특정한 속성이 있는 태그를 선택한다.
선택자[속성=값] :
<input type="text">가 있으면
input[type=text]{}가 가능

<!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>
        *{color: black; }/*디자인 시작전에 전역으로 적용할 속성 margin and padding에 적용*/
        b{color: red;}
        #a1{color:blue;}/* 아이디 */
        .b1{color: pink;}/* 클래스 */
        .box p{color:yellow;}/* 모든자식 */
        .box>p{color:purple;}/* 직계자식 */

        .box2 li,
        .box2 p{color : green;}
        .forms input[type=text]{background-color: aqua;}

    </style>


</head>
<body>
    <p>선택자</p>
    <b>선택자</b>

    <p id="a1">아이디선택자 #</p>
    
    <p class="b1">클래스선택자 .</p>

    <p class="b1">클래스선택자 .</p>

    <div class="box">

        <p>하위선택자 꺽쇠</p>
        <p>하위선택자 꺽쇠</p>

        <form>
            <p>하위선택자 공백</p>
        </form>

    </div>

    <div class="box2">
        <ul>
            <li>목록</li>
            <li>목록</li>
            <li>목록</li>
        </ul>

        <div>
            <p>내용...</p>
        </div>

    </div>


    <form class="forms">
         <input type="text">
        <input type="submit">
    </form>


</body>
</html>

가상성택자
어떤 동작이 일어났을 때 그 태그를 지칭

:active -마우스로 클릭한 태그
:hover -마우스를 올린 태그
:focus -초점이 맞추어진 input태그. input태그에 커서가 올라갔을 때
:checked -라디오박스나 체크박스의 체크된 상태
:enabled, :disabled -사용가능 or 사용불가능한 태그

<!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>
        /* 마우스 닿을 때 */
        .list>ul>li>a:hover {background-color: aqua;}
        /* input에 포커스 될 때 */
        .inner input:focus{background-color: aqua;}
        /* 눌렀을 때 */
        .title p:active{background-color: aqua;}
        
    </style>
    
</head>

<body>

    <div class="list">
        <ul>
            <li><a href="#">목록</a></li>
            <li><a href="#">목록</a></li>
            <li><a href="#">목록</a></li>
        </ul>
    </div>

    <div class="inner">
        <input type="text" placeholder="id"><br>
        <input type="text" placeholder="pw">
    </div>

    <div class="title">
        <p>active</p>
    </div>

</body>

</html>