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
'프론트엔드 기본개념 복습 > CSS' 카테고리의 다른 글
[CSS] Grid (0) | 2022.02.26 |
---|---|
2021-10-02 반응형 웹 (0) | 2021.10.03 |
2021-09-22 Scss, styled-components (0) | 2021.09.23 |
2021-09-17 CSS Inline과 Block 비교 (0) | 2021.09.17 |
2021-09-17 CSS 상속과 캐스케이딩 (0) | 2021.09.17 |