Seletor란 무엇인가? 왜 필요할까?
* 예시 코드
<head>
<style>
a {
color: red;
}
</style>
</head>
위의 코드에서 a { color: red; } 이 부분이 뜻하는 것은 "모든 a태그의 텍스트 컬러를 red로 바꿔라"입니다.
style태그는 html언어이고 color: red;는 css언어입니다.
그리고 a{} 이 부분은 selector(선택자)라고 부릅니다.
{} 안에 작성된 css언어를 누구에게 적용시킬 것이냐, 그 누구를 지정하는 것이 selector입니다.
a {}는 모든 a태그를 지칭하기 때문에 color: red; 라는 css는 모든 a태그에 적용이 되는 것이죠.
selector를 사용하면 각 태그마다 일일이 style속성을 지정해서 사용할 필요가 없이 일괄 적용되므로 html 각 태그마다 일일이 style 속성을 넣어주는 것보다 훨씬 코드를 짜기도 편리하고 유지보수도 쉽습니다.
* 각 태그별로 일일히 지정하는 안 좋은 예시
<a href="/" style="color: red">홈페이지</a>
<a href="/menu1" style="color: red">메뉴1</a>
<a href="/menu2" style="color: red">메뉴2</a>
<a href="/menu3" style="color: red">메뉴3</a>
밑의 예시코드를예시 코드를 보고 위의 예시 코드를 보니 selector가 얼마나 일을 효율적으로 할 수 있게 도와주는지 바로 와닿지 않나요?
그럼 이제 가장 기본적이면서도 가장 많이 쓰이는 id, class, tag seletor에 대해서 알아보겠습니다.
tag selector
tag selector에 css style을 부여하면 모든 해당 tag에 적용됩니다.
tag selector를 사용하는 방법은 다음과 같습니다.
태그명 { 속성: 속성값; }
* 예시코드
span {
color: blue;
}
이 스타일이 적용되는 html 파일 내에 있는 모든 span태그는 텍스트 컬러가 blue가 됩니다.
class selector
class selector에 css style을 부여하면 해당 class명을 가진 모든 태그에 적용됩니다.
class selector를 사용하는 방법은 다음과 같습니다.
.class명 { 속성: 속성값; }
* 예시 코드
.menu {
color: red;
}
menu라는 클래스명을 가진 모든 요소들의 텍스트 컬러가 red가 됩니다.
id selector
id selector에 css style을 부여하면 해당 id명을 가진 태그에 적용됩니다.
같은 id명은 1개의 html문서에서 1개의 태그에만 적용된다는 점을 주의해주시길 바랍니다.
id selector를 사용하는 방법은 다음과 같습니다.
#id명 { 속성: 속성값; }
* 예시 코드
#me {
color: green;
}
me라는 id명을 가진 유일한 엘리먼트의 텍스트 컬러가 green이 됩니다.
이렇게 세 유형의 선택자에 대해 알아봤는데, 한 수 더 내다보면 이런 궁금증이 생길 수 있습니다.
"동일한 요소에 서로 다른 선택자가 동일한 css속성에 대해 다른 속성 값을 부여하고 있다면 어떤 값이 적용될까??"
이에 대해 실험을 간단하게 하고 결과를 이끌어내겠습니다.
같은 태그에 대해 서로 다른 속성 값을 적용하고 있다면 어떤 속성 값이 적용될까?
위에 있는 세 가지 예시 코드를 합쳐보겠습니다.
* 예시 코드
<head>
<style>
span{
color: blue;
}
.menu {
color: red;
}
#me {
color: green;
}
</style>
</head>
<body>
<span class="menu" id="me">무슨 색일까요?</span>
</body>
지금 예시 코드에 있는 span태그에는 세 가지 선택자가 적용되고 있고, color값을 각각 다른 값을 적용하고 있습니다.
이때 span태그 안에 있는 텍스트의 색은 무슨 색이 될까요?
이런 경우 selector 간에는 적용의 우선순위가 있습니다.
우선순위는 다음과 같습니다.
1. id
2. class
3. tag
따라서 위의 경우 id 선택자가 우선 적용되어 텍스트의 색은 green이 됩니다.
이 글에서 다 다루지 못했지만 전체적으로 동일한 요소에 서로 다르게 적용되는 CSS에 대해서 적용의 우선순위는 다음과 같습니다.
CSS 적용의 우선순위
- 속성 값 뒤에 !important를 붙인 속성
- HTML의 각 태그에서 style을 직접 지정한 속성
- id selector
- class selector
- tag selector
- 상위 객체에 의해 상속된 속성
이 중에 어떤 것을 사용해야 할까요?
1번은 강제하는 것인데 이것은 CSS 코드의 구조를 무시하는 방법이기 때문에 사용하지 않는 것이 좋습니다.
그런데 라이브러리를 가져다 쓸 때, 다른 CSS 속성을 적용하고 싶은데 다른 선택자들로는 안 되는 경우 가끔 이 !important를 사용할 때가 있습니다.
2번도 우리가 CSS 코드를 html과 분리해서 사용하기 시작했기 때문에 사실상 사용할 일이 거의 없습니다.
실제로 나머지 3~6번을 많이 사용하면 되는데
항상 순위가 낮은 것부터 사용하고 예외사항을 적용하고 싶을 때 한 단계 위의 우선순위를 적용한다고 생각하면 됩니다.
이렇게 했을 때 가장 꼬이지 않고 CSS 코드를 설계할 수 있게 됩니다.
전체에 적용될만한 속성은 5~6번에서 끝냅니다. 그리고 집단 단위의 예외상황을 class selector로 처리합니다. 그다음 개별적인 예외상황을 id selector로 처리합니다.
3번의 경우 id는 한 html 파일 내에서 유일한 요소를 지칭합니다. 따라서 id seletor가 적용되는 element(html태그)는 유일하겠죠? 따라서 최후의 예외사항을 적용할 때에 사용됩니다.
만약 반대로 처음부터 id selector를 남발하고 그다음에 class선택자를 적용하고 그다음에 tag선택자를 적용하는 방향으로 개발을 하신다면... 매우 힘든 개발 경험이 될 확률이 높아집니다.
최근댓글