선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려 주는 것이며, 선택자를 사용하는 방법은 미리 약속되어 있습니다.
전체 선택자
스타일을 모든 요소에 적용할 때 사용합니다. 또한, 전체 선택자는 웹 브라우저의 기본 스타일을 초기화 할 때 자주 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
* {
margin: 0;
}
</style>
</head>
<body>
</body>
‼️ 태그와 요소 구분하기 ‼️
HTML에서 태그(tag)와 요소(element) 라는 용어를 자주 만납니다.
태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그를 적용한 것을 가리킵니다.
<p>텍스트 단락 지정하기</p>
여기서 태그는 <p>와 </p>를 말하는 것이고 <p>텍스트 단락 지정하기</p> 이것을 '요소'라고 부릅니다.
타입 선택자
특정 태그를 사용한 모든 요소에 스타일을 적용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>비타민 C와 비타민 P가 풍부해</p>
</body>
클래스 선택자
위에서 살펴본 타입 선택자를 지정하면 그 태그를 사용한 모든 요소에 스타일을 적용할 수 있습니다.
그런데 같은 태그라도 일부는 다른 스타일을 사용하고 싶다면 클래스 선택자를 사용해야 합니다.
.클래스명 { 스타일 규칙 }
태그 안에 class="클래스명"을 지정해두면 클래스 스타일을 여러 곳에 적용할 수 있습니다.
또한, 요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic;
}
.accent {
border: 1px solid #000;
padding: 5px;
}
.bg {
background-color: #ddd;
}
</style>
</head>
<body>
<h1 class="accent bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span> 이라 불린다.</p>
<p>비타민 C와 비타민 P가 풍부해</p>
</body>
id 선택자
id 선택자도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용합니다.
마침표(.) 대신 # 기호를 사용하다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 같습니다.
#아이디명 { 스타일 규칙 }
클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것 입니다.
id 선택자는 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<style>
#container {
width: 500px;
margin: 10px auto;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<h1 class="accent bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span> 이라 불린다.</p>
<p>비타민 C와 비타민 P가 풍부해</p>
</div>
</body>
'Frontend > HTML, CSS' 카테고리의 다른 글
| [CSS] 케스케이딩 스타일 시트 알아보기 (0) | 2024.08.27 |
|---|---|
| [CSS] 스타일과 스타일 시트 (0) | 2024.08.26 |
| [CSS] CSS를 활용한 로그인 페이지 꾸미기 (0) | 2024.08.07 |
| [HTML] 로그인 화면 만들기 (0) | 2024.08.07 |
