처음 만난 리액트(React) : section 15. Styling - 1 CSS와 selector

💡 CSS와 selector

CSS

Cascading Style Sheets

스타일링을 위한 일종의 언어

Selector

선택자

Element에 스타일이 적용되는 규칙

Selector의 유형

1. Element selector

특정 html태그를 선택

Element selector를 사용한 예시

h1 {
  	color: green;
}

2. ID selector

ID 기반으로 선택

ID selector를 사용한 예시

<div id="section">
  	...
</div>

#section {
	background-color: black;
}

3. Class selector

여러 개의 Element를 분류하기 위해 사용

Class selector를 사용한 예시

<span class="medium">
  	...
</span>

<p class="medium">
  	...
</p>

.medium {
	font-size: 20px;
}

p.medium {
	font-size: 20px;
}

Element selector와 Class selector를 함께 사용한 예시

h1.medium {
	font-size: 20px;
}

4. Universal selector

전체 Element를 적용

Universal selector를 사용한 예시

* {
	font-size: 20px;
    color: blue;
}

5. Grouping selector

여러가지 선택자를 그룹으로 묶어 하나의 style로 적용

Grouping selector를 사용한 예시

h1, h2, p {
	color: black;
    text-align: center;
}

6. Element의 상태와 관련된 selector

• :hover
  • 마우스 커서가 element 위에 올라왔을 때
• :active
  • 주로 a태그 (link)에 사용, element가 클릭됐을 때를 의미
• :focus
  • 주로 input태그에서 사용, element가 초점을 갖고 있을 경우를 의미
• :checked
  • radio button이나 checkbox 같은 유형의 input태그가 체크되어 있을 경우를 의미
• :first-child, :last-child
  • 상위 element를 기준으로 각각 첫 번째, 마지막 child일 경우를 의미

상태와 관련된 selector를 사용한 예시

button:hover {
	font-weight: bold;
}

a:active {
	color: red;
}

input:focus {
	color: #0000000;
}

option:checked {
	background: #00ff00;
}

p:first-child {
	background: #ff0000;
}

p:last-child {
	background: #0000ff;
}

❕ 참고링크
https://www.w3schools.com/css/css_selectors.asp

http://www.w3schools.com/csSref/css_selectors.asp