뒤로 가기
홈으로 이동
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
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기