728x90
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자 예제</title> <!-- 띄어주는 창의 맨 위 제목 -->
<style>
/* 선택자의 종류 (순서상으로 변경이 된다. ~!! 진행순서 신경쓰기 )
1. 전체 선택자 : *
- html문서상 모든 요소를 선택되어 적용이 된다.
*/
*{
color: darkorange;
}
/*
2. 태그 선택자: 태그이름
*/
h2{
color: aqua;
}
/*
3. 스타일 구분지어 지정하고 싶을 때 > class, id 속성 사용
- class : 중복가능, 재사용 가능
- id : 중복 불가능, 하나의 html문서상 한번만 사용가능
(로고, 검색창, 상단바 같은 고유한 디자인에 사용됨)
*/
/*
클래스 선택자 : .클래스
*/
.like {
color: chartreuse;
}
/*
id 선택자 : # id이름
*/
#nap {
color: crimson;
}
</style>
</head>
<body>
<h1> 나를 행복하게하는 것 </h1>
<span class="like">돈</span> <br>
<span class="like" id="nap">잠</span> <br>
<span class="like">빵</span>
</body>
출처: 스마트인재개발원
728x90
반응형
'DATA 분석 교육 과정 (2024.02~08) > CSS' 카테고리의 다른 글
| css_ (0) | 2024.04.05 |
|---|---|
| CSS_조합선택자 (0) | 2024.04.05 |
| CSS_기본 구조 (0) | 2024.04.05 |
