2021-09-17 CSS 기본 개념과 Selector

1. CSS (Casading Style Sheets)

- HTML이나 XML로 작성된 문서의 표시 방법을 기술하는 Style sheet 언어 (프로그래밍 언어, 마크업 언어 둘 다 아님!)

- HTML에서 디자인을 위한 새로운 태그들을 추가하였으나 해당 방법이 한계가 있음에 따라 CS가 등장하였다.

 

 

Rule set (줄여서 Rule)

- 선택자(Selector) : 꾸며줄 요소를 선택

- 선언(Declaration) : 꾸미길 원하는 요소의 소성 묘사 (각 선언은 ;를 통해 구분한다)

 

 

2. 선택자(Selector) 종류

(1) 전체 선택자 - *

모든 요소를 선택한다.

 

(2) 태그 선택자 (요소 선택자)  ex) p, div

특정 태그의 엘레먼트를 모두 선택한다.

 

(3) 아이디 선택자 - #id

특정 아이디를 가진 요소를 선택한다.

 

(4) 클래스 선택자 - .class

특정 클래스를 가진 요소들을 선택한다.

 

(5) 속성 선택자 - 태그[속성="값"] 혹은 태그[속성]

- 해당하는 속성값(Attribute)을 가진 태그로 한정할 수 있다.      ex) a[href="www.naver.com"]

- value를 넣지 않는 경우 해당 속성값을 가지고 있는 태그는 선택되지만 그렇지 않은 경우는 선택되지 않음 (예를 들어서 img[src]의 경우 img는 선택되지 않지만 <img src="...">들은 선택됨

- 문자열 속성 선택자 : HTML 요소가 가지고 있는 특정 속성의 값에서 특정 문자열 검색해줌

• [속성이름~="속성값"] : 속성값이 정확히 해당 value이거나 띄워쓰기 기준 분리시 해당 단어가 있는 요소들을 선택
• [속성이름|="속성값"] : 해당 value로 시작하거나 해당 단어 뒤에 "-"이 오는 요소를 모두 선택한다.
• [속성이름^="속성값"] : 해당 value로 시작하는 요소를 모두 선택한다.
• [속성이름$="속성값"] : 해당 value로 끝나는 요소를 모두 선택한다.
• [속성이름*="속성값"] : 해당 value가 들어가는(substring) 요소를 모두 선택한다.

 

(6) 수도(Pseudo) 선택자 - :

특정 요소 중 특정 상태에 있는 것들을 선택할 수 있다.  ex) button:hover