css 기본 구조
- 선택자 : 스타일을 적용하고자 하는 HTML 요소를 특정하기 위한 용도
selector 종류
1. 전체 셀렉터(universal selector)
규칙: *
설명: HTML 문서 내의 모든 요소를 선택. (head 요소도 포함)
주로 box-sizing처럼 문서 전체에 한번에 적용해야하는 스타일이 있을때 사용
* {
box-sizing: border-box;
}2. 태그 셀렉터 (Type Selector)
규칙: 태그이름(div, p...)
설명: 지정된 태그명을 가지는 요소를 선택
3. ID 셀렉터 (ID Selector)
규칙: # id이름
설명: id값을 선택하는 셀렉터입니다. id는 html에서 중복되어 사용할 수 없습니다.
4. 클래스 셀렉터 (Class Selector)
규칙: . class이름
설명: class값을 선택하는 셀렉터입니다. class는 html문서에서 중복되어 쓸 수 있습니다.
5. 어트리뷰트 셀렉터 (Attribute Selector)
규칙: 셀렉터[어트리뷰트]
설명: 지정된 어트리뷰트(속성값)을 가지는 모든 요소를 선택
a[href] { color: red; }규칙: 셀렉터[어트리뷰트="값"]
설명: 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택
a[target="_blank"] { color: red; }
input[type="text"]6. 자식 셀렉터 (Child Combinator)
규칙: 셀렉터A > 셀렉터B
설명: 자손 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택합니다.
/* div 요소의 자식요소 중 p 요소 */
div > p { color: red; }scss selector 핵심기능
선택자 중첩(Nesting)
- css에서는 자식 요소 하나하나를 선택하여 속성을 집어넣어야 했지만
SCSS는 자식요소라면 큰 범위의 중괄호{} 안에서 중첩하여 사용할 수 있다.
& : 부모 선택자 참조
가상 클래스 셀렉터 (Pseudo-Class Selector)
- 가상 클래스를 임의로 지정하여 선택하는 방법
- eg. 마우스가 들어왔을때 등의 특정 상태에만 적용되는 가상의 클래스를 지정
<style>
/* a 요소가 hover 상태일 때 */
a:hover { color: red; }
/* input 요소가 focus 상태일 때 */
input:focus { background-color: yellow; }
</style>동적 셀렉터(User action pseudo-classes)
:link 셀렉터가 방문하지 않은 링크일 때
:visited 셀렉터가 방문한 링크일 때
:hover 셀렉터에 마우스가 올라와 있을 때
:active 셀렉터가 클릭된 상태일 때
:focus 셀렉터에 포커스가 들어와 있을 때
구조 가상 클래스 셀렉터(Structural pseudo-classes)
:first-child 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택
:last-child 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택
:nth-child(n) 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택
:nth-last-child(n) 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택
:nth-child(odd) 셀렉터에 해당하는 모든 요소 중 홀수번째 자식인 요소 선택
:nth-child(even) 셀렉터에 해당하는 모든 요소 중 짝수번째 자식인 요소 선택
부정 셀렉터(Negation pseudo-class)
:not(셀렉터) 셀렉터에 해당하지 않는 모든 요소를 선택
<style>
/* input 요소 중에서 type 어트리뷰트의 값이 password가 아닌 요소를 선택 */
input:not([type=password]) {
background: yellow;
}
</style>가상 요소 셀렉터 (Pseudo-Element Selector)
요소 콘텐츠의 첫글자 또는 첫줄,
요소 콘텐츠의 앞 또는 뒤를 선택할때 가상요소 셀렉터를 사용할 수 있습니다.
::first-letter 콘텐츠의 첫글자를 선택합니다
::first-line 콘텐츠의 첫줄을 선택합니다. 블록 요소에만 적용할 수 있습니다.
::after 콘텐츠의 뒤에 위치하는 공간을 선택합니다. 일반적으로 content 어트리뷰트와 함께 사용됩니다.
::before 콘텐츠의 앞에 위치하는 공간을 선택합니다. 일반적으로 content 어트리뷰트와 함께 사용됩니다.
::selection 드래그한 콘텐츠를 선택합니다. iOS Safari 등 일부 브라우저에서 동작하지 않습니다.
<style>
/* p 요소 콘텐츠의 첫글자를 선택 */
p::first-letter { font-size: 3em; }
/* p 요소 콘텐츠의 첫줄을 선택 */
p::first-line { color: red; }
/* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
h1::before {
content: " HTML!!! ";
color: blue;
}
/* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
h1::after {
content: " CSS3!!!";
color: red;
}
/* 드래그한 콘텐츠를 선택한다 */
::selection {
color: red;
background: yellow;
}
</style>[출처]
