1. CSS에서 id와 class의 차이점은?
id 선택자와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것이다.
id의 속성이 class의 속성보다 우선 순위가 높다.
| id | class | |
|---|---|---|
| 적용 가능한 개수 | 1개 | 여러개 |
| 사용되는 경우 | 스타일 정의 ( 로고, 상단메뉴, 하단정보 ) | 반복 사용되는 스타일 |
| 사용법 | #id명 | .class명 |
여기서 잠깐! 만약 id가 여러 개 있다면 어떻게 처리될까?
<body>
<div>
<button id="btn">button1</button>
<button id="btn">button2</button>
<button id="btn">button3</button>
</div>
<script src="index.js"></script>
</body> #btn {
font-size: 10px;
color: cornflowerblue;
}아래와 같은 결과를 화면에서 확인 가능하다.
이처럼 동일한 id값을 다른 태그에 하나씩만 준다면 무리없이 스타일이 정상적으로 작동한다.
이번에는 javaScript 코드를 적용해보자.
(() => {
document.getElementById('btn').addEventListener('click', () => {
console.log('버튼입니다.');
});
})();
코드를 적용했을 경우
첫번째 button1 에만 코드가 적용되고
button1와 button2에는 적용이 되지 않는 것을 확인할 수 있다.
2. CSS 선택자 종류 알아보기
대표적인 선택자 5가지에 대해 알아보자.
1. 전체 선택자
- HTML 페이지 내부의 모든 태그를 선택
- margin이나 padding값을 초기화하는 등 기본값을 정할 때 사용
* { margin: 0; text-decoration: none;}
2. 태그 선택자
- HTML 요소를 직접 지칭하는 가장 간단한 선택자
p { background: red; color: yellow;}
3. class 선택자
- 주어진 값을 class 속성값으로 가진 HTML요소를 찾아 선택
.className { font-size: 10px; color: cornflowerblue; }
4. ID 선택자
- 글래스 선택자와 매우 유사
#className { font-size: 10px; color: cornflowerblue; }
5. 복합 선택자
- 두 개 이상의 선택자 요소가 모인 선택자
section ul { font-size: 10px; color: cornflowerblue; }
section>ul { font-size: 10px; color: cornflowerblue; }
Reference
hello world!