css
css의 중요한 단위 !
yg-0103
2020. 10. 3. 16:23
1. px
화면에 표시되는 최소 단위이며 고정적인 단위다.
2. %
부모요소의 영향을 받는 단위다
가로 너비가 600px인<div> 태그안에 자식요소인 <div> 태그의 가로 너비를 width: 50%; 로 설정하면
자식요소인 <div> 태그의 가로 넓이는 300px이 된다.
3. em, rem
em은 자기 자신의 font-size의 영향을 받는 단위다.
ex) <div>태그의 font-size가 10px 일 경우 width: 30em; 을 하면 가로너비가 300px이 된다.
rem은 가장 상위요소의 font-size의 영향을 받는 단위다.
ex) 가장 상위요소인 <html> 태그의 font-size 가 10px일 경우 20rem은 200px의 크기를 가진다.
4. vw, vh
vw는 화면 전체인 viewport 의 가로너비를 비율로 사용하여 표시하는 단위다.
ex) 50vw는 viewport가로너비의 50%를 의미한다.
vh는 화면 전체인 viewport 의 세로너비를 비율로 사용하여 표시하는 단위다.
ex)50vh는 viewport세로너비의 50%를 의미한다.