html 선택자

2023.12.09

🥐 기본 속성 선택자

태그 중에서 특정 속성 및 값을 가지는 요소를 선택한다

<form>
        <p>
            <input type="text" name="title" placeholder="제목">
            <input type="text" name="writer" placeholder="작성자">
        </p>
        <p>
            <input type="date" name="birth">
        </p>
        <p>
            <input type="password" name="pw" placeholder="비밀번호">
        </p>
        <p>
            <input type="reset">
            <input type="submit">
        </p>
</form>

위와 같이 코드가 적혀있을 때 기본속성 선택자를 이용하여 style을 지정할 수 있다.

input[type="text"] {
 /* type="text" 또는 name="title" */
         	all: unset;
            /*  all: unset; : 태그에 기본적으로 부여된 속성을 모두 초기화시킴 */
            width: 200px;
            padding: 10px;
            border: 0;
            border-bottom: 2px solid lightslategrey;
}
input[type="password"] {
            all: unset;
            width: 200px;
            background-color: rgba(255, 192, 0, 0.2);
            /* alpha : 투명도 */
            padding: 10px;
}
input[type="reset"] {
            background-color: lightcoral;
            color: white;
            border-radius: 20px;
            border: 0;
            padding: 10px;
}
input[type="submit"] {
            background-color: lightslategrey;
            color: white;
            border-radius: 20px;
            border: 0;
            padding: 10px;
}
input[name="writer"] {
/* 위쪽에 type="text"인 스타일이 먼저 적용되고 나서 name="writer인 스타일이 적용된다.
이걸 맨 위로 올리면 type="text"가 적용되지 않아서 아래  border-bottom: 스타일이 적용안됨.
넣는 순서가 중요!*/
            border-bottom: 2px solid hotpink;
        }

결과 ↓

---

🥐 문자열 속성 선택자

🍞 선택자[속성^="값"] {...}

속성이 특정 값으로 시작하는 요소 선택

🍞 선택자[속성$="값"] {...}

속성이 특정 값으로 끝나는 요소 선택

🍞 선택자[속성!="값"] {...}

속성이 일치하지 않는 요소 선택

<p><img src="짱구.png"></p>
<p><img src="짱아.png"></p>
<p><img src="유리.png"></p>
<p><img src="danbi.png"></p>
<p><img src="danbi.jpg"></p>

위와 같이 코드가 적혀있을 때
문자열 속성 선택자를 지정하여 스타일을 바꿀 수 있다.

img {
        height: 100px;
}
img[src^="짱"] {
        /* src가 "짱"으로 시작하는 모든 이미지 */
        border: 3px solid red;
}
img[src$="png"] {
        /* src가 "png"로 끝나는 모든 이미지 */
        background-color: lightgoldenrodyellow;
}
img[src$="jpg"] {
        /* src가 "jpg"로 끝나는 모든 이미지 */
        border-radius: 20px;
}

결과 ↓

---

🥐 동위 선택자

Tree구조에서 형제노드에 해당하는 요소를 선택한다

🍞 A + B

A 바로 다음 요소 B를 선택
A에 속해있지 않으며 B 동위 요소 중 가장 위에 있는 하나만 선택됨

🍞 A ~ B

A의 동위 요소 B를 모두 선택

    <div>
        <h3>떡잎마을 유치원</h3>
        <h4>짱구</h4>
        <h4>유리</h4>
        <h4>철수</h4>
        <h4>맹구</h4>
        <h4>훈이</h4>
    </div>
    <div>
        <h4>흰둥이</h4>
    </div>

h3 + h4 {
        background-color: red;
        /*  h3다음에 있는 바로 다음요소 1개만 */
}
h3 ~ h4 {
        /* h3다음에 있는 바로 다음요소(h4)를 포함한 동위 요소 모두 */
        padding: 10px;
        border-bottom: 3px solid pink;
        width: fit-content;
}

결과 ↓