LearnFit
YouTube, [ㄹ] 라인하이트 line height | 코딩가나다 | 빔캠프
라인하이트 line height | 코딩가나다 | 빔캠프
#전체
#개발자
#프론트엔드
#1년차
#line-height 단위
#line-height
#line-height unit
#퍼블리싱
#css
#line height 단위
#vertical-align
#퍼블리셔
#veamcamp
#css line height
#em
#css line-height
#html
#빔캠프
#레이아웃
#font-size
01:03lineHeight 적용(30px)
01:59lineHeight(30px)가 font size(40px)보다 작은 경우
*그래서 보통 lineHeight은 px로 고정하지 않습니다.
02:25lineHeight: 1.5 적용
*현재 fontSize의 1.5배가 적용됩니다.
*fontSize가 30px일 때 lineHeight가 45px로 적용됩니다.
02:50lineHeight에 em 단위를 적용하는 것에 대하여
03:56parent 요소에 lineHeight: 1을 적용합니다.
*lineHeight는 부모에서 자식으로 상속이 됩니다.
*first의 font-size: 30px만큼 lineHeight가 30px이 됩니다.
*second의 font-size: 40px만큼 lineHeight가 40px이 됩니다.
04:51parent 요소에 lineHeight: 1em을 적용합니다.
*1em은 font-size만큼입니다(1은 font-size의 배수를 의미합니다)
*lineHeight는 부모에서 자식으로 상속이 됩니다.
*parent의 font-size인 20px만큼 first의 lineHeight에 적용됩니다.
*parent의 font-size인 20px만큼 second의 lineHeight에 적용됩니다.
06:22marginTop에 lineHeight와 동일한 값 적용하기 예제입니다.
07:29font-size에 들어가는 em은 현재 지정된 font-size의 배수입니다.
*em은 font-size에서 쓰일 땐 상속 받은 font-size를 나타내고 그 외 다른 곳에서 쓰일 땐 현재 요소의 font-size를 나타냅니다.
*보통 현재 지정된 font-size는 부모로부터 상속된 만큼입니다.
*html > body > div > h1
08:29font-size 값보다 요소 높이 값이 항상 조금씩 더 크다는 것을 발견할 수 있습니다.
09:05lineHeight에는 reading 영역이 항상 포함되어 있기 때문에 높이가 font-size보다 크게 잡히는 것입니다.
*font style마다 leading 영역이 다릅니다.
*leading 영역은 여러 줄의 텍스트를 읽을 때 가독성을 증가시켜주기 위함입니다.
09:43lineHeight, half leading, font 영역을 보여주는 그림
10:32line-height의 default는 normal
*normal로 두면 font 종류마다 line-height의 값이 달라집니다.(font 제작자의 마음)
11:28line-height이 1이 되면 현재 지정된 font-size와 크기가 일치하게 되는 것입니다.
*leading 영역도 사라집니다.
11:49line-height을 1로 둬도 생기는 위아래 작은 여백은 개발자가 control할 수 없습니다.
13:14font에 모두 같은 line-height이 적용됐지만 font-style에 따라 위아래 공간이 미묘하게 다르다는 것을 알 수 있습니다.(컨트롤하기 힘듭니다)
15:51marginTop에 고정값을 넣으면 font-size가 변경될 시 화면이 깨지므로 유동적으로 대응하기 위해서 marginTop에도 em 단위를 적용합니다.
*em은 현재 요소의 font-size만큼을 의미합니다.
16:23line-height의 leading 영역을 없애는 트릭
✔ 학습 완료
이런 러닝패스는 어때요?
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(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초 만에 가입하기