1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 | <!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> </head> <body> <h1>선택자</h1> <p>선택자는 페이지에 있는 원하는 태그 (element)를 선택하는 것 아이디선택자, 클래스 선택자, 태그 선택자, 자손, 후손 선택자, 반응 선택자 전체, 구조 , 속성 , 동위 선택자가 있음. </p> <h1>선택자 우선순위</h1> <p> 기본적으로 CSS속성은 위에서 부터 아래로 적용이 되지만, 같은 태그에 다양한 선택자로 CSS속성이 설정된 경우에는 우선순위에 따라 스타일이 적용된다.</p> <pre> 태그선택자 < 클래스선택자 < 아이디선택자 < 인라인스타일 < !important 순서로 우선순위를 가진다.</pre> <hr> <h3>전체선택자 : * </h3> <table> <tr> <td>변경하자1</td> <td>변경하자2</td> <td>변경하자3</td> </tr> </table> <style> *{ font-size: 30px; background-color: black ; color: white; } </style> <h3>태그선택자</h3> <p>태그명으로 태그(element)를 선택하는것</p> <table> <tr> <td>이름</td> <td>나이</td> <td>성별</td> </tr> <tr> <td>유재석</td> <td>19</td> <td>남</td> </tr> <tr> <td>유지훈</td> <td>27</td> <td>남</td> </tr> </table> <style> table{ height:200px; width:300px; border:1px orange solid; } td{ border:1px orangered solid; background-color: aquamarine; } </style> <h3>아이디선택자 : #아이디명</h3> <p>id속성이 설정되어있는 태그를 선택하는 것 아이디명이 일치하는 태그(element)만 선택해서 style 을 적용 * 아이디명은 중복되면 안됨. 유일한 한개의 태그 -> javascript에서 불러올때 에러발생 </p> <p id="idselect">아이디선택자로 style변경하자</p> <p id="idselect">이것도 선택이 될까요?</p> <style> #idselect{ font-size: 20px; color:red; background-color: yellow; } </style> <h3>클래스 선택자 : .클래스명</h3> <p>클래스 속성명이 일치하는 태그에 style 을 적용하는 것 중복값을 허용함. 다수의 태그에 설정해서 style 을 한번에 적용할수 있음 </p> <div> <p>div 안에 p태그</p> <h4 class="classselect font">div 안의 h4태그</h4> <ul> <li class="classselect">li태그1</li> <li>li태그2</li> </ul> <ul> <li class="font">li태그3</li> <li><a href="" class="classselect">li안에 a태그</a></li> </ul> </div> <style> .font{ font-size: 20px; font-weight: bold; font-family: "궁서"; } .classselect{ background-color: yellowgreen; } </style> <h3>속성선택자 : 선택자[속성명 비교연산 속성값]</h3> <p> 태그에 설정되어있는 속성과 속성값을 기준으로 선택하는 선택자 input,img,a 등의 속성을 기준으로 디자인을 적용할때 비교 연산 속성명=속성값 : 일치한것 ~= : 띄어쓰기를 기준으로 값을 확인 |= : -를 기준으로 값을 확인 ^= : 맨앞글자를 기준으로 확인 $= : 맨뒤글자를 기준으로 확인 *= : 포함여부확인 </p> <input type="text" name="userid">s <input type="password" name="pwd"> <style> [name="userid"]{ background-color: cyan; } input[type="password"]{ background-color: red; color: wheat; } </style> <br> <a href="www naver.com">^=</a> <a href="ww-naver.com">^=</a> <a href="_wwwnaver.com">^=</a> <br> <a href="naver com">~=</a> <a href="naver net">~=</a> <a href="co kr naver">~=</a> <br> <a href="www naver-net">naver-net</a> <a href="naver-net">naver net</a> <a href="naver~net">naver~net</a> <a href="www-naver-net">www-naver-net</a> <br> <a href="www.naver.com">www.naver.com</a> <a href="www.google.com">www.google.com</a> <a href="www.comnate">www.nate.com</a> <br> <img src="https://pds.joins.com/news/component/htmlphoto_mmdata/201912/14/07712b9e-e451-49c7-a65c-fb94b6dcda0b.jpg" width="200" height="200" alt="마동석"> <p width="200">이것도 적용이 될까요?</p> <style> [width="200"]{ border-radius: 90px; border:1px yellow solid; } /* *= 연산자 이용하기*/ a[href*="com"]{ background-color:lightslategray; } /* |= 연산자이용하기*/ a[href|="naver"]{ background-color:lightsalmon; } /* ^= 연산자 이용하기*/ a[href^="www"]{ text-decoration:none; } /* ~=연산자 이용하기*/ a[href~="naver"]{ color:lime; } </style> <h3>자식/후손선택자 : 부모선택자>자식선택자 / 부모선택자 자식선택자</h3> <p> 자식선택자 : 부모하고 직접연결되어있는 태그 후손석택자 : 부모선택자가 포함하고있는 모든 태그 </p> <header> <h3>자식선택자 h3</h3> <ul> <li>후손태그 li1</li> <li id="childselect">후손태그 li2</li> <li>후손태그 li3</li> </ul> <p>자식태그 p</p> <div> <h3>후손태그 h3</h3> <ul> <li> div 안에 ul 안에 li1</li> <li> div 안에 ul 안에 li2</li> <li> div 안에 ul 안에 li3</li> </ul> </div> </header> <div> <h3>div의 자식 선택자</h3> </div> <style> header>div>h3{ background-color: magenta; } header>ul>#childselect{ color: lightpink; font-size: 50px; } header li{ background-color:darkorange; color: deeppink !important; } </style> <h3>동등선택자 : 전선택자+후선택자, 선택자~선택자</h3> <p> 같은위치(level)에 있는 태그를 선택하는 것 + : 같은위치 태그중 전선택자 다음에 오는 한개 후 선택자 태그 ~ : 같은위치 태그중 전선택자 다음에 오는 모든 후 선택자 태그 </p> <style> h3+p{ background-color: royalblue; color: lime; } p+p{ text-decoration: underline; color: hotpink; } p~h3+div{ color:khaki; background-color: lavender; } </style> <section> <p>1 p</p> <p>2 p</p> <div>3 div</div> <div> <p>4 p</p> <h3>5 h3</h3> <div>6 div</div> <h3>7 h3</h3> </div> <p>8 p</p> <h3>9 h3</h3> <div>10 div</div> <h3>11 h3</h3> <p>12 p</p> </section> </body> </html> | cs |