속성 class
- 요소(element, tag)들을 특정 클래스로 묶는 속성
- 주로 동일한 클래스(클래스명)에 속한 요소들에게 동일한 스타일을 적용하는 용도로 사용
- 요소가 같든 다르든 상관없다!
- ☝ The class name is case sensitive!
대소문자 구별됨!
<요소 class="클래스명1 클래스명2...">내용</요소>
CSS class
- 속성 class로 한 뒤
.클래스명{}으로 만든다.
= class값이 클래스명인 태그를 선택한다.- 다른 요소로 구분된다면
요소1.클래스명{},요소2.클래스명{}... 으로 한다.- 동일한 요소에 여러 클래스가 있는 경우, 가장 나중의 클래스가 적용된다.
.클래스명 { property:value; } 여러개라면 요소1.클래스명 { property:value; } 요소2.클래스명 { property:value; }
속성 id & CSS id
- 특정 태그에 특정한 고유의 속성을 부여할 때
- to specify a unique id for an HTML element.
- 아이디명은 딱 한번만 등장한다 !!
<요소 id="아이디명">내용</요소>
- 속성 id로 한 뒤
#아이디명{}으로 만든다.
= id값이 아이디명인 태그를 선택한다.
예)
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.capital {
text-decoration: underline;
padding: 20px;
}
#Korea {
color: yellow;
}
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>
<h2 class="city capital">London</h2>
<p>London is the capital of England.</p>
<h2 class="city capital" id="Korea">Seoul</h2>
<p>Seoul is the capital of Korea.</p>
<h2 class="city" id="Korea">Incheon</h2>
<p>Incheon is the city of Korea.</p>
</body>
</html>
1. class) city 와 capital 중 capital이 최근 것이므로, padding(내용content과 테두리border의 사이의 간격)이 20픽셀로 된다.
2. id) class와 텍스트color가 겹치지만, id가 더 우선순위가 높으므로 #Korea가 적용된다.
The class Attribute
Use CSS to style elements with the class name "city":
London
London is the capital of England.
Seoul
Seoul is the capital of Korea.
Incheon
Incheon is the city of Korea.
..마크다운이라서 그런걸까..
선택자의 우선순위
class선택자 & id선택자
| class선택자 | id선택자 |
|---|---|
| 포괄적 | 예외, 구체적 |
- id는 오로지 요소 1개만 특정하지만, class는 여러 요소들을 묶는다.
- 요소는 단 한 개의 id만 가지지만 여러개의 class를 가질 수 있다.
잘못이해한 것 같으니 다시 알아보자.🌟 단 한 개의 요소만이 단 한 개의 id를 갖는다. 🌟
우선순위
우선순위 : id선택자 > class선택자 > element선택자
우선순위 : #아이디명 > .클래스명 > 요소명
