뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, [CSS] 2분 안에 배우는 margin
서원석님의 학습노트

[CSS] 2분 안에 배우는 margin

#전체
#개발자
#프론트엔드
00:00배경지식: margin은 사용된 element의 width, height에는 영향을 주지 않으며 다른 element와의 간격을 만들어낼 때 사용됩니다.
00:00강의에서 사용되는 코드입니다. 부모 element 1개, 자식 element 3개로 구성되어있습니다.
00:053개의 자식 element에 margin: 10 적용
00:13margin: 10이 적용된 자식 element의 모습(width, height은 그대로 200px이며 상하좌우로 margin이 10px씩 적용된 모습)
00:26margin이 적용된 자식 element 때문에 부모 element의 height이 증가(600px => 660px)
00:37적용했던 margin을 없앤 후 부모 element의 height은 600px
00:50margin의 auto 값에 대한 설명 시작
00:53 첫 번째 빨간 박스에 marginLeft: 'auto' 적용한 결과
01:04margin auto의 원리 설명 시작
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

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

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

리액트로 이미지 미리보기 구현(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초 만에 가입하기