LearnFit
YouTube, [ㄴ] 네거티브 마진 negative margins | 코딩가나다 | 빔캠프
네거티브 마진 negative margins | 코딩가나다 | 빔캠프
#전체
#개발자
#프론트엔드
#1년차
#margin minus
#negative margin
#마진 마이너스
#빔캠프
#veamcamp
#css3
#마진 음수
#css
#퍼블리싱
#퍼블리셔
#html5
#레이아웃
04:38B에 negative margin을 적용하기
05:00마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다.
*negative margin과 상관없는 이야기
05:51negative margin은 시작점이 더 빨라지거나 끝나는 지점이 더 빨라지는 개념
*margin-left, margin-top에 negative margin은 시작점이 빨라지는 것
*margin-right, margin-bottom에 negative margin은 끝나는 지점이 더 빨라지는 것
06:47카드가 겹쳐있는 디자인은 negative margin이 적합(position: absolute로는 까다로운 문제 존재)
*position: absolute를 사용하기에 앞서 negative margin으로 해결할 수 있는지 고민해봅니다.
08:08header의 margin-bottom에 negative margin 적용하니 본문 글이 header 위로 올라오는 모습
*끝나는 지점이 빨라졌기 때문에 이런 현상 발생
14:35negative margin의 웹 호환성에 대한 얘기
✔ 학습 완료
이런 러닝패스는 어때요?
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
왕초보를 위한 React Router v5 핵심 요약(feat. 풍부한 예시 코드, 꼼꼼한 설명)
Video
⏱ 핵심 스탬프14개
00:00
react-router-v6 공식 문서 링크: https://reactrouter.com/docs/en/v6
사용하는 용어 정리:
pathname은 localhost:3000/products에서 /products를 의미
01:02
~02:15
해당 강의에 사용된 코드를 저장하는 법과 프로젝트 파일을 여는 법을 설명합니다.
*해당 학습노트용 코드는 lesson-1 branch 지정 후 다운로드 받으셔야합니다.
*Visual Studio Code를 설치해놓으셔야 합니다.
링크: https://github.com/iamshaunjp/React-Router-Version-6
👍
1
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기