반응형
CSS에서 셀렉터의 [*(아스터리스크)]의 의미는?
CSS를 효과적으로 활용하여 사이트에 다양한 디자인을 제공할 수 있습니다.
디자인을 부여할 대상(요소)을 압축하기 위해 id, class 등의 실렉터를 지정하는 경우가 많은데 지정할 수 있는 실렉터 안에 ′*(아스터리스크)′도 존재한다는 것을 알고 계십니까?
Astarisk는 모든 요소가 대상인 실렉터로 Web 페이지 전체에 적용되는 CSS를 기술하고 싶을 때 편리합니다.
*(아스터리스크) 선택기 사용법
* (아스터리스크) 사용법은 다른 실렉터와 같습니다.
애스터리스크 사용법
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
< style >
*{
background : # ccc ;
color : red ;
}
< / style >
안녕하세요.
이와 같이, 다른 실렉터와 같이 기술하는 것만으로 사용할 수 있습니다.
*(아스터리스크)는 페이지 전체에 CSS속성을 적용하고자 할 때(글꼴 크기, 베이스 색상 등) 도움이 되기 때문에 적당한 HTML, CSS파일을 준비하고 시험해 보는 것이 좋습니다.
*(아스터리스크)의 실렉터의 장점, 단점
*(아스터리스크)에는 다양한 장점, 단점이 있습니다.
CSS 스킬을 연마하고 싶다면 반드시 기억해 두어야 할 사항이기 때문에 각각 알아보도록 하겠습니다.
모든 요소에 CSS를 적용할 수 있는
*(아스터리스크)를 사용하여 모든 요소에 속성을 적용할 수 있으므로 아래와 같은 CSS 리셋에 도움이 됩니다.
애스터리스크 사용법
1
2
3
4
5
6
7
8
9
10
< style >
*{
margin : 0 ;
padding : 0 ;
border : 0 ;
font - size : 100 % ;
font : inherit ;
vertical - align : baseline ;
}
< / style >
이러한 지정 방법을 알고 있는 것만으로 CSS 파일의 용량을 삭감할 수 있어 페이지 총용량의 삭감이나 AMP 대응에 공헌할 수 있을 것입니다.
특히 AMP대응을 고려하고 있는 경우, CSS의 총용량을 50,000바이트 이내로 한다는 규칙이 있으므로 조금이라도 용량을 줄이기 위해 *(아스터리스크)를 활용하도록 합시다.
CSS의 우선 순위 부여에 이용할 수 없는
*(아스터리스크)는 CSS의 우선순위를 부여하는데 이용할 수 없습니다.
CSS의 우선순위 부여를 이해하고 있으면 「!important 를 사용하지 않는(AMP 프렌들리)」CSS 기술을 할 수 있게 됩니다.
애스터리스크 사용법
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< style >
html p {
color : blue ;
}
p {
color : red ;
}
< / style >
보통 CSS는 같은 실렉터를 대상으로 한 CSS속성이 있으면 가장 마지막에 기술된 것으로 덮어쓰기가 됩니다.
하지만 CSS의 우선순위 부여를 이해하게 되면 위의 샘플처럼 color:red로 덮어쓰기를 해야 하는 CSS 속성을 덮어쓰기를 하지 않도록 할 수 있습니다.
이해하고 있으면 매우 편리하지만 우선 순위를 매길 때 *(아스터리스크)를 이용할 수 없기 때문에 우선 순위를 매길 때 *(아스터리스크)를 사용할 수 없는 것입니다.
우선순위에 대한 이야기는 이 기사의 주제에서 빠질테니, 자세히 알고 싶으시면 개별적으로 알아보도록 하세요.
쓰는 장면이 적다.
*(아스터리스크)는 페이지 전체에 적용할 수 있지만 사용하는 장면이라면 CSS를 초기화할 때 정도입니다.
대부분의 경우 id, class와 같은 명확한 실렉터를 지정하기 때문에 알고 있다 하더라도 사용하는 경우가 거의 없습니다.
또, 같은 의미를 가지는 셀렉터 「html」가 사용하기 편리하다고 하는 것도, 사용하는 장면이 거의 없어지고 있는 이유의 하나겠지요.
응용하면 잘 다룰 수 있다(상급자용)
조금 전에 사용하는 장면이 거의 없다고 했던 *(아스터리스크)입니다만, 잘 사용하면 실렉터의 추출에도 사용할 수 있습니다.
아스타리스크 사용법(응용)
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< style >
a {
color : red ; / * Link 4 * /
}
li a {
color : blue ; / * Link 1 * /
}
li * a {
color : green ; / * Link 3 * /
}
li > * > a {
color : black ; / * Link 2 * /
font - weight : bold ;
}
< / style >
나름대로의 CSS에 대한 지식이 있어야지만 ′어떤 요소와 어떤 요소 사이에 어떤 태그(div, span, p 등)가 있을 경우에만′과 같은 요소의 한정에 응용할 수 있습니다.
실제로 상기 샘플에서는 링크의 색이 각각 다른 것을 확인할 수 있을 것입니다.
상급자용이긴 하지만 응용하면 이런 일을 할 수 있기 때문에 좀 더 CSS에 대해서 자세히 알아보시면 좋겠습니다.
CSS를 효과적으로 활용하여 사이트에 다양한 디자인을 제공할 수 있습니다.
디자인을 부여할 대상(요소)을 압축하기 위해 id, class 등의 실렉터를 지정하는 경우가 많은데 지정할 수 있는 실렉터 안에 ′*(아스터리스크)′도 존재한다는 것을 알고 계십니까?
Astarisk는 모든 요소가 대상인 실렉터로 Web 페이지 전체에 적용되는 CSS를 기술하고 싶을 때 편리합니다.
*(아스터리스크) 선택기 사용법
* (아스터리스크) 사용법은 다른 실렉터와 같습니다.
애스터리스크 사용법
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
< style >
*{
background : # ccc ;
color : red ;
}
< / style >
Text
안녕하세요.
이와 같이, 다른 실렉터와 같이 기술하는 것만으로 사용할 수 있습니다.
*(아스터리스크)는 페이지 전체에 CSS속성을 적용하고자 할 때(글꼴 크기, 베이스 색상 등) 도움이 되기 때문에 적당한 HTML, CSS파일을 준비하고 시험해 보는 것이 좋습니다.
*(아스터리스크)의 실렉터의 장점, 단점
*(아스터리스크)에는 다양한 장점, 단점이 있습니다.
CSS 스킬을 연마하고 싶다면 반드시 기억해 두어야 할 사항이기 때문에 각각 알아보도록 하겠습니다.
모든 요소에 CSS를 적용할 수 있는
*(아스터리스크)를 사용하여 모든 요소에 속성을 적용할 수 있으므로 아래와 같은 CSS 리셋에 도움이 됩니다.
애스터리스크 사용법
1
2
3
4
5
6
7
8
9
10
< style >
*{
margin : 0 ;
padding : 0 ;
border : 0 ;
font - size : 100 % ;
font : inherit ;
vertical - align : baseline ;
}
< / style >
이러한 지정 방법을 알고 있는 것만으로 CSS 파일의 용량을 삭감할 수 있어 페이지 총용량의 삭감이나 AMP 대응에 공헌할 수 있을 것입니다.
특히 AMP대응을 고려하고 있는 경우, CSS의 총용량을 50,000바이트 이내로 한다는 규칙이 있으므로 조금이라도 용량을 줄이기 위해 *(아스터리스크)를 활용하도록 합시다.
CSS의 우선 순위 부여에 이용할 수 없는
*(아스터리스크)는 CSS의 우선순위를 부여하는데 이용할 수 없습니다.
CSS의 우선순위 부여를 이해하고 있으면 「!important 를 사용하지 않는(AMP 프렌들리)」CSS 기술을 할 수 있게 됩니다.
애스터리스크 사용법
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
< style >
html p {
color : blue ;
}
p {
color : red ;
}
< / style >
텍스트
보통 CSS는 같은 실렉터를 대상으로 한 CSS속성이 있으면 가장 마지막에 기술된 것으로 덮어쓰기가 됩니다.
하지만 CSS의 우선순위 부여를 이해하게 되면 위의 샘플처럼 color:red로 덮어쓰기를 해야 하는 CSS 속성을 덮어쓰기를 하지 않도록 할 수 있습니다.
이해하고 있으면 매우 편리하지만 우선 순위를 매길 때 *(아스터리스크)를 이용할 수 없기 때문에 우선 순위를 매길 때 *(아스터리스크)를 사용할 수 없는 것입니다.
우선순위에 대한 이야기는 이 기사의 주제에서 빠질테니, 자세히 알고 싶으시면 개별적으로 알아보도록 하세요.
쓰는 장면이 적다.
*(아스터리스크)는 페이지 전체에 적용할 수 있지만 사용하는 장면이라면 CSS를 초기화할 때 정도입니다.
대부분의 경우 id, class와 같은 명확한 실렉터를 지정하기 때문에 알고 있다 하더라도 사용하는 경우가 거의 없습니다.
또, 같은 의미를 가지는 셀렉터 「html」가 사용하기 편리하다고 하는 것도, 사용하는 장면이 거의 없어지고 있는 이유의 하나겠지요.
응용하면 잘 다룰 수 있다(상급자용)
조금 전에 사용하는 장면이 거의 없다고 했던 *(아스터리스크)입니다만, 잘 사용하면 실렉터의 추출에도 사용할 수 있습니다.
아스타리스크 사용법(응용)
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< style >
a {
color : red ; / * Link 4 * /
}
li a {
color : blue ; / * Link 1 * /
}
li * a {
color : green ; / * Link 3 * /
}
li > * > a {
color : black ; / * Link 2 * /
font - weight : bold ;
}
< / style >
나름대로의 CSS에 대한 지식이 있어야지만 ′어떤 요소와 어떤 요소 사이에 어떤 태그(div, span, p 등)가 있을 경우에만′과 같은 요소의 한정에 응용할 수 있습니다.
실제로 상기 샘플에서는 링크의 색이 각각 다른 것을 확인할 수 있을 것입니다.
상급자용이긴 하지만 응용하면 이런 일을 할 수 있기 때문에 좀 더 CSS에 대해서 자세히 알아보시면 좋겠습니다.
반응형