CSS Selector
- 전체 선택자 - *
- 타입 선택자 - tag이름
- 아이디 선택자 - #
- 클래스 선택자 - .
- 선택자 목록 - ,
전체 선택자(Universal Selector)
- 전체 선택자를 통해서 모든 HTML 요소에 접근을 할 수 있습니다. 이를 통해 문서 전체에 공통적으로 기본값을 지정할 수 있습니다. 전체 선택자는 * 을 사용하여 나타냅니다.
* {
margin: 0 auto;
}타입 선택자
- 타입 선택자는 태그 이름을 사용하여 나타냅니다. 해당 태그의 이름에 해당하는 모든 태그에 속성을 적용합니다.
p {
color: red;
}아이디 선택자
- id 속성은 페이지에 있는 해당 요소를 유일하게 식별할 때 씁니다.
- 같은 페이지 안에 id 값은 유일해야합니다.
- id 이름은 알파벳 또는 ‘_’ (언더바), ‘-’(하이픈)으로 시작해야 합니다.
- 아이디 속성을 이용하면 아래처럼
<a>태그의 href 속성과 연결하여 다른 페이지로 이동하는 링크가 아닌 현재 페이지에서 이동하는 해쉬 링크를 만들 수도 있습니다.
#one{
color: red;
}
#two{
color: blue;
}클래스 선택자
- class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있습니다.
- 이름을 지을 때 알파벳 또는 ‘_’ (언더바), ‘-’(하이픈)으로 시작해야 하며 직관적이고 간단명료하게 적어주는 것이 중요합니다.
.one{
color: red;
}
.two{
font-size: 20px;
}선택자 목록
- 콤마(,) 로 선택자를 연결하여 일치하는 모든 요소를 선택합니다.
h1, h2, h3, h4, h5, h6 {color: red;}선택자 우선 순위
- CSS에 적용 우선 순위가 있고, 이와 마찬가지로 CSS파일 안에서 사용되는 선택자들 역시 우선순위가 있다.
- 후자 우선의 원칙
- 구체성의 원칙
- 중요성의 원칙
1. 후자 우선 순위의 원칙
- 동일한 선택자가 연속으로 사용되었을 경우 후자가 우선
p {
color: red;
font-size: 20px;
}
p {
color: green;
}2. 구체성의 원칙
- 한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선
p.color-red {
color: red;
font-size: 20px;
}
p {
color: green;
}가중치
- id > class> 타입 순으로 style 적용이 된다.
<head>
<style>
h1 {color: red}
.yellowgreen {color: yellowgreen}
#fourth {color: skyblue}
</style>
</head>
<body>
<h1>h1의 첫번째</h1>
<h1 class='yellowgreen'>h1의 두번째</h1>
<h1 class='yellowgreen'>h1의 세번째</h1>
<h1 id='fourth' class='yellowgreen'>h1의 네번째</h1>
</body>
- h1의 두번째, 세번째, 네번째는 다 같은 class(yellowgreen)를 가지고 있습니다. 여기서 마지막
h1에 id 속성을 style에서 변경해보았습니다. 다시 말해,h1의 네번째는 class의 style도, id의 style도 적용되었지만 우선순위에 따라 id의 속성인 skyblue색을 나타내게 되었습니다.
우선 순위 계산
- 선택자들은 각각 해당하는 가중치 점수가 있습니다.
- 이 가중치 점수를 이용해 어떤 선택자의 우선순위가 가장 높은지 계산할 수 있습니다.
- inline-style : 요소의 안에 속성으로 선언되는 스타일입니다. 1000 점의 가중치를 가집니다.
- id 선택자 : 100점의 가중치를 가집니다.
- class, 가상클래스, 속성 선택자 : 10점의 가중치를 가집니다.
- 타입, 가상요소 선택자 : 1점의 가중치를 가집니다.
- 전체선택자(Universal Selector) 는 무시됩니다.
자리올림이 되지 않는다는 점 입니다. 예를 들어 태그로 13점의 점수를 얻어도, 클래스가 가지는 10점을 넘지 못합니다. 따라서 클래스 하나보다 중요도가 낮습니다.
3. 중요성의 원칙
- 다른 속성보다 더 우선적으로 적용되어야할 중요한 스타일 속성이 있다면 !important 를 속성값 다음에 추가합니다.
- !important - 절대적인 우선 순위
- 우선 순위 계산을 어렵게 만들기 때문에 인라인 스타일을 덮어 써야하는 등의 불가피한 상황이 아니라면 사용하지 않는 것이 좋습니다.
Web FrontEnd Developer