wms's Programming&Study

[CSS] CSS 선택자① - id선택자, 클래스선택자 본문

Programming/CSS

[CSS] CSS 선택자① - id선택자, 클래스선택자

wms2275 2019. 9. 28. 03:16

우선 CSS파일을 따로 생성하지 않고 <head>부분에 스타일을 지정해 주었다. CSS파일을 생성해서 스타일을 지정할 경우 Chapter3을 참조하여 스타일을 지정하면 될 듯하다.

<style>태그에 스타일을 지정해주는 방법과 CSS파일에 지정해주는 방법은 같으나 우선순위는 다르다.

 

[전체 선택자 (Universal Selector)]

- 전체 선택자는 모든 요소를 선택하는 방법으로 *를 선택자로 선언한다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>전체 선택자 Universal Selector</title>
		<style>
			* {
				color: #00f;
			}
		</style>
	</head>
	<body>
		<h1>전체 선택자</h1>
		<p>전체 선택자를 사용하여 모든 요소에 동일한 스타일 선언을 지정할 수 있다.</p>
	</body>
</html>

▶ 결과 화면

전체 요소에 스타일을 일괄적으로 적용한다.

 

[클래스 선택자 (Class Selector)]

- 클래스 선택자는 HTML 요소의 class 속성 값을 참조하여 선택하는 방법.

이때 class 속성 값은 하나의 HTML 요소에 여러 개를 지정할 수 있기 때문에 다중 class를 선택자로 지정할 수도 있다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>클래스 선택자</title>
		<style>
			.note {
				font-size:		3.5em;
				font-weight:	bold;
				color:			#054D4A;
			}
		</style>
	</head>
	<body>
		<h1 class="note">클래스 선택자</h1>
		<p>클래스 선택자를 사용하여 특정 클래스가 지정된 요소에 스타일을 지정한다.</p>
		<p  class="note">클래스 선택자를 사용하여 특정 클래스가 지정된 요소에 스타일을 지정한다.</p>
		<p>클래스 선택자를 사용하여 특정 클래스가 지정된 요소에 스타일을 지정한다.</p>
	</body>
</html>

 

 

▶ 결과 화면

 

class에 네임을 지정한 후하고 싶은 class에만 스타일은 지정할 수 있다.

class에 스타일을 지정하는 경우 class 네임 앞에 .을 붙여서 사용한다.

 

[아이디 선택자 (ID Selector)]

- 아이디 선택자는 HTML 요소의 id 속성 값을 참조하여 선택하는 방법.

이때 id 속성 값은 하나의 HTML 문서에 한 번만 사용할 수 있기 때문에

아이디 선택자를 사용하면 유일한 요소를 선택할 수 있다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>아이디 선택자</title>
		<style>
			#main {
				font-weight:		bold;
				color:				#49AB2F;
				text-decoration:	underline;
			}
		</style>
	<body>
		<h1>아이디 선택자</h1>
		<p>아이디 선택자를 사용하여 특정 아이디가 지정된 요소에 스타일을 적용한다.</p>
		<p id="main">이 때 하나의 문서에는 중복된 아이디가 존재해서는 안된다.</p>
		<p>아이디 선택자를 사용하여 특정 아이디가 지정된 요소에 스타일을 적용한다.</p>
	</body>
</html>

▶ 결과 화면

 

id선택자도 class처럼 네임을 지정하여 하고 싶은 id에만 스타일을 지정할 수 있다.

id 같은 경우 id 네임 앞에 #을 붙여서 사용한다. id 네임은 중복이 안되므로 주의한다.

 

 

 

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

'Programming > CSS' 카테고리의 다른 글

[CSS] CSS 선택자③ - 선택자의그룹화  (0) 2019.09.30
[CSS] CSS 선택자② - 가상클래스선택자, 부모자식선택자  (0) 2019.09.29
'Programming/CSS' Related Articles more