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

 

10 * 4 = 40, 열흘 남음!

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

오늘은 13번째 커리큘럼인 'CSS / 속성- 박스 모델' 과정 공부를 시작했습니다.

눈 여겨 볼 학습 내용은 (입문자 편에서 이야기가 나왔던 것 같지만) <span>의 단위 기본값이 0이라는 것과,

margin 속성은 부모, 형제, 자식 간에 각각 특정 경우에서 중복 현상이 나타난다는 것이었습니다.

 

카페에서 반, 집에서 반 공부

오늘은 13번째 커리큘럼의 01. width, height / 02. max-width, min-width, max-height, min-height / 03. margin / 04. margin - 중복 (Collapse) 을 공부했습니다.

---

<Today I Learned>

<width>

🔶 요소의 '가로' 너비 지정

🔶 속성 ⬇

값	의미	기본값
auto	브라우저가 너비 계산	auto
단위	px, em, cm, ...

 

<height>

🔶 요소의 '세로' 너비 지정

🔶 속성 ⬇

값	의미	기본값
auto	브라우저가 너비 계산	auto
단위	px, em, cm, ...

 

🔷 <div>: 블록 요소 ➡ (각 속성의 값이 auto일 때) width: 100%, height: 0 으로 시작

🔷 <span>: 인라인 요소 ➡ (각 속성의 값이 auto일 때) width: 0, height: 0 으로 시작하고 인라인 요소이기 때문에 가로, 세로 속성을 못 가짐 ➡ 텍스트 표시에 특화되어 있음
✨ 블록 요소와 인라인 요소는 브라우저에서 해석되는 방식 다름

 

<max-width>

🔶 요소의 최대 가로 너비

🔶 max-width 값보다 가로 너비가 더 커질 수 없음

값	의미	기본값
단위	px, em, cm, ...	none

 

<min-width>

🔶 요소의 최소 가로 너비

🔶 min-width 값보다 가로 너비가 더 작아질 수 없음

값	의미	기본값
단위	px, em, cm, ...	0

 

<max-height>

🔶 요소의 최대 세로 너비

🔶 max-height 값보다 세로 너비가 더 커질 수 없음

값	의미	기본값
단위	px, em, cm, ...	none

 

<min-height>

🔶 요소의 최소 세로 너비

🔶 min-height 값보다 세로 너비가 더 작아질 수 없음

값	의미	기본값
단위	px, em, cm, ...	0

 

🔷 예제 : 부모의 고정 가로 너비보다 자식의 min-width가 크다면 아래와 같은 예시 결과물이 나옴

 

See the Pen rNMNQNw by QQyukim (@qqyukim) on CodePen.

 

<margin>

🔶 요소의 '외부(바깥) 여백'을 지정

🔶 음수 값(Negative Values)을 사용할 수 있음

🔶 margin-top, margin-bottom, margin-left margin-right 속성 존재

값	의미	기본값
auto	브라우저가 너비 계산	auto
단위	px, em, cm, ...
%	'부모' 요소의 너비에 대한 비율로 지정

 

🔷 '%' 예제 : 부모 요소의 가로 너비에 대한 비율인 것을 확인

 

See the Pen YzGzdYG by QQyukim (@qqyukim) on CodePen.

 

🔶 margin 사용법 (1) : 위 오른 아래 왼 (반시계 방향) ➡ margin: 10px 20px 30px 40px

🔶 margin 사용법 (2) : 위 [오른 왼] 아래 ➡ margin: 10px 20px 30px

🔶 margin 사용법 (3) : [위 아래] [오른 왼] ➡ margin: 10px 20px

🔶 margin 사용법 (4) : [위 아래 오른 왼] ➡ margin: 10px

 

<마진 중복 (병합(collapse))>

🔶 마진의 특정 값들이 '중복'되어 합쳐지는 현상 ➡ 버그 아님, 현상 우회 또는 응용 가능

 

🔶 형제 요소들의 margin-top과 margin-bottom이 만날 때

🔶 부모 요소의 margin-top과 margin-top이 만날 때

🔶 부모 요소의 margin-bottom과 margin-bottom이 만날 때

 

🔶 마진 중복 계산법

조건	요소 A 마진	요소 B 마진	계산법	중복값
둘 다 양수	30px	10px	더 큰 값으로 중복	30px
둘 다 음수	-30px	-10px	더 작은 값으로 중복	-30px
각각 양/음수	-30px	10px	-30 + 10 = 20	-20px

 

---

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