[CSS] CSS 선택자① - id선택자, 클래스선택자
우선 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 네임은 중복이 안되므로 주의한다.