“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
선택자(selector)
선택자란 말 그대로 선택을 해주는 요소이며 CSS로 UI의 어느 부분을 디자인할지, 즉 표현하고 규칙을 정할 대상을 선택자라고 부릅니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
CSS로 속성을 하는 부여하는 방법입니다. 여기에서 h1은 선택자 { }는 선언부로 선언부 안에 color라는 속성 그리고 red라는 속성값을 표시하며 속성 설정간에는 ";"를 표시하여 구분해준 후 또 다른 속성과 속성값으로 선언을 할 수 있습니다. 마지막 속성 끝에는 구분자를 생략할 수 있습니다.
01. 태그선택자(type Selector)
태그 선택자는 html문서의 태그 이름을 직접 지칭하는 가장 간단한 선택자입니다. Css에 대한 스타일만 지정이 되어있으므로, 태그에는 개발자가 지정해주는 스타일이 적용되지 않습니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
02. id 선택자(id Selector)
html문서 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. html요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하는데 다른 요소에 같은 id명을 또 부여할 수는 없습니다. css에서 id선택자 앞에 #을 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며 주로 영문자로 시작해야 합니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
03. class 선택자(class Selector)
여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. 요소에 같은 이름을 부여할 때에는class로 이름을 붙입니다. 즉 여러개의 요소에 같은 class명을 부여할 수 있습니다. class선택자 앞에 "."을 붙여야 사용이 가능합니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
04. 전체 선택자
전체 선택자는 페이지의 모든 요소를 가리키는 선택자로서 '*'를 사용합니다. 이 때 class명이나 id명이 부여되어도 상관없이 모든 요소에 속성값을 더해줄 수 있습니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
05. 하위 선택자
하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백으로 분리합니다. 예제에서 abox클래스 내부에 모든 p태그들의 문자를 파란색으로 표시하도록 속성을 부여하고 있습니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
06 .자식 선택자
자식 선택자는 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소는 가리키지 않으며 선택자 사이를 '>'으로 분리합니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
07 .인접 선택자
인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 두고 '+'로 분리합니다. 예제에서 전체 p 요소 중 h1요소 바로 다음에 나오는 p태그들의 문자만을 파란색 속성을 부여하고 있습니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
08.형제 선택자
형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택할 수 있으며 '~'로 구분합니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
09.그룹 선택자
그룹 선택자는 여러 선택자들을 ','로 구분하여 함께 묶어 속성을 부여하는 것입니다.
See the Pen Untitled by younajeong (@younajeong) on CodePen.
10. 속성 선택자
속성 유무 또는 속성값을 중괄호[ ] 안에 넣어 선택자로 사용할 수 있습니다.
| 속성값 | 설명 |
| h1[class] | class명을 가진 h1요소 |
| img[alt] | alt 속성을 가진 img 요소 |
| p[class="abc"] | class명이 유일하게 'abc'인 'p'요소 |
| 속성명 | 설명 |
| p[class~="abc"] | class명이 유일하게 'abc'이거나 여러 개의 class명의 중 하나가 'abc'인 p요소 |
| p[class|="abc"] | class명이 'abc'이거나 'abc-'로 시작하는 p요소 |
| p[class^="abc"] | class명이 철자 'abc'로 시작하는 p요소 |
| p[class$="abc"] | class명이 철자 'abc'로 끝나는 p요소 |
| p[class*="abc"] | class명에 철자 'abc'가 포함되어 있는 p요소 |
| p[href^="mailto"] | href 속성값이 'mailto'로 시작하는 p요소 |
11.가상클래스 선택자
가상클래스 선택자란 링크가 걸린 문자에 스타일을 부여하는 것입니다. 가상클래스를 둘 이상 사용할 경우 표 순서대로 기술합니다. html5에는 일반요소도 :hover적용 되어 실제 예제 작업에도 많이 사용됩니다.
| 속성 값 | 설명 |
| a:link | 링크가 걸린 문자에 속성을 부여하는 선택자 |
| a:visited | 링크를 클릭하여 해당 페이지르 갔다가 돌아온 경우읙 속성을 부여하는 선택자 |
| a:hover | 링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자 |
| a:active | 링크 걸린 글자가 활성활되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하다가 만 경우) |
| a:focus | 링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자 (키보드 [Tab]키 등으로 포커스가 나타날 경우) |
12.가상요소 선택자
가상요소 선택자는 요소명에 id나 class를 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자 입니다.
| 속성 값 | 설명 |
| :first-letter | 요소의 첫 글자 |
| :first-line | 요소의 첫 줄 |
| :first-child | 같은 요소 중 첫번째 요소 |
| :last-child | 같은 요소 중 마지막 요소 |
| :nth-child(n) | 같은 요소 중 n번째 요소 |
| :before | 요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소) |
| :after | 요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소) |
:before나 :after 마크업할 당시에는 없었던 요소를 CSS 에서 넣어줄 떄 사용할 수 있습니다. 새로 생성된 공간에 내용을 넣어 줄때에는 content 속성을 이용하여 content="~" 와 같이 기술합니다.
13.중속 선택자
종속 선택자는 type 선택자와 id선택자, class 선택자가 결합된 형태입니다.
| <p id="atxt">선택자의 다양한 표현 </p> |
마크업이 위와 같을 대 #atxt와 p#atxt는 같은 선택자 입니다. 다만 우선순위는 p#atxt 가 더 높습니다.
14.선택자의 우선순위
같은 선택자가 여러 CSS 명령을 중복으로 받으면 어떤 일이 일어날까요? 일반적으로 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것 보다 우선수위가 높습니다. 선택자마다 우선순위를 값으로 매긴다면 표와 같습니다.
| 선택자 | 우선수위 |
| 전체 선택자 (*) | 0 |
| type 선택자 (p,h1,u,...l) | 1 |
| 가상 선택자 (:first-child,...) | 10 |
| class 선택자(.abc,...) | 10 |
| id 선택자 (#abc,...) | 100 |
요소에 직접 style=""형식으로 css를 기술하는 인라인 스타일은 위의 모든 선택자보다 우선으로 실행됩니다. 지금까지 나온 방법보다 최우선으로 css를 적용시키려면 선택자에 속성을 부여하는 마지막에 "!important"를 붙이면 됩니다.