LearnFit
YouTube, [CSS] 3분 안에 배우는 padding
[CSS] 3분 안에 배우는 padding
#개발자
#프론트엔드
#전체
00:00설명을 위한 코드
00:06하위 element에 padding: 20 적용
00:12padding 20 적용 결과
00:29box-sizing에 border-box 적용(*box-sizing의 default value는 content-box입니다)
00:36크기가 변하지 않는 padding의 용도
01:02패딩 용도 정리
01:13padding 활용 예시 1(padding을 내부 간격 조정용으로 사용)
01:50padding 활용 예시 2(padding을 활용해 width에 비례해서 height 설정)
01:54스타일 속성
02:15원리 설명: height + padding + border가 element의 높이를 결정하게 되는데 height은 0이고 border는 지정되지 않았기 때문에 paddingBottom으로 인해 element 높이가 결정됩니다. 또한 paddingBottom: 60%는 부모 element의 width의 60%를 의미합니다.
02:15(부가 설명) box-sizing: border-box라고 해도 width(or height)보다 padding 수치가 더 커지면 padding의 길이만큼 가로(or 세로)가 결정됩니다. 이럴 경우 부모 element에서는 해당 element를 padding까지로 인식해서 width나 height을 잡을 때 포함시키지만 해당 element의 자식 element 입장에서는 padding, border를 제외한 크기(width or height)을 상속 받기 때문에 이 부분은 인지가 되어야합니다.
02:38padding 활용 예시 3
03:14안쪽 박스에 해당하는 부분은 text영역이라고 생각하시면 됩니다. text 영역은 내용에 따라 길이가 달라지는 유동적인 부분이므로, 따로 width, height를 지정하지 않습니다.(font size로 크기 잡음) 이 상태에서 padding을 적용하여 겉에 공간을 확보하는 것이죠.
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 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에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기