Cascading Style Sheets의 줄임말
HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의
표시 방법을 기술하기 위한 스타일 시트 언어
즉, 웹페이지를 꾸미는데 사용되는 언어
- HTMl의 구성에 따라서 부모 요소에 디자인을 적용하면 자동으로 안쪽 자식 요소까지 디자인 적용이 된다.
- HTML 문서 안에서는 <head> ~ </head> 안에 <style> ~ </style>로 공간을 만들어 작성한다.
- 선택자를 이용하여 특정 요소에 속성을 적용한다.
선택자(selector)
- 선택을 해주는 요소, 특정 요소들을 선택하여 스타일을 적용할 수 있게 해준다.
👉 무엇을 꾸민다는 것은, 일단 '선택(select)해야' 가능한 일이다.
예를 들어 firstname 이라고 이름표를 달아준 뒤,
"firstname 이란 이름표가 붙은 부분의 글씨를 지정한 색으로 바꿔라"라고 하는 것이다.
선택자의 종류
1. 전체선택자
HTML 페이지 내부의 모든 태그를 선택한다.
페이지 로딩의 속도가 느려져 자주 사용하지 않는 것이 좋다.
* { 속성값1; 속성값2; }
2. 태그선택자
HTML 요소를 직접 선택한다.
태그이름 { 속성1: 속성값1; 속성2: 속성값2; }
3. 클래스선택자
클래스이름 앞에 마침표를 붙여 .클래스명이라고 쓴다
주어진 값을 class 속성값으로 가진 HTML 요소를 찾아 선택한다.
두개 이상의 속성값을 가질 수 있다.
.클래스명{ 속성1:속성값; 속성2:속성값 }
4. ID 선택자
아이디이름 앞에 #을 붙여 #아이디 이라고 쓴다.
태그 선택자와 비슷하나
ID 속성값은 HTML 문서 내에서 오직 하나여야 한다.
우선 적용되어야 할 값에 사용한다.
#아이디{ 속성1:속성값; 속성2:속성값; }
5. 복합선택자
두개 이상의 선택자 요소가 모인 선택자이다.
태그이름#아이디 { 속성1:속성값; 속성2:속성값; }
태그이름.클래스명 { 속성1:속성값; 속성2:속성값; }
.클래스명#아이디 { 속성1:속성값; 속성2:속성값; }
💡 선택자(selector) 이름 잘 짓기(naming)
선택자 이름은 자유롭게 지을 수 있지만,
어떤 역할을 하기 위한 선택자인지 잘 알 수 있게 이름을 정하는 것이 중요!
선택자가 하나 일 때에는 관계없지만
여러 개의 선택자를 만들 때 어떤 곳을 바꿔야 하는지
쉽게 알기 위해서 이름을 직관적으로 짓는 것이 필요하다.
'Front-End > CSS' 카테고리의 다른 글
| CSS 색상, 단위 (0) | 2023.03.31 |
|---|---|
| CSS 구문(형식), 주석, 스타일 시트 (0) | 2023.02.24 |
| CSS 결합자(combinators)란? (0) | 2023.02.04 |
| CSS에 대한 보충 설명 (0) | 2023.02.03 |
| Bootstrap (0) | 2023.01.30 |