[CSS] CSS(Cascading Style Sheets)와 선택자(selector)

 

 

 

 

1. CSS란?

1) 스타일링을 위한 언어

2) Cascading(계단식)이라는 뜻으로 여러 스타일이 적용될 경우 충돌을 막기 위해 계단식으로 스타일이 적용됨

3) 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음

4)  CSS는 크게 선택자(selector)와 스타일(style)로 구성되어 있음

 

 

2.  선택자(selector)

 

1) 정의

스타일을 어떤 엘리먼트에 적용할지 선택하게 해주는 것

 

2) 문법

- 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술

- 각 스타일은 CSS속성과 값으로 이뤄진 키-값 쌍이며 CSS속성의 이름과 값을 콜론(:)으로 구분

 

 

 

 

3) 선택자 유형

 

① 엘리먼트 선택자(element selector)

HTML 태그의 이름으로 엘리먼트를 선택

h1 {
	color: green;
	font-size: 16px;
}

 

② id 선택자(id selector)

- 엘리먼트의 id 속성으로 엘리먼트를 선택

- id는 고유하다는 성질을 갖고 있기 떄문에 하나의 엘리먼트에 사용해야 함

- 샵(#) 뒤에 아이디를 넣어 사용

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


#section {
	background-color: black;
}

 

 

③ 클래스 선택자(class selector)

- 엘리먼트의 클래스 속성으로 엘리먼트를 선택

- 클래스는 여러 개의 엘리먼트에 적용 가능(-> 여러 개의 엘리먼트를 분류하기 위해 사용)

- 점(.) 뒤에 클래스명을 넣어서 사용

- 엘리먼트 선택자와 클래스 선택자 함께 사용한 경우, 해당 HTML 태그에 클래스가 있는 경우에만 스타일이 적용

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

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

.medium {
	font-size: 20px;
}

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

 

 

④ 전체 선택자(universal selector)

- 전체 엘리먼트에 적용하기 위한 선택자

- Asterisk(*)를 사용

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

 

 

⑤ 그룹 선택자(grouping selector)

- 여러가지 선택자를 그룹으로 묶어 하나의 스타일을 적용하기 위해 선택하는 선택자

- 각 선택자를 콤마(,)로 구분하여 적용

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

 

 

⑥ 엘리먼트의 상태와 관련된 선택자

- 엘리먼트의 다양한 상태에 따라 스타일을 적용하기 위한 선택자

- 엘리먼트 상태: 마우스 커서가 엘리먼트 위에 올라오거나 엘리먼트가 활성화 되어 있는 경우 등을 의미함

-: 상태와 관련된 대표적인 선택자 종류

:hover	마우스 커서가 엘리먼트 위에 올라왔을 때
:active	주로 <a> 태그에 사용되는데, 엘리먼트가 클릭됐을 때
:focus	주로 <input> 태그에 사용되는데, 엘리먼트가 초점(focus)를 갖고 있을 때
:checked	라디오 버튼이나 체크 박스 같은 유형의 <input> 태그가 체크되어 있을 때
:first-child	상위 엘리먼트를 기준으로 첫번째 child 일 경우
:last-child	상위 엘리먼트를 기준으로 마지막 child 일 경우

 

button:hover {
	fonot-weight: bold;
}

a:active {
	color: red;
}

input:focus {
	color: #000000;
}

option:checked {
	backgroud: #00ff00;
}

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

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