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의 웹 호환성에 대한 얘기

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

자바스크립트 ES6

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

서원석

의 학습노트

리액트로 이미지 미리보기 구현(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에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기