CSS(Cascading Style Sheets)
; HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어
- 선택자 + 선언부로 구성
선택자 { 선언부 }
선택자
; CSS를 적용하고자 하는 HTML 요소
전체 선택자 * ; 모든 요소를 선택 ex) div>*
태그 선택자 ABC ; 태그 이름으로 요소 선택 ex) div
class 선택자 .ABC ; 특정 집단의 여러 요소 한 번에 선택 ex) .headings
ID 선택자 #ABC ; 하나의 아이디는 하나의 요소에만 사용 ex) #heading
복합 일치 선택자 ABC.XYZ ; 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 ex) span.orange ; span이라는 태그이면서, class=orange인 요소
복합 자식 선택자 ABC > XYZ ; 선택자 ABC의 자식 요소 XYZ 선택 ex) ul > .orange
하위(후손) 선택자 ABC XYZ ; 선택자 ABC의 하위 요소 XYZ 선택 ex) div .orange
인접 형제 선택자 ABC + XYZ ; 선택자 ABC의 다음 형제 요소 XYZ 선택 ex) .orange + li ; li 태그 중 .orange가 가지고 있는 요소의 다음 형제 요소 1개
일반 형제 선택자 ABC ~ XYZ ; 선택자 ABC의 다음 형제 요소 XYZ 모두 선택 ex) .orange ~ li ; .orange 다음에 있는 li 모두 선택
속성 선택자 [ABC="XYZ];속성 ABC을 포함한 요소 선택 ex) [type="password"] ; type="password라는 속성의 요소 선택
선언부
속성 : 값 ;
- 속성 ; 스타일의 종류
- 값 ; 스타일의 값
팁
주석
/* 주석내용 */
CSS 적용 방법
인라인 스타일
; HTML 요소 내부에 style 속성 사용 ex) <h2 style="color:red; margin:20px;">
- 비추, CSS 우선순위가 너무 강해서 유지보수에 힘듬
내부 스타일 시트
; HTML 문서 내의 <head>태그에 <style>태그 넣기 ex) <style>~</style>
외부 스타일 시트
; HTML 문서 외부의 스타일 시트 파일을 <head>태그에 <link>태그를 이용하여 연결
ex) <link rel=stylesheet" href="./css/main.css">
- HTML에 CSS를 가져옴(병렬 연결) ; 한번에 CSS들을 연결
import 방식
; CSS의 import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결
ex) @import url("./box.css");
- CSS에 CSS를 연결함(직렬 연결) ; 기존 CSS가 연결되어있지 않다면 나중 CSS도 연결 안됨
- 많이 사용하지는 않음
브라우저 기본 css값 초기화
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
- html>head에 넣기
https://www.jsdelivr.com/package/npm/reset-css
사이트 들어가면 있음
강제 상속 ; inherit
ex) {height : inherit} ; 부모 요소의 height 속성을 강제상속 받음
선택자 우선순위
; 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법
1. 우선순위 높은 것 먼저
2. 우선순위가 같으면, 가장 마지막에 해석된 선언 우선
css속성에 !important ; 0순위 -> 비추
인라인 선언 ; 1순위 -> 비추
id선택자 ; 2순위. 100점
class선택자 ; 3순위. 10점
태그 선택자 ; 4순위. 1점
전체 선택자 ; 5순위. 0점
'WebProgramming > CSS' 카테고리의 다른 글
| [SCSS] SCSS란 ? / SCSS 문법 (0) | 2022.06.13 |
|---|---|
| [CSS] CSS 가이드라인 & 작성 팁 (0) | 2022.05.29 |
| [CSS] 전환(transition), 변환(transform)-2차원,3차원 (0) | 2022.05.25 |
| [CSS] 배치(position), Flex 박스(flex) + @ (0) | 2022.05.25 |
| [CSS] 글꼴, 문자, 배경 속성(font, text, background) (0) | 2022.05.25 |
| [CSS] 너비 (width,height,margin,padding,border) + 단위, 색상 (0) | 2022.05.25 |
| CSS 의사 클래스(:link,:hover,:checked,:first-child) (0) | 2022.05.06 |
