목차
- id/class 예제
- id/class 기호
- id/class 우선순위
- 선택자 우선순위 (= CSS 적용 순서) ※ 명시도
- id 특징
- class 특징
- id/class 대소문자 구별 예제
- id/class 명명 시 주의사항
- id 사용 필요성 (= id 사용 장점)
- id・class 바른 사용법
※ id / class 선택자는 가장 널리 사용되니, 꼼꼼히 공부 권장.
id/class 예제
#hz {text-decoration:underline; color:green;}
.hz {text-decoration:none; color:green;}
#hz .site {color:red;}
#hz .host {color:blue;}
.site {color:yellow}
.host {color:yellow}
</style>
<div id="hz" class='hz'>
<p class='site'>홈짱닷컴</p>
<p class='host'>Homzzang.com</p>
</div>
id/class 기호
- # (샾)으로 선언한 스타일 : id (아이디) 속성으로 연결됨.
- . (마침표)로 선언한 스타일 : class (클래스) 속성으로 연결됨.
id/class 우선순위
id > class > 요소명
PS.
- # (아이디)는 . (클래스)보다 상위 선택자임.
- 즉, 동일 요소에 class와 id 중복 정의 시, id 스타일이 우선 적용됨.
선택자 우선순위 (= CSS 적용 순서) ※ 명시도
1. 중요도 (!important > 인라인 > 아이디 > 클래스 > 요소)
- 예제 : span {color:red !important;}
- 속성값과 !important는 붙어도 됨. span {color:red!important;}
- HTML 구조 개선해, !important 키워드는 되도록 사용 않는 게 좋음.
2. 명시도
- 명시도 다를 시, 숫자가 높은 게 우선 적용.
3. 순서
- 명시도 동일 시, 나중에 정의된 것이 우선 적용.
4. 주체 - Author 정의 > User 정의 > Browser 정의
- Author : 홈피 쥔장 정의 CSS
- User : 사용 회원 정의 CSS
- Browser : 브라우저 기본 정의 CSS
[예제1] - (아이디 > 클래스 > 요소) 우선순위
<style>
#id {color:green;}
.class {color:blue;}
div {color:red;}
</style>
<div id='id' class='class'>
홈짱닷컴 (Homzzang.com)
</div>
결과 보기
[예제2] - (인라인 스타일 > 아이디 > 클래스 > 요소) 우선순위
<style>
#id {color:green;}
.class {color:blue;}
div {color:red;}
</style>
<div id='id' class='class' style='color:magenta'>
홈짱닷컴 (Homzzang.com)
</div>
결과 보기
[예제3] - 인라인스타일 방식 경우, 위치 상관없이 우선적용.
<style>
#id {color:green;}
.class {color:blue;}
div {color:red;}
</style>
<div style='color:magenta' id='id' class='class' >
홈짱닷컴 (Homzzang.com)
</div>
결과보기
[예제4] - 명시도가 높으면 동일 속성이 앞에 선언되어도 우선 적용됨.
※ 아래 예제는 위쪽에 있는 선택자일수록 명시도 높아, 회색이 적용됨.
<style>
h1#hz {color:gray;}
#hz {color:magenta;}
h1.hz {color:green;}
.hz {color:red;}
h1 {color:blue;}
body {color:tomato;}
</style>
<h1 id='hz' class="hz">홈짱닷컴 Homzzang.com</h1>
결과보기
id 특징
1. 선택 영역 첫 머리에서 한 번만 사용해야 함. (즉, 유일해야 함.) ★
(예) id="memo"
2. 대소문자 구별 O
(예) id="HZ"과 id="hz"은 다름.
[사용 불가 예제 1] - 아이디 a만 적용됨. (※ 나중 선언된 b는 적용 X)
<style>
#a {color:red; font-size:30px;}
#b {color:blue; font-size:18px;}
</style>
<div id='a' id='b'>홈짱닷컴 (Homzzang.com)</div>
결과보기
[사용 불가 예제 2] - 둘 다 적용 X (∵ ID 속성값은 유일해야 하므로)
<style>
#a {color:red; font-size:30px;}
#b {color:blue; font-size:18px;}
</style>
<div id='a b'>홈짱닷컴 (Homzzang.com)</div>
결과보기
class 특징
1. id로 선택한 영역에서 동일 class 여러 번 사용 가능.
(예)
<li class='hz'>홈짱닷컴</li>
<li class='hz'>Homzzang.com</li>
...........
2. 대소문자 구별 O. ★
(예)
class="content" 와 class="CONTENT"는 다르게 취급.
3. 한 요소에 여러 class 사용 가능.
(1) HTML class 속성의 값 위치와 무관하게 여러 클래스 모두 적용되나, 동일 속성의 경우 나중 정의된 CSS 속성값이 적용됨. ★
<style>
.a {color:red;}
.b {color:blue;}
</style>
<p class='a b'>Homzzang.com</p>
<p class='b a'>Homzzang.com</p>
(2) 아래처럼 속성이 다르면 두 속성의 값이 모두 두 요소에 적용됨.
<style>
.a {color: red;}
.b {background-color: blue;}
</style>
<p class='a b'>Homzzang.com</p>
<p class='b a'>Homzzang.com</p>
4. class는 id와 동일하게 명명해도 됨.
(예제)
<div id="hz" class="hz">....</div>
id/class 대소문자 구별 예제
※ id/class 둘 다 대소문자 구별 O.
<!DOCTYPE html>
<html>
<head>
<title>ID/CLASS 대소문자 구분</title>
<style>
#HZ {color:red;}
#Hz {color:blue;}
#hz {color:green;}
.HZ {border:1px solid red;}
.Hz {border:1px solid blue;}
.hz {border:1px solid green;}
</style>
</head>
<body>
<p id="HZ" class="HZ">#HZ, .HZ</p>
<p id="Hz" class="Hz">#Hz, .Hz</p>
<p id="hz" class="hz">#hz, .hz</p>
</body>
</html>
결과보기
id/class 명명 시 주의사항
[CSS id 선택자 명명 규칙]
- 숫자로 시작 금지. ★
- "언더코어( _ ) / 하이픈( - )" 제외한 특수문자 사용 금지. ★
자세히 보기
[HTML id 속성 명명 규칙]
- 최소 1글자 이상
- 공백 포함 금지
PS. HTML4.X 땐 체약 여러가지였으나, HTML5 경우 위 2가지만 존재.
id 사용 필요성 (= id 사용 장점)
동일 class명의 다른 선택자 영향으로 인한 스타일 깨짐 방지.
[예제]
<style>
#memo .title {color:red; font-size: 20pt;}
#memo .content {color:blue; font-size: 11pt;}
</style>
<section id="memo">
<p
class="title">글 제목</p>
<p
class="content">여기는 글 내용입니다.</p>
id・class 바른 사용법
id로 고유 영역 지정 후, 그 안에서 class 사용해 정의 권장.
[예제1] - 바람직 X (∵ 각각을 모두 id로 처리해 관리 불편.)
<style>
#title{color:red; font-size: 20pt;}
#content{color:blue; font-size: 11pt;}
</style>
<p id="title">글 제목</p>
<p id="content">여기는 글 내용입니다.</p>
결과보기
[예제2] 바람직 X (∵ id 미지정으로 인해, 다른 선택자 영향 받을 위험)
<style>
.title {color:red; font-size: 20pt;}
.content {color:blue; font-size: 11pt;}
</style>
<p class="title">글 제목</p>
<p class="content">여기는 글 내용입니다.</p>
결과보기
