LearnFit
YouTube, CSS 수업 - box-sizing
CSS 수업 - box-sizing
#전체
#개발자
#프론트엔드
#box-sizing
#css
#생활코딩
00:00강의시작
00:10이 강의에서 알게 되는 것(padding, border를 가지고 있는 경우 지정한 width, height와는 다르게 크기가 적용되는 경우가 있는데 어떻게 handling 할 수 있을까?)
00:44예제 코드 작성 시작
02:16(멈춰놓고 잠시 확인하고 다시 재생하기)border 설명을 위한 코드, 참고로 div는 display: block이므로 부모 width의 100%크기를 상속받습니다. 그래서 border width에 상관없이 화면 가로에 꽉 차게 됩니다.
02:18margin을 적용(참고로 margin은 width, height에 포함안됨)
02:33두 개의 element에 동일한 width값 지정(border width에 따라 같은 150px width를 가져도 width가 다르게 보입니다.
02:52default 상태에서의 CSS element의 크기 측정법
03:44border width까지 고려하면 총 width 예측이 어려워지는 문제가 존재합니다. 이에 대한 해답은…
03:48box-sizing 속성 소개(default: content-box), width + border width + padding(여기선 설명 안함)이 content-box에서의 측정법이기 때문에 두 element가 같은 150px이라 하더라도 border width가 다르기 때문에 총 width가 다른 것입니다.
04:11box-sizing: border-box 적용(총 width를 예측하기 쉽게해주는 solution, 보통 많이 사용)
04:47모든 element에 대해 크기를 지정할 때 동일 기준으로 적용되도록 하는 조치, 코딩이 수월해지는 방식
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(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초 만에 가입하기