아이디 선택자(ID Selector)는 웹 페이지에서 아이디가 가리키는 특정 요소를 선택하여 CSS로 꾸미고
자 할때 사용됩니다. HTML의 아이디(id) 속성은 홈페이지에서 회원 가입할 때 사용하는 아이디와 같이
유일무이한 하나의 요소를 지정할 때 사용됩니다.
아이디 선택자 사용 예
ex3-3.html
<style> #intro { width: 120px; background-color: purple;
color: white; padding: 10px 20px;
box-shadow: 3px 3px 10px #888888;
} #p1 { line-height: 150%; } #p2 { border: solid 1px #cccccc; padding: 20px; line-height: 200%; } span { font-weight: bold; } </style> <body> <h3 id="intro">우리가든 안내</h3> <p id="p1">복잡한 도심에서 여유로운 휴식을 즐길 수 있는 나만의 공간, 따뜻한 고향의 정서를 듬뿍 담은 유실수로 조성된 우리 가든에서 사랑하는 연인과 가족, 친구와 멋진 추억을 만들어 보세요.</p> <h3>관람 안내</h3> <p id="p2">- 이용료 : 무료 입장<br> - 볼거리 : 장미 축제, 주제 정원, 이벤트 정원, 동물과 놀아주기<br> - 이용시간 : 10:00 ~ 17:00</p> </body>
ex3-3.html의 실행 결과
■ 클래스 선택자
클래스 선택자(Class Selector)는 웹 페이지에서 한 군데 이상의 특정 요소를 선택하여 CSS로 꾸미고자 할때 사용됩니다.
아이디 선택자가 하나의 특정 요소를 선택하는 데 반하여 클래스 선택자는 여러 군데의 요소를 선택할 수 있습니다.
클래스 선택자 사용 예
ex3-4.html
<style> p { line-height: 180%; } .blue { color: blue; font-weight: bold; } .red { color: red; text-decoration: underline; } </style> <body> <h1>우리 캠핑장</h1> <p>수원시에 위치한 우리 캠핑장은 <span class="blue">광교산 맑은 계곡물과 울창한 산림</span>에서
나오는 상쾌한 공기가 피부에 전해지는 공간으로 <span class="blue">야영 및 취사, 레크레이션, 피크닉</span> 등을 즐기실 수 있습니다.</p>
<h3>캠핑장 6월 이용 예약안내</h3> <p>캠핑장 예약은 <span class="red">5월25일 오후 2시부터 예약 가능</span>합니다.<br> <span class="red">예약 후 2시간 이내에 결제를 완료</span>하셔야 합니다. 2시간이 지나면 예약이 자동 취소 됩니다.
주말 이용시 캠핑장 진입로 정체가 심합니다.</p> <ul> <li>자세한 내용은 캠핑장 예약 페이지를 참고하여 주시기 바랍니다.</li> <li><span class="red">매주 월요일은 휴장</span>입니다.</li> <li>문의전화 : 031-123-1234</li> </ul> </body>
