www.youtube.com/watch?v=xWMKz9NCD0k
언제 어떤걸 쓰면 좋을까??
1. Parent 요소에 따라 사이즈 변경: % ,em
browser 사이즈에 반응: v*, rem
2. box 요소의 너비와 높이에 따라 사이즈 변경: %, v*
font 사이즈에 따라 사이즈 변경: em, rem
em과 rem 차이??
어떤 디자인인지, 원하는 기능에 따라 em, rem
<예시>
좋아요 버튼 component를 만든다고 가정하자
버튼의 글자를 rem을 써서 사이즈 만들면
root의 폰트사이즈에 따라 크기 결정되므로
페이지의 제일 상위 요소인 body에서 component를 사용할 때와
다른 component안에서 버튼을 쓸때와 크기 변동사항이 없다.
rem을 사용하므로 부모 컨테이너에 있는 폰트 사이즈와 상관없이 페이지의 어떤 박스안에서 사용해도 크기가 일정하게 고정
버튼의 글자를 em을 써서 사이즈를 만들면
부모요소의 폰트 사이즈에 상대적으로 변하므로
제일 상위요소에서 썼을때와
부모 요소(header라는 component 안)에서 썼을 때의 component의 크기가 달라진다.
따라서
나의 component가 페이지 어디에 쓰여도 크기가 고정되어야 함 = rem
component가 어디에 쓰이느냐에 따라 (부모요소에 따라) 사이즈가 유동적으로 변경 = em
1. em demo
직관적으로 폰트 사이즈를 알기 어려움
2. rem demo
따라서 폰트 사이즈 결정할 때 rem을 조금 더 선호
3. em demo (padding)
padding은 요소의 네 방향 안쪽 여백 영역을 설정한다
안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간
폰트 사이즈에 따라 여백의 크기 결정되도록 em 사용
4. em vs rem demo
브라우저 사이즈에 따라 폰트 사이즈 변화
component의 너비 50%
박스 컨테이너 자체의 사이즈를 만들때, em과 rem은 폰트사이즈에 비례해서 변화하므로 결국 고정적 값을 가짐.
따라서 컨텐츠를 더 유동적으로 만들기 위해서는 %를 사용하는 것이 좋다.
font-size는 component 전체의 2 rem
title
패딩 0.5em
contents의 font-size: 1rem
패딩 0.5
browser의 사이즈가 780px보다 작아지면 component 폰트사이즈 1.5rem으로 줄어듦.
여기서 padding을 적용해보자.
padding: 0.5em (기존 컨텐츠에 적용된 폰트사이즈의 0.5배가 되어 계산되어짐)
문제점???
패딩 em을 썼으므로 폰트 사이즈의 상대적으로 크기 결정된다.
타이틀의 폰트사이즈 > 컨텐츠의 폰트사이즈
타이틀 박스에 조금 더 많은 패딩이 들어가서 수직적 정렬이 되지않음.
그러므로 em을 써서 padding을 쓰는 것은 좋지만
요소마다 사이즈에 상관없이 고정적인 padding 유지해야 한다면 rem이 더 나음.
padding 위 아래는 em을 써서 폰트 사이즈에 따라 변화되도록
좌우는 rem을 써서 폰트와 상관없이 고정
padding: 0.5em 0.5rem
5. final project