1. 아래의 선택자를 예를 들어 설명하시오.
- 가상 선택자
- 반응선택자:마우스의 반응에 따른 속성을 설정 할 수 있습니다.
- 상태선택자:상태에 따라서 CSS속성이 변화는 설정을 할 수 있습니다.
- 구조선택자: 구조에 따라서 CSS속성이 변화는 설정을 할 수 있습니다.
- 속성 선택자: []안에 color나 font size, border등을 넣을수 있습니다.
- 자손 선택자: 바로밑에 있는 단계를 말합니다.
- 후손 선택자:밑에 밑단계를 말하며 한칸 띄우고 써야합니다 .
- 형제(동위 선택자): ~과+가 있다.
~은 형제범위 끝까지 선택하지만 +는 바로 다음 형제만 선택합니다. - 전체 선택자: 스타라고 불리며 *로 쓰입니다.
- #id .class 선택자: id는 유일무이해야하며 class는 중복사용도 가능합니다.
2. 아래를 구현하시오.
3. 아래를 구현하시오.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #content{ width: 300px; } ul > li { text-align: center; border: 1px solid #cccccc; font-size: 20px; font-weight: bold; background-color: #efefef; list-style: none; padding: 10px; color: black; /* padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; */ } ul li:first-child{ border-radius: 10px 10px 0 0; } ul li:last-child{ border-radius: 0 0 10px 10px; } ul li:nth-child(2n+1){ background-color: pink } ul li:nth-child(2n){ background-color: #cccccc } ul li:first-child, ul li:last-child{ background-color: yellow; } </style> </head> <body> <div id="content"> <ul> <li><a href="a">menu1</a></li> <li><a href="a">menu2</a></li> <li><a href="a">menu3</a></li> <li><a href="a">menu4</a></li> <li><a href="a">menu5</a></li> <li><a href="a">menu6</a></li> <li><a href="a">menu7</a></li> <li><a href="a">menu8</a></li> </ul> </div> </body> </html>
4. 아래를 구현하시오.
'''
Document#content .center ul li{ list-style: none; float: left; padding: 0 40px; font-weight: bold; font-size: 20px; } #content .hiseoul{ clear: both; padding: 10px; } </style>123<div id="content"> <div class="left">4</div> <div class="center"> <div> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </div> <div class="hiseoul"> <h1>하이서울브랜드</h1> <p>서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나
고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.'''</div> </div> <div class="right">6</div> </div> <div id="footer"> <div class="left">7</div> <div class="center">8</div> <div class="right">9</div> </div>
