# 복합 셀렉터 ## 미션 아래 이미지를 참고하여, 나만의 공부법 페이지를 만드시오. ![클라우드스터딩-CSS-id-선택자-표-만들기](https://i.imgur.com/iKHOlDC.png) ## 개념 #### ⭐️ 동시 선택하기 A이면서 동시에 B인 것을 선택 ``` /* li 태그이면서, 동시에 like 클래스인 것을 선택 */ li.like { ... } ``` #### ⭐️ 내부 선택하기 A를 찾고, 그 내부에서 B를 선택 ``` /* ul 내부의 모든 li를 선택 */ ul li { font-style: italic; } ``` #### ⭐️ 상태별 선택 A가, B상태이면 선택 ``` /* 모든 li 중, 마우스가 올려진 것을 선택 */ li:hover { background-color: darkslateblue; color: white; } ``` ## 구글링 힌트 - "css 선택자 combinators" - "css 선택자 pseudo" - "css 선택자 grouping" ## 참고 자료 - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
관련 강의로 이동

코드: java 1.8

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>복합 셀렉터 연습!</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>개발자 공부법!</h1> <h2>개념</h2> <ul> <li class="key">큰 그림부터 - 목차부터, 핵심부터, 사소한건 제껴!</li> <li>얕고 빠르게 - 한 번에 다 X. 뼈대부터 먼저!</li> <li>점진적 확장 - 뼈대에 살을 붙이기! 어려운 건 스킵!</li> </ul> <h2>코드</h2> <ul> <li>따라치기 - 기초가 곧 핵심! 어려운거 NONO!</li> <li class="key">바꿔보기 - 내 입맛대로 변경! 가설 -> 검증!</li> <li>출제하기 - 출제자의 입장!</li> </ul> <h2>문서화!</h2> <ul> <li>Why - 개발은 팀 단위 협업.</li> <li>How - 문학적 X. 논리적, 간결!</li> <li class="key">What - 블로그, 깃허브(취업 시 유리)</li> </ul> </body> </html>

입력

정답이 궁금하다면? 코드를 제출해보세요!