LearnFit

 YouTube, [ㅁ] 마진병합 margin collapsing | 코딩가나다 | 빔캠프

서원석님의 학습노트

마진병합 margin collapsing | 코딩가나다 | 빔캠프

#전체

#개발자

#프론트엔드

#웹사이트

#코딩가나다

#css3

#web frontend

#레이아웃

#html

#front-end

#홈페이지 제작

#퍼블리셔

#웹

#css

#web

#퍼블리싱

#html5

#웹사이트 제작

02:33margin 병합(collapsing) 현상이란 *section1, section2 사이의 margin 공간이 40이어야하는데 margin 병합현상에 의해 20만 발생

03:26margin 병합현상은 의도된 부분이라 설명합니다. *section1는 위쪽, 왼쪽, 오른쪽이 20px만큼 margin이 들어가있고 section2는 아래쪽, 왼쪽, 오른쪽이 20px만큼 margin이 들어가있습니다. 둘 사이의 공간만 40px이면 통일성이 없고 개발자는 별도의 작업을 해줬어야 했겠죠.

04:23즉, margin 병합현상은 고쳐야할 문제점이라기보다는 우리를 도와주는 이로운 설계라고 볼 수 있습니다. *의도된 설계라는 점 인지하기

04:25margin 병합현상이 발생하는 조건

04:33인접해있는 block 요소끼리만 발생합니다. *위아래 방향으로만 발생합니다. *병합되었을 때 더 큰 margin 값이 적용됩니다.

08:06margin 병합현상의 조건을 상쇄하기 1. padding 적용

08:26margin 병합현상의 조건을 상쇄하기 2. border 적용

09:15margin 병합현상의 조건을 상쇄하기 3. inline-block을 적용

09:43margin 병합현상의 조건을 상쇄하기 4. overflow: hidden 적용 *overflow: hidden에 대한 설명은 별도의 영상에서 설명

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기