CSS 선택자

타입 선택자

html 태그의 이름을 css에서 호출해서 사용하는 방식

사용예

html에서

<h2>제목<strong>1 수선화</strong></h2>
<p><strong>수선화</strong>는 꽃이다</p>

css에서

h2{font-size:20px;}
strong{color:#ff0000;}
p{font-size:15px;}
/*html태그에서 사용한 태그를 css에서 태그의 명만 불러서 스타일을 선언하면 그 태그를 사용한 모든 곳에서 동일한 스타일 적용됨.*/

ID(아이디) 선택자

html 요소에 id="아이디명" 이라는 속성값을 추가해주면 css에서 #아이디명 이라고 스타일을 선언해서 사용하는 방식
아이디명은 한페이지에서 절대 중복사용 불가능합니다. (동일한 이름을 두번 사용 불가)
html요소 중에서 레이아웃에 크게 영향을 끼치는 요소만 id로 지정 (안줘도 됨)

class(클래스) 선택자

html 요소에 class="클래스명"이라는 속성값을 추가해주면 css에서 .클래스명 이라고 스타일 선언해서 사용하는 방식
클래스명은 영어, 숫자, 언더바(_)만 가능하고 첫글자는 무조건 영어만 가능
클래스명은 태그명은 피하고, 클래스명은 중복사용가능하고, 그 영역의 목적에 맞게 의미에 맞게 네이밍을 정하는게 중요.

사용예

html에서

<h2>제목<span class="point">1 수선화</span></h2>
<p><strong class="point">수선화</strong>는 꽃이다</p>

css에서

.point{color:#ff0000;text-decoration:underline;}
/* html태그에서 class속성으로 선언된 이름(클래스명) 앞에 .(점)을 추가해서 css에서 호출하는 방식
css에서 선택자를 구분할때 .(점)이 없으면 태그명이고, .(점)이 있으면 class명임 */

css에서 class를 호출하는 또 다른 방식

span.point{color:#ff0000;} /* span.point 는 span태그 중에서 class명이 point인 요소 만..을 의미한다 */
.notice.on{color:#0000ff;} /* 하나의 요소에 notice라는 클래스와 on이라는 클래스가 동시에 선언된 경우(<div class="notice on">)*/

중복사용예

html에서

<div class="service on">우산 대여</div>
<div class="service">충전기 대여</div>
<div class="service">유모차 대여</div>
<!-- 이때 service와 on 클래스를 동시에 선언하려면 두개의 클래스명 사이에 반드시 한칸의 여백을 줘야함. (여러개의 클래스를 동시에 선언가능)-->

css에서

.service{float:left; width:300px; height:200px; background:#ededed; border:1px solid #ccc;}
/* service클래스가 선언된 모든 요소에 적용 */
.service.on{background:#fff; border:1px solid #ff6600;}
/* service클래스와 on 클래스가 동시에 선언된 우산 대여에만 추가적으로 적용 (최종적으로 우산대여는 float:left; width:300px; height:200px; background:#fff; border:1px solid #ff6600;)의 css가 적용됨
service클래스와 on클래스를 동시에 선언한 요소를 선택할때는 반드시 여백없이 .service.on 이라고 써줘야함.*/

자손 선택

자손 선택으로 선택할 수 있는 요소는 반드시 태그가 감싸여 있는 구조이어야만 가능 (시작태그와 종료태그로 감싸여 있어야 함)

사용예

html에서

	<div class="visual">
		<h2><em>비쥬얼</em> 팝업(visual popup)</h2>
		<p>화면 가로를 100% 차지하는 <strong>큰 팝업</strong></p>
	</div>
	<div class="notice">
		<h2><em>공지</em>사항</h2>
		<p>홈페이지 공지사항을 흔히 <strong class="point">notice</strong>라고 네이밍함</p>
	</div>

css에서 띄어쓰기 매우 주의!!!

.visual h2{color:red;} /*visual이라는 클래스명을 가진 요소 안에 감싸여있는 h2태그*/
.notice h2{color:blue;}
h2 em{ } /* h2태그 안에 감싸여 있는 em태그 */
p strong{ }
div.notice{ }/* div태그중에 notice라는 클래스명을 가진 요소 */
.notice .point{ } /* notice라는 클래스명을 가진 요소 안에 감싸여있는 point라는 클래스 명을 가진 요소 */
.notice h2 em{ }
.notice em{ }
.notice strong.point{ }/* notice라는 클래스명을 가진 요소 안에 감싸여있는 strong태그 중에 point라는 클래스 명을 가진 요소 */

자식 선택자

감싸고 있는 요소들을 하나도 빠짐없이 순서대로 불러야 하는 css 선택방식, 동일한 태그가 반복적으로 사용될때 사용

사용예

html에서

	<nav>
		<ul>
			<li>
				<a href="#">1차 메뉴1</a>
				<ul>
					<li><a href="#">2차 메뉴1</a></li>
					<li><a href="#">2차 메뉴2</a></li>
				</ul>
			</li>
			<li>
				<a href="#">1차 메뉴2</a>
				<ul>
					<li><a href="#">2차 메뉴3</a></li>
					<li><a href="#">2차 메뉴4</a></li>
				</ul>
			</li>
		</ul>
	</nav>

css에서

nav ul li a{ }/*이렇게 선택하면 1차메뉴의 a와 2차메뉴의 a 모두가 선택된다. */
nav>ul>li>a{ } /*1차메뉴 a를 선택하는 방법*/
nav>ul>li>ul>li>a{ } /*2차메뉴 a를 선택하는 방법*/

nav>ul>ul{ } /*이렇게 선택하면 아무것도 선택되지 않음 (중간 li가 빠져있으므로)*/

2차메뉴 li를 선택할 경우는 그 태그르 감싸고 있는 nav>ul>li>ul을 모두 써야 한다. (a태그는 감싸는 태그가 아니므로 생략가능)
자손선택은 "손주"이기 때문에 아빠빼고, 길동이네집 손주 개똥이라고 부를 수 있으나, 자식선택은 반드시 아빠까지 포함해서 선언해야함.

다중 선택자

여러 요소를 한꺼번에 선택하여 동일한 스타일을 적용하고자 할때 사용

사용예

html에서

	<div class="bbs">
		<div class="notice">
			<h2>공지사항</h2>
			<ul>
				<li><a href="#n">공지사항 1</a></li>
			</ul>
			<a href="#n">더보기</a>
		</div>
		<div class="news">
			<h2>최신뉴스</h2>
			<ul>
				<li><a href="#n">최신뉴스 1</a></li>
			</ul>
			<a href="#n">더보기</a>
		</div>
	</div>

css에서

.bbs .notice h2, .bbs .news h2{ }
/*공지사항과 최신뉴스 모두에 동일한 스타일을 적용하고자 할때 사용하는 스타일로 선택자 사이를 쉼표(,)로 연결*/