POIEMAWEB 을 운영하는 이웅모 개발자님의 내용을 공부하기 위한 요약 정리
이론 보단 각 용어를 간략하게 정리하는 용도
↓↓↓↓↓↓이론을 아래 링크 참조 ↓↓↓↓↓↓
https://poiemaweb.com/Front-end
Front End | PoiemaWeb
poiemaweb.com
CSS3 Selector - CSS(Cascading Style Sheets)의 HTML 요소를 선택하는 용도
1.전체 셀렉터 (Universal Selector)
- * : HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소 포함)
<style>
/* 모든 요소를 선택 */
* { color: red; }
</style>2.태그 셀렉터 (Type Selector)
- 태그명 : 지정된 태그명을 가니느 요소를 선택 한다.
<style>
/* 모든 p 태그 요소를 선택 */
p { color: red; }
</style>3. ID 셀렉터 (ID Selector)
- #id 어트리뷰트 값 : id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다.
<style>
/* id 어트리뷰트 값이 p1인 요소를 선택 */
#p1 { color: red; }
</style>4. 클래스 셀렉터 (Class Selector)
- .class 어트리뷰트 값 : class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다.
<style>
/* class 어트리뷰트 값이 container인 모든 요소를 선택 */
/* color 어트리뷰트는 자식 요소에 상속된다. */
.container { color: red; }
/* not supported in IE */
</style>5. 어트리뷰트 셀렉터 (Attribute Selector)
- 셀렉터[어트리뷰트] : 지정된 어트리뷰트를 갖는 모든 요소를 선택한다.
<style>
/* a 요소 중에 href 어트리뷰트를 갖는 모든 요소 */
a[href] { color: red; }
</style>- 셀렉터[어트리뷰트=”값”] : 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다.
<style>
/* a 요소 중에 target 어트리뷰트의 값이 "_blank"인 모든 요소 */
a[target="_blank"] { color: red; }
</style>
- 셀렉터[어트리뷰트~=”값”] : 지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다.
<style>
/* h1 요소 중에 title 어트리뷰트 값에 "first"를 단어로 포함하는 요소 */
h1[title~="first"] { color: red; }
</style>- 셀렉터[어트리뷰트|=”값”] : 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다.
<style>
/* p 요소 중에 lang 어트리뷰트 값이 "en"과 일치하거나 "en-"로 시작하는 요소 */
p[lang|="en"] { color: red; }
</style>- 셀렉터[어트리뷰트^=”값”] : 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다.
<style>
/* a 요소 중에 href 어트리뷰트 값이 "https://"로 시작하는 요소 */
a[href^="https://"] { color: red; }
</style>- 셀렉터[어트리뷰트$=”값”] : 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다.
<style>
/* a 요소 중에 href 어트리뷰트 값이 ".html"로 끝나는 요소 */
a[href$=".html"] { color: red; }
</style>- 셀렉터[어트리뷰트*=”값”] : 지정된 어트리뷰트 값을 포함하는 요소를 선택한다. ( "~="와 구분 필요)
<style>
/* div 요소 중에서 class 어트리뷰트 값에 "test"를 포함하는 요소 */
div[class*="test"] { color: red; }
</style>6. 복합 셀렉터 (Combinator)
6.1 후손 셀렉터 (Descendant Combinator)
- 셀렉터A 셀렉터B
<style>
/* div 요소의 후손요소 중 p 요소 */
div p { color: red; }
</style>6.2 자식 셀렉터 (Child Combinator)
- 셀렉터A > 셀렉터B
<style>
/* div 요소의 자식요소 중 p 요소 */
div > p { color: red; }
</style>6.3 형제(동위) 셀렉터 (Sibling Combinator)
6.3.1 인접 형제 셀렉터(Adjacent Sibling Combinator)
- 셀렉터A + 셀렉터B ( ~ 의 차이 한 묶음의 ul만 지정)
<style>
/* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */
p + ul { color: red; }
</style>6.3.2 일반 형제 셀렉터(General Sibling Combinator)
- 셀렉터A ~ 셀렉터B
<style>
/* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/
p ~ ul { color: red; }
</style>7. 가상 클래스 셀렉터 (Pseudo-Class Selector)
- 가상 클래스는 마침표(.) 대신 콜론(:)을 사용한다.
- CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
7.1 링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)
- :link : 셀렉터가 방문하지 않은 링크일 때
- :visited : 셀렉터가 방문한 링크일 때
- :hover : 셀렉터에 마우스가 올라와 있을 때
- :active : 셀렉터가 클릭된 상태일 때
- :focus : 셀렉터에 포커스가 들어와 있을 때
<style>
/* a 요소가 방문하지 않은 링크일 때 */
a:link { color: orange; }
/* a 요소가 방문한 링크일 때 */
a:visited { color: green; }
/* a 요소에 마우스가 올라와 있을 때 */
a:hover { font-weight: bold; }
/* a 요소가 클릭된 상태일 때 */
a:active { color: blue; }
/* text input 요소와 password input 요소에 포커스가 들어와 있을 때 */
input[type=text]:focus,
input[type=password]:focus {
color: red;
}
</style>7.2 UI 요소 상태 셀렉터(UI element states pseudo-classes)
- :checked : 셀렉터가 체크 상태일 때
- :enabled : 셀렉터가 사용 가능한 상태일 때
- :disabled : 셀렉터가 사용 불가능한 상태일 때
<style>
/* input 요소가 사용 가능한 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:enabled + span {
color: blue;
}
/* input 요소가 사용 불가능한 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:disabled + span {
color: gray;
text-decoration: line-through;
}
/* input 요소가 체크 상태일 때,
input 요소 바로 뒤에 위치하는 인접 형제 span 요소를 선택 */
input:checked + span {
color: red;
}
</style>7.3 구조 가상 클래스 셀렉터(Structural pseudo-classes)
- :first-child : 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.
- :last-child : 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다.
<style>
/* p 요소 중에서 첫번째 자식을 선택 */
p:first-child { color: red; }
/* p 요소 중에서 마지막 자식을 선택 */
/* body 요소의 두번째 p 요소는 마지막 자식 요소가 아니다.
body 요소의 마지막 자식 요소는 div 요소이다. */
p:last-child { color: blue; }
</style>- :nth-child(n) : 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.
- :nth-last-child(n) : 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.
<style>
/* ol 요소의 자식 요소인 li 요소 중에서 짝수번째 요소만을 선택 */
ol > li:nth-child(2n) { color: orange; }
/* ol 요소의 자식 요소인 li 요소 중에서 홀수번째 요소만을 선택 */
ol > li:nth-child(2n+1) { color: green; }
/* ol 요소의 자식 요소인 li 요소 중에서 첫번쨰 요소만을 선택 */
ol > li:first-child { color: red; }
/* ol 요소의 자식 요소인 li 요소 중에서 마지막 요소만을 선택 */
ol > li:last-child { color: blue; }
/* ol 요소의 자식 요소인 li 요소 중에서 4번째 요소 요소만을 선택 */
ol > li:nth-child(4) { background: brown; }
/* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 홀수번째 요소만을 선택 */
ul > :nth-last-child(2n+1) { color: red; }
/* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 짝수번째 요소만을 선택 */
ul > :nth-last-child(2n) { color: blue; }
</style>7.4 부정 셀렉터(Negation pseudo-class)
- :not(셀렉터) : 셀렉터에 해당하지 않는 모든 요소를 선택한다.
<style>
/* input 요소 중에서 type 어트리뷰트의 값이 password가 아닌 요소를 선택 */
input:not([type=password]) {
background: yellow;
}
</style>7.5 정합성 체크 셀렉터(validity pseudo-class)
- :valid(셀렉터) : 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
- :invalid(셀렉터) : 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.
<style>
input[type="text"]:valid {
background-color: greenyellow;
}
input[type="text"]:invalid {
background-color: red;
}
</style>8. 가상 요소 셀렉터 (Pseudo-Element Selector)
- 가상 요소에는 두개의 콜론(::)을 사용한다.
- CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
- ::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>'공부 > HTML, CSS' 카테고리의 다른 글
| JS - JSON 사용 하기 - 자바스크립트 활용 - (0) | 2022.02.28 |
|---|---|
| Threejs 따라하기 1 - 설치하기 (0) | 2022.02.23 |