[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 48회차 미션

D-3

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 48일차입니다!

오늘은 15번째 커리큘럼을 마치고 16번째 커리큘럼 초입부를 학습하였습니다.

내일 16번째 커리큘럼인 'CSS/속성- 배경' 파트를 마무리 지으려고 해요.

 

아 나도 글씨 잘 쓰고 싶다 ✒

오늘은 15번째 커리큘럼의 09~10. position 특징 - 요소 쌓임 순서 / display 수정 클립과

16번째 커리큘럼의 01. background 02. background-color 03. background-image에 대하여 공부했어요.

---

<Today I Learned>

<요소 쌓임 순서 (Stack Order)>

🔶 요소가 쌓여있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정 (Z축)

🔶 규칙⭐

1. 어떤 요소에 static을 제외한 position 속성의 값이 있을 경우, 그 요소가 가장 위에 쌓임 (속성값 무관)

2. 모든 요소에 position이 존재한다면 z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3. 모든 요소가 position 속성의 값을 가지고 모든 요소의 z-index 속성의 숫자 값이 같다면, HTML의 마지막 코드일 수록 위에 쌓임 (나중에 작성한 코드(요소))

position > z-index > HTML 마지막 코드

 

(JSFiddle)

 

<display 수정>

🔶 absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨

➡ static, relative, sticky 속성 값은 해당하지 않음

🔷 display: flex; 과 display: inline-flex; 는 float 속성 효과 없음! (block으로 수정되지 않음)

🔷 inline, inline-block, inline-table, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group은 block으로 수정됨

🔷 그 외 display 값은 변화 없음

 

(JSFiddle)

 

<background>

🔶 요소의 배경을 설정 (단축 속성)

🔶 속성 값 ⬇

 

값	의미	기본값
background-color	배경 색상	transparent
background-image	하나 이상의 배경 이미지	none
background-repeat	배경 이미지의 반복	repeat
background-position	배경 이미지의 위치	0 0
background-attachment	배경 이미지의 스크롤 여부 (특성)	scroll

 

🔷 특성

➡ background: 색상 이미지경로 반복 위치 스크롤특성;

➡ (ex) background: tomato url("./img/image01.jpg repeat-x left top scroll");

 

<background-color>

🔶 요소의 배경 색상을 지정 (개별 속성)

🔶 속성 값 ⬇

값	의미	기본값
색상	요소의 배경 색상	.
transparent	투명	transparent

background-color 보다는 background 단축 속성을 더 많이 사용하는 경향이 있음!

 

<background-image>

🔶 요소의 배경에 '하나 이상'의 이미지를 삽입

🔶 속성 값 ⬇

값	의미	기본값
none	이미지 없음	none
url("경로")	이미지 경로 (URL)

url 함수의 인수(인자, parameter)에 "경로"를 입력함

 

🔷 사용법

🔹 단일 배경 이미지 삽입

.box {
  background-image: url("../img/image.jpg");
  width: 120px;
  height: 80px;
}

배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있음!

🔹 다중 배경 이미지 삽입

➡ 개별 속성

.box {
  background-image: url("../img/image01.jpg"),
    url("../img/image02.jpg"),
    url("../img/image03.jpg");
}

➡ 단축 속성

.box {
  background: url("../img/image01.jpg") no-repeat,
    url("../img/image02.jpg") no-repeat 100px 50px,
    url("../img/image03.jpg") repeat-x;
}

반복, 위치 등의 속성을 모두 기입해줘야 함

 

✨ 하나 이상의 배경 이미지를 삽입할 경우 ',(comma)'로 구분

✨ 먼저 작성된 이미지가 더 위에 쌓임

✨ 다중 배경 이미지는 IE 8 이하 버전에 사용할 수 없음

 

🔷 요소의 크기가 배경 이미지의 크기보다 클 때 ➡ 배경 이미지가 요소 범위 내에서 왼쪽 상단 기준으로 반복 출력됨

 

(JSFiddle)

---

강의 링크: https://bit.ly/3m0t8GM