뒤로 가기
홈으로 이동
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에 대한 설명은 별도의 영상에서 설명
✔ 학습 완료

이런 러닝패스는 어때요?

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

서원석의 프로필 이미지
서원석
의 학습노트

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

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기