Selector : 선택자
HTML의 요소는 Element, CSS은 Property라고 한다.
CSS에서 선택자는 HTML의 요소(E)와 조건(F, Filter)을 조합한다.
샘플 코드에서 E는 Element, F는 Filter를 의미한다.
Basic selectors : 기본선택자
기본 선택자(basic selectors)의 종류
전체 선택자(Universal selector) ' * ' : 범위 내(요소 내부의), 모든 요소를 선택.
=> 모든 태그를 대상으로 스타일을 적용할 때 사용(' * '(별)으로 사용)
=> 주로 태그의 스타일 초기화를 할 때 사용하기도 한다
ex ) * { color: red; }
태그 선택자 (Type selector) : 태그 이름이 E인 요소를 선택.
=> 특정 태그를 대상으로 스타일을 적용할 때 사용
=> 디자인 시안을 통해 공통적으로 적용되어야 하는 태그들의 디폴트 디자인을
세팅할 경우 태그 선택자를 통해 기본 디자인을 설정한다.
ex) p { color: red; }
클래스 선택자(Class selector) ' . ' : html class속성값이 E인 요소.
=> 요소의 클래스 속성의 동일한 값을 대상으로 스타일을 적용할 때 사용 (' . '(점)과 같이 사용)
=> 설계를 통해 디자인이 나올경우 해당 디자인을 원자화 하여 컴포넌트로
단위별 디자인 요소를 추출할 때 클래스 단위로 추출하는 경우가 많다.
=> 디자인을 각 요소에 적용할 시 주로 클래스 선택자를 사용하며 디자인을
핸들링하는 가장 중요한 선택자 이기도 하다.
ex) .box1 { color: red; }
ID선택자(ID selector) : html id 속성의 값이 E인 요소
ID는 문서내 고유하기때문에 1개에만 적용 !!!
ID 선택자 ' # '
=> 요소의 클래스 속성의 동일한 값을 대상으로 스타일을 적용할 때 사용 (' # '(샾)과 같이 사용)
=> 클래스와 유사하지만 ID 값은 문서 내에 1개 밖에 존재 할수 없기에 주요한 컨텐츠나
중요고 고유한 파트에 ID 값을 부여해서 디자인을 핸들링 할 때 사용된다.
ex) #box2 { color: red; }
Combinators selectors : 복합선택자
자식 : child 차일드 : 직속 하위요소.
부모 : parent : 직속 상위요소.
후손 : 자손, 하위의 모든 요소.
조상 : 상위 모든 요소.
형제 : 같은 부모(직속)을 공유하는 요소.
E.F
일치(Basic combinator) : h1 , p를 동시에 만족하는 요소
ex ) h1 p {color : blue };
E>F
자식(Child combinator) : E의 자식요소 F를 선택.
태그 div의 자식이면서, 클래스를 box1을 가지고 있는 요소만 선택
ex) div>.box1 { color: red; }
E F(띄어쓰기)
후손(자손, 하위)선택자(Descendant combinator) : E의 자손 요소 F를 선택
.div .box1 { color: red; }
E + F
인접 형제 선택자
" + " : 해당 요소에 인접한 아래의 요소에 디자인을 적용할 때 사용하는 기호
1. 스스로를 제외한다.
2. 바로 다음의 형제요소가 없다면 아무것도 선택하지 않는다.
3. 아래로만 작용.
<style>
h1 + ul {
color: blue;
font-weight: bold;
}
h1 + h3 {
color :red
}
</style>
</head>
<body>
<section id="container">
<h3>이것은 샘플입니다</h3>
<h1>예약 및 요금</h1>
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
</ul>
</section>
</body>
</html>
E ~ F
형제 선택자
" ~ " 기호를 사용한다.
: 기준 태그를 기점으로 아래의 같은 선상의 해당 태그에 디자인을 적용시키기 위해 사용되는 css 기호
1. 스스로를 제외한다.
2. 선택한 태그가 같은선상에 없다면 아무것도 선택하지 않는다.
3. 아래로만 작용.
<style>
h1 ~ h2 {
color: blue;
}
</style>
</head>
<body>
<div>
<h2>부제목1</h2>
<h1>제목</h1>
<h2>부제목2</h2>
<h2>부제목3</h2>
<h3>부부제목1</h3>
<h2>부제목4</h2>
</div>
<div>
<h2>부제목5</h2>
</div>
</body>
</html>
Pseudo-classes selectors : 가상 클래스 선택자
: 콜론(1개)으로 표시.
가상 클래스는 : 콜론 1개.(::콜론2개는 가상요소선택자이다.)
E:link
ex) a:link { color: red; }
a태그가 사용되기 전 상태에 적용
E:visted
ex) a:visted { color: red; }
a태그가 사용된 후의 상태에 적용
E:hover
ex) .a:hover { color: red; }
E에 마우스(포인터)가 올라가 있는 동안에만 적용
E:active
ex) .div:active { width: 200px; }
E를 마우스로 클릭하고있는 동안에
E:focus
ex) .input:focus { border-color: red; }
E가 포커스 된 동안에.
포커스를 받을 수 있는 대화형 콘텐츠에서 사용 가능. (input, img, tabindex)
E:checked
:checked => 라디오 버튼과 체크박스 버튼에 주로 사용되는 가상 선택자로서
체크가 되었을 때의 css 디자인을 적용할 때 쓴다. 주로 인접형제 선택자와 페어로 많이 사용된다.
E:first-child
first-child => 부모요소의 첫번 째 자식 요소에 스타일 적용
ex ) .menu li:first-child { color: red; }
1. menu클래스의 자손 중에
3. li 태그의첫번째 요소.
E:last-child
first-child => 부모요소의 마지막번 째 자식 요소에 스타일 적용
E가 형제 요소 중 마지막 요소일 경우.
E:nth-child(n) : NTH CHILD
E가 형제 요소 중 n번째 요소라면 선택.
(n 키워드 사용시 0부터 해석(Zero-base))
<style>
/* :first-child => 부모요소의 첫번 째 자식 요소에 스타일 적용 */
li:first-child {
background-color: darkseagreen;
}
/* nth-child => 부모요소의 n번째 자식 요소에 스타일 적용 */
/* 짝수는 2n ,홀수는 2n+1 */
li:nth-child(2n) {
background-color: deepskyblue;
}
li:nth-child(5) {
background-color: gold;
}
li:nth-child(3), li:nth-child(9) {
background-color: indianred;
}
</style>
</head>
<body>
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
<li>아이템4</li>
<li>아이템5</li>
<li>아이템6</li>
<li>아이템7</li>
<li>아이템8</li>
<li>아이템9</li>
<li>아이템10</li>
</ul>
</body>
</html>
E:nth-of-type(n)
E와 동일한 타입(태그)인 형제 요소 중 E가 n번째 요소라면 선택.
<style>
/* nth-child 아 nth-of-child 의 차이점 */
/* nth-child 는 부모 요소내의 모든 요소가 순번으로 인식된다. */
div > p:nth-child(3) {
background-color: yellow;
}
/* nth-of-type는 타켓으로 삼은 요소만 순번으로 인식된다. */
div > p:nth-of-type(3) {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div>
<p>p태그1</p>
<span>span태그1</span>
<p>p태그2</p>
<span>span태그2</span>
<p>p태그3</p>
<span>span태그3</span>
</div>
</body>
</html>
E:not(S)
ex ) .fruits li:not(.strawberry) { color: red; }
부정 선택자(Negation Selector) : S가 아닌 E 선택.
선택할 Element 중에서 특정 조건만 걸러낸다.
Pseudo-Elements Selectors : 가상 요소 선택자
가상클래스 선택자와 거의 동일하지만, 조건에 요소를 사용한다.
:: 콜론 2개로 표기.
E::before
E 요소 내부의 앞에, 내용(content)을 삽입.
내용을 넣기 위해서는 content 속성이 필수이다.
E::after
E 요소 내부의 뒤에, 내용(content)을 삽입.
[attr]
속성 attr(어트리뷰트)을 포함한 요소 선택.
[attr=value]
속성 attr을 포함하며, 속성 값이 value인 요소 선택.
value 부분에 ""쌍따옴표를 생략해도 되지만, 값이라는 뜻으로 넣어주는 것이 가독성이 좋을 것 같다.
[attr^=value]
속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택. (^ 캐롯기호)
[attr$=value]
속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택.
<style>
/* 속성 선택자 */
/* 속성을 대상으로 디자인을 적용 시킬 때 사용하는 선택자 */
/* 보통 class나 id같은 접근자 만으로 접근하기 힘들거나 접근자를 추가해서 사용이 어려울 경우 사용할 수 있다 */
/* 보통 class나 id 같은 접근자 만으로 접근하기 힘든 접근자를 추가해서 추가해서 사용하는 경우가 대부분이다. */
/* 속성 선택자는 반드시 []안에 속성과 그 안에 속성 값을 넣어 사용할 수 있으며 때에 따라서는 속성이름만 사용하여
선택자를 사용할 수 있다. */
/* [attr] : attr이라는 속성이 해당 태그에 선언되어 있으면 그 태그에 스타일이 적용된다. */
[alt] {
color: red;
}
/* [atrr="value"] : attr이라는 속성에 값이 value면 그 태그에 스타일이 적용된다. 무조건 같아야 하며 포함되던가
앞에 위치하던 뒤에 위치하던 경우는 포함되지 않는다. */
[alt="c1"] {
color: blue;
}
/* [atrr~="value"] : attr이라는 속성에 여러개의 value 값 중 하나만 갖고 있어도 해당 속성에 스타일이 적용된다.
여러개의 값이라는 의미는 attr 안에 value들이 스페이스 구분자로 나열된 경우를 뜻한다.
ex ) attr = "value1 value2 value3"
*/
[alt~="c3"] {
color: green;
}
/* [atrr^="value"] : attr이라는 속성에 해당 value의 값으로 시작하면 해당 속성에 스타일이 적용된다.
앞에 속성 값 value의 시작이 지정한 "value"로 시작하면 해당 요소는 스타일 적용 대상으로 판단하고
스타일이 적용된다. */
[class^="d"] {
color: #d2b48c;
}
/* [atrr$="value"] : attr이라는 속성에 해당 value의 값으로 끝나면 해당 속성에 스타일이 적용된다.
무조건 value값의 끝이 지정한 "value"로 끝나야한다. */
[class$="5"] {
color: violet;
}
/* [atrr*="value"] : attr이라는 속성에 value 값이 지정한"value"이 공통되게 포함이 되있다면
해당 속성에 스타일이 적용된다. */
[class*="e"] {
color: red;
}
</style>
</head>
<body>
<div alt="c1" class="c1">div1 입니다(속성값이 "c1" 입니다.)</div>
<div alt="c2">div2 입니다</div>
<div alt="c3 c4">div3 입니다(속성값에 c3가 포함되어 있다)</div>
<div alt="c3">div4 입니다(속성값에 c3가 포함되어 있다)</div>
<div class="d1">div4 입니다(속성값이 d로 시작한다)</div>
<div class="d2">div5 입니다(속성값이 d로 시작한다)</div>
<div class="d3">div6 입니다(속성값이 d로 시작한다)</div>
<div class="d5">div7 입니다(속성값이 5로 끝난다)</div>
<div class="h5">div8 입니다(속성값이 5로 끝난다)</div>
<div class="t5">div9 입니다(속성값이 5로 끝난다)</div>
<div class="abcdefg">div10 입니다(속성값에 공통되게 e가 들어가있다)</div>
<div class="kdefghi">div11 입니다(속성값에 공통되게 e가 들어가있다)</div>
<div class="bcdefg">div12 입니다(속성값에 공통되게 e가 들어가있다)</div>
</body>
</html>
'공부노트 > CSS3' 카테고리의 다른 글
| [CSS] Position (0) | 2021.08.29 |
|---|---|
| [CSS]box-sizing (0) | 2021.08.26 |
| [CSS] font (0) | 2021.08.23 |