class 선택자
요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것입니다.
class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 합니다.
class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수 있습니다.
class 속성에 값을 넣게 되면, class 선택자를 이용해서 해당 요소에 스타일 규칙을 적용할 수 있습니다.
.foo { font-size: 30px; }
<p class="foo"> ... </p>
위 코드처럼 <p>의 class 속성의 값으로 "foo"라는 값을 넣었다면, CSS에서
그 값("foo")을 선택자로 지정하면 됩니다.
클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어주셔야 합니다.
이렇게 되면 어느 요소든지 class 속성값이 "foo"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 됩니다.
그럼 이제 클래스 선택자를 이용해서 인트로에 제시했던 퀴즈를 풀어보겠습니다.
.html { color: purple; }
.css { text-decoration: underline; }
<dl>
<dt class="html">HTML</dt>
<dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt class="css">CSS</dt>
<dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>
다중 class
class 속성은 꼭 하나의 값만 가질 수 있는 것은 아닙니다.
공백으로 구분하여 여러 개의 class 값을 넣을 수 있습니다.
.foo { font-size: 30px; }
.bar { color: blue; }
<p class="foo bar"> ... </p>
위의 <p>에 class 속성에 "foo" 와 "bar" 2개의 값을 넣었습니다.
그리고 foo class 선택자에는 폰트의 크기를 30px로, bar class 선택자에는 글자를 파란색으로 적용하는 스타일 규칙이 선언되어있습니다.
그렇게 되면 이 <p>에는 2개의 규칙이 모두 적용이 됩니다.
id 선택자
id 선택자는 class 선택자와 비슷합니다.
선택자를 쓸 때는, .(마침표) 기호 대신 #(해시) 기호를 써주시면 되고,
요소에는 class 속성 대신 id 속성만 써주면 됩니다.
#bar { background-color: yellow; }
<p id="bar"> ... </p>
이 <p>는 id 선택자의 스타일 규칙이 적용됩니다.
class 선택자와의 차이점
- .기호가 아닌 #기호 사용
- 태그의 class 속성이 아닌 id 속성을 참조
- 문서 내에 유일한 요소에 사용
- 구체성
가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 점입니다.
클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있었습니다.
그리고 그것이 클래스 선택자의 장점이기도 합니다.
하지만 id 속성값은 문서 내에 유일하게 사용이 되어야 합니다.
결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐입니다.
그리고 마지막으로 구체성의 값이 다릅니다. (이에 대한 자세한 설명은 이후 구체성 수업에서 다룹니다.)
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
.item { background: gray; }
.a { color: yellow; }
.b { color: blue; }
#special { color: red; }
</style>
</head>
<body>
<ul>
<li class="item a">first</a>
<li class="item b">second</a>
<li class="item" id="special">third</a>
</ul>
</body>
</html>
comment
완료
1.12
class 선택자
. 기호 사용
class 속성
여러 요소에 같은 class를 넣어 동일한 규칙 적용 가능 : 다중 class
---
id 선택자
# 기호 사용
id 속성
문서 내에 유일한 요소에 사용, 한번만 사용 가능
---
중복하고 여러 요소 스타일링 = class
유일한 한가지 요소 스타일링 = id
---
우선순위
id > class > 요소
2023.01.17
class와 id 차이점. id는 유일하게 단한번만 쓸수있는거면 class가 짱인것인가..?!
class 선택자 : 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법
HTML에 class 속성을 추가
.foo { font-size: 30px; }
<p class="foo"> ... </p>
클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어준다.
다중 class
.foo { font-size: 30px; }
.bar { color: blue; }
<p class="foo bar"> ... </p>
2개의 규칙이 모두 적용
id 선택자
id 선택자를 쓸 때는, #(해시) 기호를 써준다.
#bar { background-color: yellow; }
<p id="bar"> ... </p>
class 선택자와의 큰 차이점
: id 선택자는 문서 내에 유일해야한다.
class 선택자 : 요소에 구애받지 않고 스타일규칙을 적용할 수 있는 가장 일반적인 방법. html수정이 필요함. global속성 중 class속성이 있음.
다중 class 공백으로 구분해서 여러개 넣을 수 있음
id 선택자 : .대신 #을 넣어주면 됨. class 속성 대신 id 속성을 넣어주면 됨
class 선택자와의 차이점 : 문서내에 "유일"한 요소에 사용, 구체성
가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 함
클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있음
하지만 id 속성값은 문서 내에 유일하게 사용이 되어야 함
결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐
( 한 번쓰면 다신 못씀..)
CLASS 선택자
<div class="wrap red">
</div>
.wrap {
background-color : black;
}
.red {
color: red;
}
div 태그 내 wrap, red 클래스가 적용되어 있으며,
CSS 파일 내 .클래스명을 이용한 클래스 선택자로 각각의 스타일 속성을 적용함.
ID 선택자
<div id="div-wrap">
</div>
#div-wrap{
background-color : black;
}
div 태그 내 div-wrap 아이디가 적용되어 있으며,
CSS 파일 내 #아이디명을 이용한 ID 선택자로 스타일 속성을 적용함.
ID는 문서 내 유일한 요소이기에, 단 한 번만 사용하기.
실습코드에서
<ul>
<li class="item a">first</a>
<li class="item b">second</a>
<li class="item" id="special">third</a>
</ul>
이 부분 코드가 잘못 들어간 것 같아요~
<li></a>로 잘못 닫혔어요. 아래가 맞지 않을까요?
<ul>
<li class="item a">first</li>
<li class="item b">second</li>
<li class="item" id="special">third</li>
</ul>
22.05.06
실습 코드 모르겠음..ㅠ
html에서 스타일 자체 적용한건가..?
12/22 완료
11.08일 아자아자 힘내장
0712
210709
210707
21.07.05
id속성은 여러 번 사용 가능하지만, id 속성값은 단 한 번만 유일하게 사용되어야 한다는 거죠? 오늘도 강의 잘 들었습니다! 만약 이게 아니라면 지적해주세요ㅎ
21.06.23
21.03.26
21.03.26