[CSS] 선택자

CSS( Cascading Style Sheets)란?

HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어

 

<style></style> 선언을 해준 후 안에서 문법을 활용하여 색깔을 바꿔보자

font : 글자의 폰트를 정의하는 속성

- font-family : 글꼴(나눔고딕,굴림,돋움)

- font-size : 글자크기(px,em,rem)

- font-weight :  글자두께(bold, 100~900)

- font-style :  글자스타일(Italic)

 

폰트 속성

선택자

전체 선택자 : *로 표시되며 웹 문서 내 모든 요소 선택

태그 선택자 : 태그이름으로 표시

클래스 선택자 : 중복이 가능하고 재사용이 가능하다.

-.(점)기호로 표시

-공통되는 스타일을 적용할 경우 사용

아이디 선택자 : 중복 불가능, 한 HTML문서 당 하나만

-#기호로 표시

-HTML 구조의 공간분할을 적용할 때 사용

계층 선택자 : 특정위치의 요소를 계층적 구조로 요소 선택

 

1) 자식선택자 : >

ul > li

div > ul

 

2) 자손선택자 : 띄어쓰기

div li

body li

ul li

 

3) 후행선택자 : ~ 

li ~ li

li ~ span

 

4)근접후행선택자 : +

li + span

span + li

 

실습

그룹 선택자 : 다양한 요소들을 콤마(,)로 구분하여 요소 선택

반응 선택자: 사용자의 반응으로 생성되는 특정한 상태를 선택

- :active : 마우스로 클릭할 때 선택

- :hover : 마우스를 올린 태그를 선택

 

스타일 시트 명시도 계산

계층선택자 = 타입선택자 보다는 높고, 클래스선택자 보다는 낮다.

그룹선택자 = 타입선택자

 

!important로 확인해보기 (템플릿에서 추천, 현업에서는 절대 사용금지)

CSS 사용이 안될때 인터넷 사용기록 삭제 해보기