CSS 선택자 (1)
본문 바로가기

CSS 선택자 (1)

액트 2020. 2. 24.

선택자(selector)

CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다.

지금까지 살펴본 대표적인 선택자는 다음과 같습니다.

  •  전체 선택자
  •  HTML 요소 선택자
  •  아이디(id) 선택자
  •  클래스(class) 선택자
  •  그룹(group) 선택자

 

전체 선택자

CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다.

<style>

    * { color: red; }
    
</style>

 

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.

<style>

    h2 { color: teal; text-decoration: underline; }
    
</style>

...
<h2>이 부분에 스타일을 적용합니다.</h2>

 

아이디(id) 선택자 - #

아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다.

이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다.

아이디(id) 선택자는 css 작성 시 # 으로 표시한다.

<style>

    #heading { color: sandybrown; text-decoration: line-through; }

</style>

...

<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작합니다.

하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생합니다.

따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋습니다.

 

클래스(class) 선택자 - .

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다.

이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택해 줍니다

클래스(class) 선택자는 css 작성 시 . 으로 표시한다

<style>

    .headings { color: deepskyblue; text-decoration: overline; }

</style>

...

<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>

<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>

<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

 

그룹 선택자

그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용합니다.

그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결합니다.

이러한 그룹 선택자는 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 줍니다.

<style>

    h2 { color: navy; }

    h2, h3 { text-align: center; }

    h2, h3, p { background-color: lightgray; }

</style>

 

자손 선택자(descendant selector)

자손 선택자는 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택합니다.

다음 예제는 모든 <div>태그의 하위 요소 중에서 <p>태그를 모두 선택하는 예제입니다.

자손 선택자는 하위 선택자를 한 칸 띄워쓰기로 명시한다.

