주요 선택자
1. 전체 선택자
- 스타일을 모든 요소에 적용할 때 사용
- * (별표)를 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<h1>HTML5 웹 프로그래밍</h1>
</body>
</html>
h1 {background-color: lightseagreen;}
/* 마진과 패딩을 0으로 설정하여 브라우저 창에 바짝 붙게 함*/
* {
margin: 0;
padding: 0;
}
2. 태그 선택자
- 특정 태그가 쓰인 모든 요소에 스타일을 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<h1>제목 타이틀</h1>
<h2>소제목 타이틀1</h2>
<p>
내용내용내용내용내용내용내용....
</p>
<h2>소제목 타이틀2</h2>
<p>
내용내용내용내용내용내용내용....
</p>
</body>
</html>
h2 {color: blue;}
/* p 선택자를 정의하면 웹 문서의 모든 p 요소들에 스타일이 적용됨 */
p {
font-size: 12px;
margin-left: 20px;
}
3. 클래스 선택자
- 특정 부분에 스타일을 적용
- 같은 태그라도 각자 다른 스타일을 적용하고 싶을 경우에 사용
- 태그 이름과 겹치지 않기 위해 클래스명 앞에 . (마침표)를 붙임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.bluetext {color: blue;}
</style>
</head>
<body>
<h2 class="bluetext">제목 타이틀</h2>
<p>
<!--청춘예찬 내용 中-->
사는가 그들에게 앞이 것은 밥을 피어나기 영락과 것이다. <br>
밝은 인간에 생의 열매를 가는 보는 피다. 공자는 것은 주는 봄날의 못하다 그들은 보라. <br>
거친 크고 남는 피가 말이다. <br>
하는 발휘하기 곧 그들을 내려온 장식하는 얼마나 있는 교향악이다.
</p>
<p class="bluetext">
이상은 가는 크고 투명하되 뜨거운지라, 인간이 수 아름다우냐? <br>
내려온 군영과 실현에 되는 풀이 그들은 미인을 것이다.
</p>
</body>
</html>
- 텍스트 일부에만 클래스 스타일을 적용하고 싶다면, <span> 태그를 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.bluetext {color: blue;}
</style>
</head>
<body>
<h2 class="bluetext">제목 타이틀</h2>
<p>
<!--청춘예찬 내용 中-->
사는가 그들에게 앞이 것은 밥을 피어나기 영락과 것이다. <br>
밝은 인간에 생의 <span class="bluetext">열매</span>를 가는 보는 피다. <br>
거친 크고 남는 피가 말이다. <br>
하는 발휘하기 곧 그들을 내려온 장식하는 얼마나 있는 교향악이다.
</p>
<p class="bluetext">
이상은 가는 크고 투명하되 뜨거운지라, 인간이 수 아름다우냐? <br>
내려온 군영과 실현에 되는 풀이 그들은 미인을 것이다.
</p>
</body>
</html>
- 특정 태그에만 클래스를 적용하고 싶다면 클래스 선택자 앞에 태그 이름을 함께 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<h1>제목 타이틀</h1>
<h2 class="accent">HTML+CSS 웹 프로그래밍</h2>
<!--같은 h2 태그이지만 적용되는 스타일이 다름-->
<h2 class="bluetext">Java script 프로그래밍</h2>
</body>
</html>
/* Example */
/* h2 태그에만 accent 클래스를 적용 */
h2.accent {
background-color: #222;
color: #fff;
padding: 5px;
}
.bluetext {color: blue;}
- 한꺼번에 둘 이상의 클래스 스타일을 적용할 수도 있음 (공백으로 구분해서 두개의 스타일을 나란히 적음)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<h1>제목 타이틀</h1>
<p>
<!-- .brwontext 스타일과 .boldtext 스타일을 동시에 적용 -->
<!--별 헤는 밤 내용 中-->
아름다운 나는 파란 있습니다. <span class="browntext boldtext">별 소녀들의 별 </span>봅니다. <br>
별을 오면 이네들은 풀이 시와 보고, 노루, 하늘에는 거외다.
</p>
</body>
</html>
.browntext {color: brown;}
.boldtext {font-weight: bold;}
4. id 선택자
- 특정 부분에스타일 적용
- 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용
- # 기호를 사용함
- 클래스 선택자는 여러 번 사용할 수 있지만, id 선택자는 문서 안에서 한 번만 적용할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
/* id 선택자는 # 기호를 사용 */
#container {
width: 600px;
padding: 15px;
border: 1px dotted gray;
}
</style>
</head>
<body>
<!-- class가 아닌 id를 적어야 함 -->
<div id="container">
<h1>제목 텍스트</h1>
<!--별 헤는 밤 내용 中-->
<p>
것은 아직 남은 이네들은 써 어머님, 하나에 계십니다. 아름다운 별을 말 까닭입니다.
때 한 토끼, 별에도 딴은 버리었습니다.
</p>
<p>
위에도 노루, 불러 덮어 계집애들의 피어나듯이 이 있습니다.
너무나 이웃 이네들은 때 당신은 내 토끼, 멀리 듯합니다. 걱정도 가을 옥 이런 멀리 밤이 까닭입니다.
패, 아름다운 같이 까닭이요, 피어나듯이 별 잠, 무덤 아이들의 있습니다.
된 나는 다 계집애들의 강아지, 무성할 봅니다. 마리아 하나 하나에 노새, 하나에 가득 강아지, 있습니다.
</p>
<h2>소 제목 텍스트</h2>
</div>
</body>
</html>
5. 그룹 선택자
- 둘 이상의 요소에 같은 스타일 적용
- 여러 선택자에 같은 스타일이 사용되는 경우에 적용함
- , (쉼표)로 구분해 여러 선택자를 나열한 후, 스타일을 한 번만 정의하면 소스가 간단해짐
h1, h2 {
text-align: center;
}
'Front-End Study > HTML+CSS' 카테고리의 다른 글
| 가상 요소 (0) | 2022.10.12 |
|---|---|
| 테이블 관련 태그 정리 (0) | 2022.10.12 |
| 주석처리 (0) | 2022.10.06 |
| position 속성 정리 (0) | 2022.10.04 |
| 노멀라이즈 (0) | 2022.09.29 |