[CSS] 레이어 | 선택자 | DOM | 외부스타일시트

24.03.08 17일차

1. 레이어

2. 선택자

3. DOM 태그를 객체로

4. 외부스타일 시트

 

---

 

1. 레이어

position: absolute;  :  시작점의 절대위치

왼쪽 맨 위

오른쪽 맨 위

 

레이어 안에 사진 삽입

background-size: 100% 100%;  :  레이어의 사이즈보다 큰 사진을 잘리지 않게 넣는 명령어

 

 

z-index : 겹치기의 높이를 조절 (숫자가 높을 수록 위로 올라옴)

숫자가 가장 적은(0) 보라색이 가장 아래, 숫자가 가장 높은(3) 하늘색이 가장 위

음수는 글자 뒤로

-1로 준 보라색은 글자가 비춰진다

 

2. 선택자

* : 전체선택자

모든 글자에 색상 적용

 

3. DOM 태그를 객체로

공백 : 부모 밑의 자손들까지 모두 디자인 가능 

#hi01 뒤에 공백 후 h1이 왔기 때문에 h1,h2 수정 가능

> : 직계자손만 디자인 가능

>를 사용하면 id hi01의 직계자손인 div,ul만 가능 / li는 자손의 자손이기 때문에 불가능

 

 

4. 외부스타일 시트

미리 파일로 디자인을 만들어 놓고 사용할 때 링크를 걸어줌

글자를 하늘색으로 설정하는 CSS파일

글자색 설정 확인

 

5. import

@ : CSS 안으로 다른 CSS 파일을 불러들일 경우 (지금은 잘 사용하지 않음)