선택자(selector)
·선택자란 CSS로 UI 의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.
·선택자의 종류는 type선택자, id선택자, class선택자, 전체선택자, 하위선택자, 자식선택자, 인접선택자, 형제선택자, 그룹 선택자, 속성 선택자 ,가상 클래스 선택자 ,가상 요소 선택자, 종속 선택자 , 선택자의 우선순위 가있습니다.
·CSS로 속성을 부여하는 형식은 다음과 같습니다.
type선택자
선택자중 가장 간단한 선택자입니다.
html문서의 태그 이름을 선택자로 사용할 수 있습니다.
id선택자
※html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
※html 요소에id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id를 주어서는 안됩니다.※css에서는 id 선택자 앞에 '#'을 붙여야 합니다. id명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다.
class선택자
※html 문서의 여러 요소 중 같은 이름을 갖는 요소만 모아 따로 속성을 부여할수 있습니다.
※html 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다.
※여러 개의 요소에 같은 class명을 부여할수 있고, 하나의 요소에 여러 개의 class명을 부여할 수도 있습니다.
※css에서는 class 선택자 앞에 '.'을 붙여야 합니다.
전체 선택자
※페이지의 모든 요소를 가리키는 선택자로 '*'로 표시합니다.
※id나 class명이 부여되있든 상관없이 속성을 부여할수 있습니다.
※불필요하게 전체 선택자를 사용하는 것은 속도 저하의 원인이 되므로 반듯이 필요한 경우가 아니면 선택자를 명시하는 것이 좋습니다.
하위 선택자
※요소 내부에 있는 모든 해당 요소를 가리킵니다.
※css에서는 선택자 사이를 공백으로 분리 합니다.
자식 선택자
※요소 내부에 있는 해당 요소를 가리키지만 하위요소의 하위요소는 가리키지 않습니다.
※css에서는선택자 사이를 >로 분리 합니다.
인접 선택자
※현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자입니다.
※css에서는 선택자 사이를 '+'로 분리 합니다.
형제 선택자
※현재 요소와 같은 계층에 있는 요소만을 선택할 수 있습니다.
※css에서는 선택자 사이를 '~'로 분리 합니다.
그룹 선택자
※여러 선택자들을 함께 묶어 속성을 부여합니다.
※css에서는 선택자 사이를 ','로 분리 합니다.
속성 선택자
※html 요소의 속성 유무 또는 속성값을 중괄호 [ ] 안에 넣어 선택자로 사용할 수 있습니다.
| 속성 값 | 설명 |
| h1[class] | clss명을 가진 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요소 |
| a[href^="mailto"] | href 속성값이 'mailto'로 시작하 a요소 |
가상 클래스 선택자
※링크가 걸린 문자에 스타일을 부여하는 것 입니다.
| a:link | 링크가 걸린 문자에 속성을 부여하는 선택자 |
| a:visited | 링크를 클릭하여 해당 페이지에 다녀온 경우의 속성을 부여하는 선택자 |
| a:hover | 링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자 |
| a:active | 링크 걸린 글자가 활성화 되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다 만 경우) |
| a:focus | 링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자 (키보드의 [Tap]키 등으로 포커스가 나타날 경우) |
가상 요소 선택자
※요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자 입니다.
| :first- letter | 요소의 첫글자 |
| :first-line | 요소의 첫 줄 |
| :first-child | 같은 요소 중 첫 번째 요소 |
| :last-child | 같은 요소 중 마지막 요소 |
| :nth-child(n) | 같은 요소 중 n번째 요소 |
| :before | 요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소) |
| :after | 요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소) |
:before 나 :after는 마크업할 당시에는 없었던 요소를 css에서 넣어줄 때 사용할 수 있습니다.
새로 생성된 공간에 내용을 넣어 줄때에는 content속성을 이용하여 content="~"와 같이 기술합니다.
종속 선택자
※type 선택자와 id 선택자, class 선택자가 결합된 형태 입니다.
| <p id="abc">종속선택자</p> |
마크업이 위와 같을때 "#abc"와 "p#abc" 는 같은 종속 선택자 지만 우선 순위는 "p#abc"가 더 높습니다.
선택자의 우선순위
※같은 선택자가 여러 css 명령을 중복을 받으면 우선 순위가 같은 선택자는 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높습니다.
※최우선으로 css를 적용해야 할 경우에는 선택자 속성을 부여하는 마지막에 "!important"를 붙이면 됩니다.
ex) p { color: red !important; }
※전체 우선순위는 다음과 같습니다.
※부여한 속성이 적용되지 않는다면 이전에 작성한 css중 더 높은 순위를 갖는 선택자가 있는지 의심 해봐야 합니다.