CSS 선택자
우선 CSS 선택자는 HTML로 구성된 문서에서 특정 요소를 선택하는 기능을 가집니다. HTML 요소를 선택해서 스타일을 적용할 수 있습니다.
CSS3 에서는 HTML 요소를 앞에 적고 {CSS 블록} 내부에 스타일 세부사항을 기록합니다.
HTML 문서에서는 <head></head> 태그 내부에 스타일 태그를 적용할 수 있습니다.
💡 inline style을 사용하면 안되는 이유
CSS를 적용하는 방법은 3가지가 있습니다. 그 중에서 inline 스타일을 최대한 자제해야 하는 이유는 2가지가 있습니다.
1. 유지보수가 힘들어집니다.
HTML 태그에 직접적으로 스타일이 적용되어 있기 때문에 스타일이 변경되면 코드별로 찾아서 스타일을 변경해줘야 합니다. 코드 유지보수가 복잡해집니다.
2. 우선순위가 높다
inline 형식으로 적용된 스타일은 우선순위가 높은 편입니다. 따라서 general하게 스타일을 적용했다고 하더라도 특정 요소에서 스타일이 깨질 위험이 존재합니다.
결론
가급적이면 style.css 파일에서 스타일 적용하세요
CSS 선택자(Selector) 우선순위
CSS 선택자(Selector) 종류
CSS 선택자는 종류가 다양합니다. HTML이 DOM으로 렌더링 되듯, CSS 파일 또한 CSSDOM을 구성하기 때문에 계층적인 형태로 특정 요소를 선택할 수 있습니다. CSS3에서 사용할 수 있는 선택자는 다음과 같습니다.
HTML5와 CSS3를 공부할 때 명심해야 할 점은 모든 태그나 Selector들을 외우려 하지 않는 것입니다. 현업에서 프로그램 개발에 참여하는 개발자들도 필요할 때 마다 W3C 공식문서를 보면서 개발합니다. 외우는 건 구글에 맡기면 됩니다.
| 선택자 | 형태 | 예시 |
| 전체 선택자 | * | * |
| 태그 선택자 | tag | div |
| 아이디 선택자 | #id | #id |
| 클래스 선택자 | .class | .class |
| 후손 선택자 | selector selector | div h1 |
| 자손 선택자 | selector > selector | div > h1 |
| 속성 선택자 | selector[attr = value] | input[type = text] |
| selector[attr ~= value] | div[data-role ~= row] | |
| selector[attr |= value] | div[data-role |= row] | |
| selector[atttr ^= value] | div[data-role ^= row] | |
| selector[attr \= value] | div[data-role \= row] | |
| selector[attr *= value] | div[data-role *= row] | |
| 동위 선택자 | selector + selector | input + div |
| selector ~ selector | input ~ div | |
| 구조 선택자 | selector : first-child | li : first-child |
| selector : last-child | li : last-child | |
| selector : Nth - child | li : Nth-child(2n+1) | |
| selector : Nth - last - child | li : Nth - last - child(2n+1) | |
| selector : first - of - type | h1 : first - of - type | |
| selector : last - of - type | h1 : last - of - type | |
| selector : Nth - of - type | h1 : Nth - of - type(2n+1) | |
| selector : Nth - last - of - type | h1 : Nth - last - of - type(2n+1) | |
| 반응 선택자 | selector : active | div:active |
| selector : hover | div : hover | |
| 상태 선택자 | : checked | input : checked |
| : focus | input:focus | |
| : enabled | input:enabled | |
| :diabled | input:diabled | |
| 링크 선택자 | :link | a:link |
| :visited | a:visited | |
| 문자 선택자 | ::first-letter | p::first-letter |
| ::first-line | p::first-line | |
| ::after | p::after | |
| ::before | h1::before | |
| ::selection | p::selection | |
| 부정 선택자 | selector:not(selector) | li:not(.item) |
💡 W3C CSS Selector Reference
CSS 선택자(Selector) 종류
1. 전체 선택자
HTML 문서 내에 있는 모든 태그에 적용됩니다. 이는 Body 태그 뿐만 아니라 HTML, head 태그에 까지 영향을 미치게 됩니다.
<head>
<title>Document</title>
<style>
*{
color : green;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat alias tenetur accusamus in veritatis aliquam dicta nostrum vero modi magnam molestias, magni soluta esse quibusdam architecto facilis, ipsa cupiditate tempora!</p>
</body>
2. Tag Selector
HTML 문서 내부에서 특정 태그만 선택해서 스타일을 적용합니다. 아래 예제에서는 <ul>태그에만 초록색을 적용하였습니다.
같은 스타일 요소를 여러 태그에 적용하기 위해서는 쉼표(,)로 태그들을 나열해주면 됩니다.
<style>
ul, p{
color : green;
}
</style>
3. ID Selector
태그 id 속성값으로 요소를 선택할 수 있습니다. 여기서 주의할 점은 클래스 속성과 다르게 아이디 속성은 중복이 불가능합니다. 중복으로 id값이 적용되면 제일 먼저 나오는 태그만 선택됩니다.
<style>
#unordered-list {
color : green;
}
</style>
<ul id="unordered-list">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
4. Class Selector
클래스 속성값으로 요소를 선택할 수 있습니다. HTML 문서에서 클래스 속성은 여러 요소에 적용할 수 있습니다.
<body>
<h1>Hello World</h1>
<ul class="unordered-list">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<p class="unordered-list">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat alias tenetur accusamus in veritatis aliquam dicta nostrum vero modi magnam molestias, magni soluta esse quibusdam architecto facilis, ipsa cupiditate tempora!</p>
</body>
특정 태그의 클래스만 선택할 수 있습니다.
<style>
p.unordered-list {
color : green;
}
</style>
5. Attribute Selector
요소 내부에 적용되어 있는 속성값으로 특정 요소를 선택할 수 있습니다. 속성 선택자는 [] 를 사용합니다.
<head>
<title>Document</title>
<style>
input[type=text], input[type=password] {
color : green;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<input type="text">
<input type="email">
<input type="password">
</body>
이 외에도 문자열로 속성을 선택할 수 있습니다. 자주 사용되는 선택자는 아니지만 알아두면 필요할 때 찾아서 사용할 수 있습니다.
| selector[attr ~= value] | 속성 내 특정 값 포함 | div[data-role ~= row] |
| selector[attr |= value] | 속성 내 특정 값 포함 | div[data-role |= row] |
| selector[atttr ^= value] | 속성 내 특정 단어로 시작 | div[data-role ^= row] |
| selector[attr \= value] | 속성 내 특정 값으로 끝남 | div[data-role \= row] |
| selector[attr *= value] | 속성 내 특정 값 포함 | div[data-role *= row] |
6. Descendant , Child Selector
후손, 자손 선택자는 태그 하위에 위치한 요소들을 선택할 때 사용됩니다.
예를 들어 HTML 구조가 다음과 같다고 하면 CSSDOM은 다음과 같이 생성됩니다.
<body>
<div id="first">
<div id="second">
<div id="third">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
여기서 바로 하위에 위치한 요소를 자식(child) 요소라고 합니다. 또한 자식 요소 하위에 있는 모든 요소들을 후손(Descendant) 요소라고 합니다.
다음은 id 속성이 first인 요소 하위의 모든 h3 태그에 스타일을 적용합니다.[후손 선택자]
<head>
<title>Document</title>
<style>
#first h3{
color : green;
}
</style>
</head>
요소 바로 하위에 있는 자식 요소에만 스타일을 적용합니다. [자식 선택자]
<head>
<title>Document</title>
<style>
#first > h3{
color : green;
}
</style>
</head>
7. 동위 선택자
CSSDOM 계층에서 같은 레벨에 위치한 요소들을 선택할 때 사용됩니다.
| selector + selector | selector A + selectorB | selector A 바로 다음 요소 B를 선택합니다. |
| selector ~ selector | selector A ~ selectorB | selector A 뒤의 selector B를 선택합니다. |
ul 요소에서 li요소가 3개 있습니다.
<ul>
<li id="list1">list1</li>
<li id="list2">list2</li>
<li id="list3">list3</li>
</ul>2번째 요소에 스타일을 적용하기 위해서는 + 기호를 사용합니다.
<style>
#list1 + #list3{
color : green;
}
</style>
반면 3번째 요소를 선택하기 위해서는 ~ 기호를 사용합니다.
<style>
#list1 ~ #list3{
color : green;
}
</style>
8. 반응 선택자
사용자의 반응에 따라 다른 스타일을 적용할 수 있습니다.
아래 버튼처럼 마우스를 버튼위에 올리면 색상이 변해서 시각적 효과를 줄 수 있습니다. [hover]
리스트 중 한 요소를 클릭했을 때 현재 어떤 부분을 클릭했는지도 보여줄 수 있습니다.[active]
CSS3에서는 사용자 반응에 따라 특정 상태를 선택자로 사용할 수 있습니다.
| selector : active | div:active |
| selector : hover | div : hover |
아래 예제는 마우스를 올렸을 때 배경이 초록으로 변경되고 클릭하면 파랑으로 변경됩니다.
<style>
#first > h3:hover{
background-color : green;
}
#first > h3:active{
background-color : blue;
}
</style>
9. 상태 선택자
checkbox나 radio 버튼의 선택 상태값을 선택자로 사용할 수 있습니다.
| : checked | input : checked |
| : focus | input:focus |
| : enabled | input:enabled |
| :diabled | input:diabled |
input 상태값에 따라서 다른 스타일을 적용할 수 있습니다.
<style>
input:focus{background-color: green;}
input:checked{background-color: green;}
</style>
10. 구조 선택자
구조 선택자는 특정 위치에 있는 요소를 선택합니다. CSS3 부터 지원하는 선택자로 자손 선택자와 함께 사용됩니다.
| selector : first-child | li : first-child |
| selector : last-child | li : last-child |
| selector : nth - child | li : Nth-child(2n+1) |
| selector : th - last - child | li : Nth - last - child(2n+1) |
| selector : nfirst - of - type | h1 : first - of - type |
| selector : last - of - type | h1 : last - of - type |
| selector : nth - of - type | h1 : Nth - of - type(2n+1) |
| selector : nth - last - of - type | h1 : Nth - last - of - type(2n+1) |
<head>
<title>Document</title>
<style>
li{
list-style: none;
float: left;
}
li:first-child {border:1px solid red;}
li:last-child{border:1px solid blue;}
li:nth-child(2n){background-color:yellow}
li:nth-child(2n+1){background-color: green;}
</style>
</head>
<body>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</body>
첫번째 요소와 마지막 요소에는 각각 빨강과 파랑 테두리를 그렸습니다.
nth-child(2n)은 2번재 요소마다 스타일을 적용할 수 있습니다. 2n+1 또한 동일한 원리로 스타일을 1,3,5,7번째에 적용할 수 있게 됩니다.
형태 구조 선택자는 태그 형태를 따라 특정 요소를 선택할 수 있습니다.
<head>
<title>Document</title>
<style>
h1:first-of-type{color : green;}
h2:first-of-type{color : blue;}
h3:first-of-type{color : red;}
</style>
</head>
<body>
<h1>Heading - 1</h1>
<h1>Heading - 1</h1>
<h2>Heading - 2</h2>
<h2>Heading - 2</h2>
<h3>Heading - 3</h3>
<h3>Heading - 3</h3>
</body>
11. 문자 선택자
HTML 문서 내부에서 특정 문자를 선택합니다. (::) 기호를 사용합니다.
| ::first-letter | p::first-letter |
| ::first-line | p::first-line |
| ::after | p::after |
| ::before | h1::before |
| ::selection | p::selection |
본문의 첫번째 글자 크기와 첫번째 라인색상을 변경할 수 있습니다.
<head>
<title>Document</title>
<style>
p::first-letter{font-size: 40px;}
p::first-line{color:blue;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quo odio possimus dolorem labore ea numquam deleniti reprehenderit quisquam, ad qui distinctio autem vero eveniet odit accusamus nulla totam animi!</p>
</body>
전후 문자 선택자는 요소 전후의 공간을 선택하는 선택자입니다.
| ::before | h1::before |
| ::selection | p::selection |
p 태그 앞뒤로 그림을 삽입했습니다. 전후 문자 선택자에서는 content 속성을 사용할 수 있습니다.
<style>
p::before{content : url(https://thenounproject.com/api/private/icons/2909307/edit/?backgroundShape=SQUARE&backgroundShapeColor=%23000000&backgroundShapeOpacity=0&exportSize=752&flipX=false&flipY=false&foregroundColor=%23000000&foregroundOpacity=1&imageFormat=png&rotation=0&token=gAAAAABjvQ194rLLEYgt79KJ5R44Kaga1xve3xsqve1FNXTWBkUnlVdxvqFAmuSb-N25WgAK5gWNZXuv6iRnQvw7AG9A6Pbz6A%3D%3D)}
p::after{content : url(https://thenounproject.com/api/private/icons/2909307/edit/?backgroundShape=SQUARE&backgroundShapeColor=%23000000&backgroundShapeOpacity=0&exportSize=752&flipX=false&flipY=false&foregroundColor=%23000000&foregroundOpacity=1&imageFormat=png&rotation=0&token=gAAAAABjvQ194rLLEYgt79KJ5R44Kaga1xve3xsqve1FNXTWBkUnlVdxvqFAmuSb-N25WgAK5gWNZXuv6iRnQvw7AG9A6Pbz6A%3D%3D)}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quo odio possimus dolorem labore ea numquam deleniti reprehenderit quisquam, ad qui distinctio autem vero eveniet odit accusamus nulla totam animi!</p>
반응 문자 선택자는 사용자의 반응에 따라 스타일이 적용되는 스타일입니다.
| ::selection | p::selection |
<head>
<title>Document</title>
<style>
p::selection {
background-color: aqua;
color: blueviolet;
}
</style>
</head>p 태그로 작성된 본문을 드래그 하면 배경과 글자색을 변경할 수 있습니다.
12. 링크 선택자
하이퍼 텍스트 기능을 가진 a 태그에서 사용할 수 있습니다. a 태그를 클릭 후 한번 이동이 이뤄진 링크의 스타일을 변경할 수 있습니다.
| :link | a:link |
| :visited | a:visited |
href 속성을 가진 a태그의 스타일을 변경할 수 있습니다. 또한 한번 방문했던 a 태그의 스타일을 변경할 수 있습니다.
<style>
a{text-decoration: none;}
a:link{color:green;}
a:visited{color:yellow;}
</style>
<body>
<a href="www.naver.com">Website 1</a>
<hr>
<a href="#">Website 2</a>
</body>
13. 부정 선택자
선택 속성을 반대로 지정할 수 있습니다.
| selector:not(selector) | li:not(.item) |
아래 예제는 p 태그 중 class 속성이 c가 아닌 모든 요소를 선택합니다.
<head>
<title>Document</title>
<style>
p:not(.c){
color:blue;
}
</style>
</head>
<body>
<p class="a">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor sequi laboriosam voluptates vitae officiis fuga sapiente expedita voluptatem placeat nemo, quis nisi eos ab eveniet laborum dolores ipsa consequuntur impedit.</p>
<p class="b">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor sequi laboriosam voluptates vitae officiis fuga sapiente expedita voluptatem placeat nemo, quis nisi eos ab eveniet laborum dolores ipsa consequuntur impedit.</p>
<p class="c">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor sequi laboriosam voluptates vitae officiis fuga sapiente expedita voluptatem placeat nemo, quis nisi eos ab eveniet laborum dolores ipsa consequuntur impedit.</p>
<p class="d">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor sequi laboriosam voluptates vitae officiis fuga sapiente expedita voluptatem placeat nemo, quis nisi eos ab eveniet laborum dolores ipsa consequuntur impedit.</p>
</body>
CSS3 선택자 정리
CSS3에서 사용되는 선택자들에 대해 알아보았습니다. 이 걸 다 외울 필요는 없지만 필요할 때 마다 찾아서 사용할 정도만 이해하시고 넘어가셔도 충분합니다. 실제 웹 개발에서 CSS 선택자를 다양하게 사용하지는 않습니다. 또 사람마다 사용하는 선택자도 다르기 때문에 이해정도만 하셔도 충분하다고 생각합니다.
'Programming' 카테고리의 다른 글
| Docker Hub 사용법 (push pull) (1) | 2023.01.19 |
|---|---|
| React 정적 웹 페이지 배포하기(S3, AWS CodePipeline, 환경변수) (0) | 2023.01.19 |
| CSSOM 트리 DOM과 무엇이 다른가? (0) | 2023.01.16 |
| HTML5 웹페이지 만들기 #4 CSS3 사용법 (0) | 2023.01.13 |
| HTML5 웹페이지 만들기 #2 용어 정리 (0) | 2023.01.08 |
댓글