[SEB FE 44기] Section1

다양한 CSS Selector

기본 셀렉터
1. 전체 셀렉터 : 문서의 모든 요소 선택
```
* { }
```
1. 태그 셀렉터 : 태그명을 가진 모든 요소 선택 (복수 선택 가능)
```
h1 { }
div { }

section, h1 { }
```
1. ID 셀렉터 : #id로 입력하여 선택
```
#only { }
```
1. class 셀렉터 : .class 로 입력하여 선택, (같은 class를 가진 모든 요소 선택)
```
.widget { }
.center { }
```
1. attribute 셀렉터 : 같은 속성을 가진 요소 선택
```
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }
```

자식 / 후손 / 형제 셀렉터
1. 자식 셀렉터 ** : 첫 번째 입력한 요소의 바로 아래 자식 요소 선택
  1. <heraer> 요소 바로 아래의 두 개의 <p> 요소는 선택, <span> 요소의 자식인 <p> 요소는 선택되지않음
```
header > p { }
```
```
<header>
	<p> 
		<span>
			<p></p>
		</span>
	</p>
	<p> 
		<span>
			<p></p>
		</span>
	</p>
</header>
```
1. 후손 셀렉터 : 첫 번째로 입력한 요소의 후손 선택
  1. <header> 요소의 자식인 <p>요소 뿐 아니라 <herder>요소의 자식의 자식인 <p> 요소까지 모두 선택
```
header p {}
```
```
<header>
	<p>
		<span>
			<p>
			</p>
		</span>
	</p>
	<p>
		<span>
			<p>
			</p>
		</span>
	</p>
</header>
```
1. 형제 셀렉터 : 같은 부모 요소를 공유하면서, 첫 번 째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
```
section ~ p { }
```
```
<header>
	<section></section>
	<p></p> 
	<p></p> 
	<p></p> 
</header>
```
1. 인접 형제 셀렉터 : 같은 부모 요소를 공유하면서, 첫 번 째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
```
section + p { }
```
```
<header>
	<section></section>
	<p></p> 
	<p></p>
	<p></p>
</header>
```

기타 셀렉터

가상 클래스 셀렉터 : 요소의 상태 정보에 기반해 요소를 선택

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

구조 가상 클래스 셀렉터

p:first-child { } 
ul > li:last-child { } 
ul > li:nth-child(2n) { } 
section > p:nth-child(2n+1) { } 
ul > li:first-child { } 
li:last-child { }
div > div:nth-child(4) { } 
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { } 
div:last-of-type { }
ul:nth-of-type(2) { } 
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type="password"]) { }  
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }

오늘 배운 것

CSS 기초

박스모델

CSS 셀렉터

느낀 점

인터넷 강의로 HTML, CSS 기초만 볼 때는 쉬워보였지만 수업하고 과제를 시작하면 턱턱 막힌다..

예습, 복습은 진짜 필수라고 생각이 든다

(입문자인 나에게 조급해져서 더 어렵게 다가오는 걸까?)

(다른 분들이 한 과제를 보면 정말 감탄만 나온다 정말 너무 다들 잘하신다!)

내일 페어프로그레밍이 시작된다 민폐가 될지 걱정이 되고, 정신이 없는 느낌.

잠들기 전에 그동안 배운 걸 다시 한 번 복습하고 자야겠다

저작자표시 비영리 변경금지

lvd-hy

[SEB FE 44기] Section1_CSS

댓글

티스토리툴바