목차 :
1. 선택자 호출하기
우선 선택자(selector)란 우리가 속성을 지정해 줄 때, 특정할 수 있는 이름을 선택자라고 한다.
<태그>,id,class,[속성 = ""] 등을 모두 선택자라고 부른다.
이 선택자들을 통해서 우리는 css파일 내부에서 각 선택자에게 style을 부여해줄 수 있는 것이다.
각 선택자를 호출하는 방법은 다음과 같다.
1. <태그>를 호출할 때 : 그냥 태그명을 작성하면 된다.
```css
h1 {
font-size : 40px
}
```2. id를 호출할 때 : #을 이용해서 호출한다.
<!-- html --->
<h1 id = "test"> id 테스트 </h1>/* css */
#test {
font-size : 40px
}3. class를 호출할 때 : .을 이용해서 호출한다.
<!-- html --->
<h1 class = "test"> class 테스트 </h1>/* css */
.test {
font-size : 40px
}4. 속성으로 호출할 때 : [속성] 또는 [속성 =""] 으로 호출한다.
<!-- html --->
<a href="#" title="test">테스트</a>/* css */
[title="test"] {
font-size : 40px
}5. 부모 선택자, 자식 선택자
내가 특정 선택자의 자식 선택자들에게만 css를 적용시키고 싶을 때는, >를 이용한다.
ex) .test > a { }
이것은 .test 클래스 내부의 바로 밑의 a태그들에게 css를 적용한다는 의미이다.
만약 .test 클래스 내부에 .test2 라는 클래스가 있고, test2 클래스 내부에 a가 존재한다면 test2의 a에는 적용되지 않는다.
2. CSS 선택자 적용 순서
CSS에는 우선적으로 적용되는 순서가 있다.
이 우선적으로 적용하는 원칙은 4가지가 존재한다.
이 원칙은 구체적일수록 높은 우선순위를 갖는다.
- inline-sheet 방식으로 작성되었는가?
- ID 선택자를 사용하였는가?
- 클래스 선택자, 속성 선택자를 사용하였는가?
- 태그 선택자를 사용하였는가?
참인 경우, 각 점수를 +1 한다.
(1번점수, 2번점수, 3번점수, 4번점수) 를 측정하여,
맨 앞 항목의 점수가 높을수록 가장 우선순위로 적용된다.
그리고, 점수가 같은 경우에는 가장 마지막에 작성한 CSS가 적용된다.
3. 단위(rem, em)
1. rem 단위 : <html>요소의 font-size를 기준으로 1rem을 결정한다.
html {
font-size: 40px;
}
h1 {
font-size: 2rem;
}위 코드에서, 1rem은 40px이므로, 2rem은 80px이 되어
h1에는 80px의 font-size가 적용된다.
2. em 단위 : 부모 요소의 font-size를 기준으로 1em을 결정한다.
h1 {
font-size: 40px;
}
h1 > a {
font-size: 0.5em;
}a 태그의 부모선택자인 h1이 font-size가 40px이므로,
자식선택자인 a의 1em은 40px이다.
따라서, a태그에는 40 * 0.5=20px 의 font-size가 적용된다.
4. !important
CSS를 적용시킬 때, 뒤에 !important를 작성하게 되면,
선택자 적용 순서에 상관없이 가장 우선시하여 적용된다.
.test {
color: red !important; <!--바뀌지 말아야함--->
}따라서, !important를 작성할 때는 이 css가 왜 우선시하여 고려되야 하는지에 대한 이유를 주석으로 명시해주는 것이 좋다.
5. @(at-rule)
선택자를 지정하여 css를 적용시키는 것 외에도, @를 이용하여 특정 매체들에 css를 적용시킬 수도 있다.
몇가지 at-rule에 대해서 살펴보자.
@import : css 파일에서 다른 css 파일들을 불러 올때 사용
@font-face : 사용자 정의 글꼴을 적용
@media : 화면의 너비 등의 변화가 생겼을 때, css를 다르게 적용시킬 수 있다.
이외에도 많은 at-rule이 존재한다.
6. 변수 정의하기
변수를 정의하는 경우는 거의 없는 것 같지만(어차피 같은 class로 묶어서 스타일을 적용시키면 되기 때문에) 일단은 변수에 대해서 눈도장만 찍고 넘어가려고 한다.
css 내에서 변수를 지정할 때에는, 선택자를 호출하고 --변수명 을 통하여 변수를 지정한다. 또한 변수를 사용할 때에는 var(--변수명,(변수가 안되면 사용할 값)) 을 통해 사용한다.
예시)
body { /* 변수가 적용될 범위 */
--myColor: red;
}
p {
color: var(--myColor, blue);
}앞으로의 CSS 공부에서는,
각 태그에 적용시킬 수 있는 다양한 css 속성들에 대해서 살펴볼 예정이다.