<style>

    div p { background-color: #FFEFD5; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Combinators</title>
	<style>
		div{ border: 3px solid #CD853F; }
		div p { background-color: #FFEFD5; }
	</style>
</head>

<body>

	<h1>자손 선택자를 이용한 선택</h1>
	<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>
	<div>
		<p>div 태그 내부의 p 태그만 선택됩니다!</p>
		<p>div 태그 내부의 p 태그만 선택됩니다!</p>
		<p>div 태그 내부의 p 태그만 선택됩니다!</p>
	</div>
	<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>

</body>

</html>

자손 선택자(descendant selector)

 

자식 선택자(child selector)

자식 선택자는 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택합니다.

다음 예제는 모든 <div>태그의 바로 밑에 존재하는 하위 요소 중에서 <p>태그를 모두 선택하는 예제입니다.

<style>

    div > p { background-color: #FFEFD5; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Combinators</title>
	<style>
		div{ border: 3px solid #CD853F; }
		div > p { background-color: #FFEFD5; }
	</style>
</head>

<body>

	<h1>자식 선택자를 이용한 선택</h1>
	<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>
	<div>
		<p>div 태그 바로 밑에 존재하는 p 태그만 선택됩니다!</p>
		<p>div 태그 바로 밑에 존재하는 p 태그만 선택됩니다!</p>
		<span>
			<p>이 p 태그는 span 태그로 둘러 쌓여 있습니다.<br>
				따라서 div 태그 바로 밑에 존재하는 p 태그가 아니므로 선택되지 않습니다!
			</p>
		</span>
	</div>
	<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>

</body>

</html>

자식 선택자(child selector)

 

동위 선택자(sibling selector)

동위 선택자는 동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다.

동위 관계란 HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들을 의미합니다.

이러한 동위 관계에 있는 요소들을 형제(sibling) 요소라고 합니다.

동위 관계에 있는 요소, 사진 출처 TCPSCHOOL.com

위의 그림에서 초록색으로 표시된 세 요소는 모두 <body>요소를 부모 요소로 가집니다.

따라서 이 세 요소는 동위 관계에 있는 형제 요소라고 할 수 있습니다.

 

일반 동위 선택자(general sibling selector)

일반 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다.

일반 동위 선택자는 ~ 으로 표시합니다.

다음 예제는 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그보다 뒤에 존재하는 <p>태그를 모두 선택하는 예제입니다.

<style>

    div ~ p { background-color: #FFE4E1; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Sibling Selectors</title>
	<style>
		div{ border: 3px solid #F08080; }
		div ~ p { background-color: yellow; }
	</style>
</head>

<body>

	<h1>일반 동위 선택자를 이용한 선택</h1>
	<p>이 p 태그는 div 태그의 sibling 이지만 div 태그보다 앞에 나옵니다!</p>
	<div>
		<p>이 p 태그는 div 태그의 child 입니다!</p>
		<p>이 p 태그는 div 태그의 child 입니다!</p>
		<p>이 p 태그는 div 태그의 child 입니다!</p>
	</div>
	<p>(선택)이 p 태그는 div 태그의 sibling 입니다!</p>
	<p>(선택)이 p 태그는 div 태그의 sibling 입니다!</p>

</body>

</html>

일반 동위 선택자(general sibling selector)

 

인접 동위 선택자(adjacent sibling selector)

영어로 adjacent는 인접한, 가까운 이라는 의미가 있습니다.

인접 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택합니다..

인접 동위 선택자는 + 로 표시합니다.

다음 예제는 모든 <div>태그와 동위 관계에 있는 요소 중에서 <div>태그의 바로 뒤에 존재하는 <p>태그를 모두 선택하는 예제입니다.

<style>

    div + p { background-color: #FFE4E1; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Sibling Selectors</title>
	<style>
		div{ border: 3px solid #F08080; }
		div + p { background-color: #FFE4E1; }
	</style>
</head>

<body>

	<h1>인접 동위 선택자를 이용한 선택</h1>
	<div>
		<p>이 p 태그는 div 태그의 sibling 입니다!</p>
		<div>
			<p>이 p 태그는 div 태그의 child 입니다!</p>
		</div>
		<p>이 p 태그는 div 태그 바로 뒤에 나오는 sibling 입니다!</p>
		<p>이 p 태그는 div 태그의 sibling 입니다!</p>
	</div>
	<p>이 p 태그는 div 태그 바로 뒤에 나오는 sibling 입니다!</p>
	<p>이 p 태그는 div 태그의 sibling 입니다!</p>

</body>

</html>

인접 동위 선택자(adjacent sibling selector)

 

의사 클래스(pseudo-class)

CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용합니다.

 

의사 클래스의 문법

의사 클래스(pseudo-class)를 사용하기 위한 문법은 다음과 같습니다.

선택자:의사클래스이름 {속성: 속성값;}

클래스(class)나 아이디(id)에도 의사 클래스(pseudo-class)를 사용할 수 있습니다.

선택자.클래스이름:의사클래스이름 {속성: 속성값;} 

선택자#아이디이름:의사클래스이름 {속성: 속성값;}

 

동적 의사 클래스(dynamic pseudo-class)

링크는 총 5가지의 상태를 가지며, 각 상태마다 별도의 스타일을 적용할 수 있습니다.

CSS에서 사용할 수 있는 동적 의사 클래스는 다음과 같습니다.

  1.  :link : 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.
  2.  :visited : 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태입니다.
  3.  :hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다.
  4.  :active : 사용자가 마우스로 링크를 클릭하고 있는 상태입니다.
  5.  :focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.

※ :hover는 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.

※ :active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작합니다.

동적 의사 클래스를 사용하면 링크의 상태에 따라 각각의 스타일을 별도로 설정할 수 있습니다.

예제) link, visited, hover, active

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Dynamic Selectors</title>
	<style>
		a:link {color: orange;}
		a:visited {color: gray;}
		a:hover {color: blue;}
		a:active {color: red;}
		div {
			background-color: orange;
			width: 300px;
			padding: 20px;
			text-align: center;
		}
		div:hover {
			background-color: blue;
			color: white;
		}
	</style>
</head>

<body>

	<h1>링크 선택자를 이용한 선택</h1>
	<p><a href="#">홈으로 가기!</a></p>
	<div>링크 선택자를 이용한 버튼 만들기!</div>

</body>

</html>

동적 의사 클래스(dynamic pseudo-class)

예제) focus

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Dynamic Selectors</title>
	<style>
		input {
			border: 3px solid #FFEFD5;
			width: 300px;
			padding: 10px;
			outline: none;
			transition: 0.5s;
		}
		input:focus { border: 3px solid #CD853F; }
	</style>
</head>

<body>

	<h1>input 요소의 스타일 설정</h1>
	<form>
		아래의 입력 양식을 마우스로 클릭해 보세요!<br><br>
		<input type="text" id="email" name="email" value="마우스로 클릭해 보세요!">
	</form>

</body>

</html>

 - 마우스 클릭 안한 상태

focus

 - 마우스 클릭한 상태

focus

 

 

상태 의사 클래스(UI element states pseudo-class)

상태 의사 클래스를 사용하면 입력 양식의 상태에 따라 각각의 스타일을 별도로 설정할 수 있습니다.

CSS에서 사용할 수 있는 상태 의사 클래스는 다음과 같습니다.

의사 클래스 설명
:checked 체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled 사용할 수 있는 input 요소를 모두 선택함.
:disabled 사용할 수 없는 input 요소를 모두 선택함.

 

:checked

:checked는 input 요소 중에서 체크된(checked) 상태의 input 요소를 선택합니다.

<style>

    input { color: #FFEFD5; }

    input:checked + span { color: #CD853F; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS State Selectors</title>
	<style>
		span { margin-left: 5px; }
		input { color: #FFEFD5; }
		input:checked + span { color: #CD853F; }
	</style>
</head>

<body>

	<h1>input 요소의 스타일 설정</h1>
	<form>
		<input type="checkbox" name="lecture" value="html" checked="checked"><span>HTML</span><br>
		<input type="checkbox" name="lecture" value="css"><span>CSS</span><br>
		<input type="checkbox" name="lecture" value="java"><span>JAVA</span><br>
		<input type="checkbox" name="lecture" value="cpp"><span>C++</span>
	</form>

</body>

</html>

:checked

 

:enabled와 :disabled

:enabled는 input 요소 중에서 사용할 수 있는 input 요소를 선택합니다.

또한, :disabled는 input 요소 중에서 사용할 수 없는 input 요소를 선택합니다.

<style>

    input { color: #FFEFD5; }

    input:disabled + span { color: #CD853F; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS State Selectors</title>
	<style>
		span { margin-left: 5px; }
		input { color: #FFEFD5; }
		input:disabled + span { color: #CD853F; }
	</style>
</head>

<body>

	<h1>input 요소의 스타일 설정</h1>
	<form>
		<input type="checkbox" name="lecture" value="html" checked="checked"><span>HTML</span><br>
		<input type="checkbox" name="lecture" value="css"><span>CSS</span><br>
		<input type="checkbox" name="lecture" value="java"><span>JAVA</span><br>
		<input type="checkbox" name="lecture" value="cpp" disabled="disabled"><span>C++</span>
	</form>

</body>

</html>

:enabled와 :disabled

 

 

 

[출처] TCPSCHOOL.com

저작자표시 비영리 변경금지

'IT > Web' 카테고리의 다른 글

CSS 네비게이션 바(navigation bar) 링크, 수직, 수평  (0) 2020.03.20
CSS 선택자 (2)  (0) 2020.03.19
CSS 위치 속성 - Float(플로트), align(정렬)  (0) 2020.02.20
CSS 위치 속성 - display, position  (0) 2020.02.14
CSS 박스 모델 - 박스 모델, 패딩, 테두리, 마진, 아웃라인  (2) 2020.02.13

관련글

댓글

티스토리툴바