[CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자
안녕하세요 PNcoding입니다 :)
이번 포스팅에선 CSS를 처음 사용하기 위해 필수인 선택자에 대해 알아보도록 할게요!
*선택자 란?
HTML의 태그를 선택하는 방법으로 원하는 태그를 선택 후 스타일을 지정할 수 있습니다.
1. 태그(tag) 선택자
HTML의 태그 즉, 요소(element)를 선택하는 방법입니다.
/* CSS 코드 */
div {
width: 100px;
height: 100px;
background-color: salmon;
}<!-- HTML코드 -->
<div>div 태그 1</div>
<div>div 태그 2</div>
<div>div 태그 3</div>
원하는 태그명을 작성 후 { } (중괄호)를 열어 CSS 속성을 작성을 하면 선택한 태그에게 스타일을 적용할 수 있습니다.
이때 body내의 선택한 모든 태그가 동일한 스타일이 적용됩니다.
2. 클래스(class) 선택자
요소(element)에 class 속성을 부여하여 동일한 class명을 가진 요소를 선택합니다.
/* CSS 코드 */
.box {
border: 5px solid black;
}<!-- HTML 코드 -->
<div class="box">div 태그 1</div>
<div>div 태그 2</div>
<div class="box">div 태그 3</div>
클래스 선택자는 태그 선택자와 다르게 선택을 할 땐 반드시 . 을 붙여 선택합니다.
예시)
.클래스명{ }
결과를 확인하면 클래스명이 작성 되지 않은 2번 요소를 제외한 1번, 3번 요소만 스타일이 적용된 결과를 볼 수 있습니다.
이로서 클래스 선택자는 클래스명으로 동일한 명의 요소만 스타일이 적용 된 걸 알 수 있습니다.
3. 아이디(id) 선택자
요소(element)에 id 속성을 부여하여 id명을 가진 요소를 선택합니다.
/* CSS 코드 */
#box_2 {
font-size: 20px;
color: white;
}<!-- HTML 코드 -->
<div class="box">div 태그 1</div>
<div id="box_2">div 태그 2</div>
<div class="box">div 태그 3</div>
아이디 선택자는 클래스 선택자와 비슷하지만 반드시 선택자명 앞에 # 을 붙여 사용합니다.
예시)
#아이디명{ }
결과 화면을 확인하면 아이디 선택자가 작성된 두번째 요소가 스타일이 적용된 걸 볼 수 있습니다.
아이디 선택자와 클래스 선택자는 . (마침표) 및 #을 작성하는게 다를 뿐 두 선택자는 비슷하게 보일 수 있습니다.
하지만 아이디 선택자를 사용할 시 주의하셔야 할 점이 있습니다.
두가지 차이점을 알아 보겠습니다.
1. 클래스 선택자
- 클래스명은 같은 이름으로 중복 사용 가능
- 같은 클래스명을 한번에 선택 가능
2. 아이디 선택자
- 아이디명은 body 내부에서 유일한 이름으로 사용해야 되며, 아이디명은 중복 사용 불가
- 클래스 선택자 보다 우선순위가 높음
따라서 두가지 차이점을 고려하여 선택자를 사용하는 것이 중요합니다.
이렇게 CSS 의 3가지 선택자 종류에 대하여 알아 보았습니다.
다음 포스팅에선 추가적인 선택자와 사용 방법에 대해 알아보도록 하겠습니다 :)