지난 강좌에서 html 문서의 태그를 선택자로, class를 선택자로 사용하는 방법에 대해 알아보았습니다.
이번강좌는 좀더 확장에서 선택자를 활용하는 방법에 대해 알아보겠습니다.
| 종류 | css 형태 | 설명 |
|---|---|---|
| 전체 선택자 | * | 모든 요소를 선택합니다. |
| 태그 선택자 | 태그 | h1, p, span, table, ul .. 각각의 태그 요소를 선택합니다. |
| 클래스 선택자 | .클래스 | 웹문서에서 class="클래스"로 마크업 한 요소를 선택합니다. |
| 아이디 선택자 | #아이디 | 웹문서에서 id="아이디"로 마크업 한 요소를 선택합니다. |
| 속성 선택자 | [속성명="속성값"] | 웹문서에서 [속성명="속성값"]을 가진 요소를 선택합니다. |
1. 전체 선택자 "*"
해당 요소의 모든 자식, 자손 요소를 선택하는 선택자 입니다.
@charset "utf-8";
/* CSS Document */
* { color:blue; }
웹문서는 html부터 시작하기 때문에 아무런 결합자 없이 위와 같이 사용하면 마치 html 태그 선택자를 활용한 것과 같은 효과를 보실 수 있습니다. 즉 위이 표현은 html { color:blue; } 와 같은 형태가 됩니다. 결합자는 다음 강좌에서 설명 드리겠습니다.
link 태그를 보시면 selector.css에서 css 외부 스타일 시트 방식으로 불러 온 것을 확인 할 수 있습니다.
그리고 하단 Styles 탭에서 selector.css 4번 줄에서 적용된 것을 확인 하실 수 있습니다.
개발자도구에서 body, h1, h2, p 태그 요소를 클릭해 보시면 각 모든 태그에 위의 스타일이 적용된 것도 확인 가능합니다.
2. 태그 선택자 "태그"
해당 태그 요소를 선택하는 선택자입니다. 지난 강좌에서 설명 드렸던 가장 기본적인 선택자입니다. 해당 태그 요소를 모두 선택하기 때문에 기본적인 여백 정도만 조절하는 것이 좋습니다. 나중에 다시 user agent styleesheet로 되돌릴 수는 있지만 너무 많은 스타일을 적용하게 되면 오히려 스타일이 꼬이는 경우가 발생할 수 있습니다.
@charset "utf-8";
/* CSS Document */
p { color:blue }
p 태그 요소에 스타일이 적용된 것이 확인 됩니다.
3. 클랙스 선택자 ".클래스"
웹문서에서 class="클래스"로 마크업 한 요소를 선택합니다. html 요소에서 class="클래스"로 중복 적용이 가능하기 때문에 같은 스타일을 적용하고 싶다면 html 요소에 계속해서 class="클래스"를 사용하시면 됩니다.
@charset "utf-8";
/* CSS Document */
p { color:blue }
.redbox-whitetxt { color:white; background-color: red; }
위의 html문서는 p 태그 요소가 3개 이고 그 중에 class="redbox-whitetxt"를 가진 요소가 2개가 있습니다.
첫번째 p 요소는 css에서 적용한 스타일이 적용되었습니다. 하지만 두번째와 세번째 요소는 redbox-whitetxt라는 클래스 스타일을 가지고 있습니다. 먼저 p태그 스타일로 글자색이 파란색으로 적용이 되지만 다시 클래스에서 글자색을 하얀색으로 적용을 하고 있기 때문에 먼저 적용된 p태그의 글자색은 무시되고 클래스에서 적용한 하얀색이 적용되었습니다.
그리고 redbox-whitetxt 가 2개의 p태그의 적용되었으므로 위와 같이 두군데 적용이 되고 있습니다.
4. 아이디 선택자 "#아이디"
웹문서에서 id="아이디"로 마크업 한 요소를 선택합니다. html 요소에서 id="아이디"로 하는 마크업은 단 하나만 가능하기 때문에 중복 사용이 안됩니다. 같은 스타일을 적용하고 싶다면 html 요소에 class="클래스"를 사용하셔야 됩니다.
@charset "utf-8";
/* CSS Document */
p { color:blue }
.redbox-whitetxt { color:white; background-color: red; }
#intro{ color:yellow; font-size:1.5em; }html 문서에서 class="클래스"로 마크업한 요소를 css로 선택하기 위해 첫글자를 "."을 사용하였듯이 id="아이디"로 마크업한 요소를 css에서 선택하기 위해서는 첫글자를 "#"를 사용합니다.
이전 html 문서의 마지막 p 요소에 id="intro"라는 마크업을 했습니다. 그리고 css에서 #intro는 글자색을 노란색으로 글자크기를 1.5배로 지정했습니다.
개발자 도구로 마지막 p요소를 확인하시면 먼저 user agent stylesheet가 적용되고 다시 seletor.css 4번줄에서 p 요소의 글자색을 지정했지만 selector.css 6번줄에서 .redbox-whitetxt의 글자색이 지정되었으므로 p 요소의 색상은 취소되었습니다. redbox-whitetxt에서 배경색을 잘 적용되었구요. 그리고 다시 selector.css 8번줄에서 글자색을 지정하였기에 .redbox-whitetxt에서 글자색은 취소 되었고 #intro의 글자색이 노란색으로 적용되고 글자크기가 1.5배로 커졌습니다.
지금까지의 css 선택자를 정리하면 같은 요소에 여러가지 선택자로 같은 스타일을 지정될 경우 선택자의 우선 순위에 따라 가장 높은 순위의 스타일만 남고 나머지는 취소되는 것을 알 수 있습니다. 스타일 적용 순서는
전체 선택자 > 태그 선택자 > 클래스 선택자 > 아이디 선택자 이며 우선 순위는 반대로
이렇게 됩니다.
5. 속성 선택자 "[속성명="속성값"]"
속성 선택자는 마크업을 통한 선택자가 아니고 해당 태그가 가진 속성을 이용해서 선택하는 방법입니다. 가령 a 태그는 href="주소" 라는 속성을 가지고 있고 img 는 src="이미지 경로"라는 태그 속성을 가지고 있습니다.
이렇게 속성명="속성값"을 가진 html 요소를 css에서 대괄호"[]"로 감싸서 요소를 선택하는 방법입니다.
@charset "utf-8";
/* CSS Document */
p { color:blue }
.redbox-whitetxt { color:white; background-color: red; }
#intro { color:yellow; font-size:1.5em; }
[href="https://naver.com"] { color:red }
위와 같이 네이버, 다음, 예스24를 a 태그를 통해 링크 했다면 네이버로 연결하는 href="https://naver.com" 속성을 가진 요소에만 붉은색 글씨를 style 할 수 있습니다.
그런데 target도 a 태그의 속성이니 같은 방법으로 css를 적요할 수 있습니다.
@charset "utf-8";
/* CSS Document */
p { color:blue }
.redbox-whitetxt { color:white; background-color: red; }
#intro { color:yellow; font-size:1.5em; }
[href="https://naver.com"] { color:red; }
[target="_blank"] { color:green; }[target="_blank"] { color:green; } 한 줄이 추가 되었습니다. 새 창으로 열리는 요소는 초록색 글자를 지정한 것입니다.
html 문서에서 네이버와 다음은 새창으로 열릴 수 있도록 target 속성을 _blank롤 정했습니다. 그리고 예스24는 새창이 아닌 현재창에서 열릴 수 있도록 _self로 되었습니다. 그리고 css는 [target="_blank"]로 html 문서의 새창으로 열리는 요소의 글자색을 초록으로 지정했습니다. 그러니 예스24 요소는 user agent sytlesheet만 적용됩니다. 네이버와 다음만이 적용되게 되는 것이죠
여기서 살짝 이상한 부분이 있다라고 생각하신 분들이 계실까요? 그렇다면 뛰어난 센스를 지닌신 분들로 인정합니다.
지금 보시면 css에서 네이버 요소에 2가지 스타일이 적용되었습니다.
[href=''https://naver.com"] 과 [target="_blank"] 입니다.
얘들은 우리가 마크업 한것은 아니기 때문에 태그 선택자도, 클래스 선택자도, 아이디 선택자도 아닙니다. 지금까지의 우선순위에 해당하는 요소가 아닙니다. 2가지 스타일이 같은 속성 선택자입니다.
그런테 [href=''https://naver.com"] 의 글자색이 취소 되고 [target="_blank"]의 글자 색만 적용되었습니다.
자 그럼 css에서 두가지 선언의 위치를 뒤집어 보겠습니다.
@charset "utf-8";
/* CSS Document */
p { color:blue }
.redbox-whitetxt { color:white; background-color: red; }
#intro { color:yellow; font-size:1.5em; }
[target="_blank"] { color:green; }
[href="https://naver.com"] { color:red; }이번에는 [target="_blank"] 를 먼저 작성하고 [href=''https://naver.com"]를 나중에 작성했습니다.
네이버의 글자색이 이번에는 빨간색으로 적용되었습니다.
[target="_blank"]의 글자색이 취소 되고 [href=''https://naver.com"] 글자색이 적용된 것입니다.
감이 오시나요? 이렇게 같은 순위의 선택자에서는 css에서 나중에 적용(작성)된 style이 최종 적용됩니다.
지금이 몇 줄 안되는 css 이지만 사실 css는 굉장히 많은 줄로 표현되는 것이 일반적입니다. 수백줄은 기본입니다. 그렇게 될경우 자기도 모르게 같은 순위의 style을 반복 적용하는 실수를 하게 됩니다. 가령 p 태크 요소를 정했는데 나중에 또 정하는 실수를 하게 되는 것이죠 그러면 의도치 않게 처음에 적용한 요소가 다 바뀌어버리는 혼돈을 맞이하게 됩니다. 그래서 클래스와 id를 마크업 할 시에 좀더 구체적으로 하게되고 일정한 규칙을 만들고 진행하게 되는 것입니다.
그럼 만약 다른 순위의 선택자로 적용되면 어떻게 될까요
@charset "utf-8";
/* CSS Document */
p { color:blue }
.redbox-whitetxt { color:white; background-color: red; }
#intro { color:yellow; font-size:1.5em; }
[target="_blank"] { color:green; }
[href="https://naver.com"] { color:red; }
a{ color:blue; }
.link{ color: orange; }이번에는 a 태그 요소에 파란색을 link 클래스 요소에는 주황색을 지정했습니다.
먼저 예스24를 보겠습니다. css에서 a 요소만인 해당 되는 얘는 a 스타일만 적용 되었습니다.
다음에 네이버를 보겠습니다. 얘는 css에서 a, [target="_blank"], [href="https://naver.com"], .link 가 적용됩니다. 즉 4가지 스타일이 적용됩니다. a는 태그 선택자이고 [target="_blank"]와 [href="https://naver.com"]는 속성 선택자 입니다. 그리고 .link는 클래스 선택자 입니다.
개발자 도구에서 적용되는 순서를 확인하면 먼저 user agent stylesheet > a > [target="_blank"] > [href="https://naver.com"] > .link 가 적용되고 우선순위는 역시 나중에 적용된 것이 최종 결과물이 됩니다.
그리고 다음을 보겠습니다. 얘는 css에서 a, [target="_blank"], .link, #intro 가 적용됩니다. a는 태그 선택자이고 [target="_blank"]는 속성 선택자, .link는 클래스 선택자 그리고 최종 #intro는 아이디 선택자 입니다.
역시 개발자 도구에서 적용 순서를 확인하면
user agent stylesheet > a > [target="_blank"] > .link > #intro 로 진행되면 나중에 적용된 #intro의 글자색이 최종 결과가 됩니다.
이제 선택자의 우선 순위를 다시 살펴 보겠습니다. 개발자 도구의 진행 순서로 확인하면
user agent stylesheet > 태그 선택자 > 속성 선택자 > 클래스 선택자 > 아이디선택자 > 인라인 스타일(element.style)
이 되고 적용되는 우선 순위는 반대이니
- 인라인 스타일
- 아이디 선택자
- 클래스 선택자
- 속성 선택자
- 태그 선택자
- 전체 선택자
- 기본 스타일(user agent stylesheet)
이 됩니다.
주의할 점은 가능한 아래 단계에서 부터 사용하고 클래스 선택자까지만 사용하는 편이 좋습니다. 물론 아이디 선택자나 인라인 스타일도 부득이하면 사용해야 되겠지만 스타일을 정하실 때는 중복 적용을 생각하시고 작업하는 것이 코딩을 줄일 수 있는 지름길 입니다. 다른 얘기 이지만 자바스크립트에서 스타일을 적용하게 되면 인라인 스타일로 적용되기 때문에 인라인 스타일까지 css가 들어가게 되면 나중에 다시 혼돈 스러워 질 수 있습니다.
'강좌 및 설정 > CSS 기본 강좌' 카테고리의 다른 글
| CSS 선택자 네번째 (그룹 선택자) (1) | 2022.12.09 |
|---|---|
| CSS 선택자 세번째 (결합자) (0) | 2022.12.08 |
| CSS 선택자 두번째 (class 다중 적용) (0) | 2022.12.07 |
| CSS 적용 방식 (0) | 2022.12.01 |
| CSS 의 이해 및 맛보기 (0) | 2022.11.30 |