1. 전체 선택자
문서의 모든 요소에 스타일을 적용
( * 기호를 사용한다.)
* {속성:속성값;}
* {margin:0; padding:0;} /*예시*/
2. 타입 선택자
선택자로 쓴 태그를 사용한 모든 요소에 스타일을 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<div>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
p 선택자 사용 -> p 태그를 쓴 3개의 요소에 스타일 모두 적용
3. 클래스 선택자
같은 태그라도 일부는 다른 스타일을 적용하거나
요소 하나에 클래스 스타일 2개 이상 적용
(클래스 선택자 앞에 . 붙이기)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
font-style: italic; /* 이탤릭체 */
}
.accent {
border:1px solid #000; /* 테두리 */
padding:5px; /* 테두리와 내용 사이의 여백 */
}
.bg {
background-color:#ddd; /* 배경색 */
}
</style>
</head>
<body>
<div>
<h1 class="accent bg">레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
h1 태그는 accent와 bg 스타일 동시 적용
span 태그는 accent 스타일만 적용
4. 아이디 선택자
문서에서 스타일을 한 번만 적용
(아이디 선택자 앞에 # 붙이기)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
#container {
width:500px; /* 너비 */
margin:10px auto; /* 바깥 여백 */
padding:10px; /* 테두리와 내용 사이 여백 */
border:1px solid #000; /* 테두리 */
}
</style>
</head>
<body>
<div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
div 태그에 아이디를 사용 -> 아이디 선택자 때문에 내부에 묶인 내용 전체에 스타일 적용
5. 그룹 선택자
여러 선택자에 같은 스타일을 적용
h1, p {color:red;}
더보기
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.
'CSS' 카테고리의 다른 글
| 목록 스타일 (0) | 2022.11.12 |
|---|---|
| 텍스트 관련 스타일 (0) | 2022.11.12 |
| 구글 폰트 사용하기 (0) | 2022.11.11 |
| 글꼴 관련 스타일 (0) | 2022.11.10 |
| 스타일과 스타일 시트 (0) | 2022.11.10 |