whatisthis?

CSS의 단위 - 절대단위 / 상대단위 본문

WEB STUDY/HTML,CSS

CSS의 단위 - 절대단위 / 상대단위

thisisyjin 2021. 8. 27. 17:43
 

CSS 단위 px pt em rem % 란 무엇이며 차이점은?

▒ CSS 단위 px pt em rem % 란 무엇이며 차이점은? CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰인다. 크게는 절대 크기가 변하지 않는..

soharu.tistory.com

cr : soharu.tistory.com

 

 

 

단위 -> font-size, text-indent, line-height, width, height, padding 등
무언가의 크기를 나타낼 때 사용됨.

 

절대단위

고정된 값 출력. 크기가 변하지 않음. 
cm, mm, px, pt(포인트), pc(파이카)

상대단위

다른 요소의 크기에 영향을 받아 상대적으로 크기 변화.

em (부모요소 크기에 따라)
rem (최상위 요소인 html요소의 크기에 따라)
% (부모요소 크기에 따라)
vw (viewport width) / vh (viewport height)
vmin, vmax (뷰포트의 최소,최대값. 설정한 viewport 값에 따라 변화)


**주로 반응형 웹 제작시 rem 단위를 사용. 
(최상위 요소, 즉 html의 영향을 받기 때문에 이 요소 하나만 변경하면 나머지가 자동으로 변함)

 

예> html { font-size: 62.5%}
16px = 1.6rem
18px = 1.8 rem 이런식으로 사용 가능함.

 

 

 

+)



픽셀/em/퍼센트/포인트 계산 사이트 = http://pxtoem.com

 

PXtoEM.com: PX to EM conversion made simple.

What is an EM? Wikipedia puts it well: "An em is a unit of measurement in the field of typography, equal to the size of the current font." If your font-size is at 16 pixels, then 1em = 16px For more information visit Wikipedia and Mozilla MDN. What is the

pxtoem.com

 

 

rem 계산 사이트 = https://offroadcode.com/rem-calculator

 

 

'WEB STUDY > HTML,CSS' 카테고리의 다른 글

CSS 미디어쿼리 (media Query) 실습 예제  (0) 2021.09.01
CSS 그리드( grid ) 실습 예제  (1) 2021.08.27
CSS - link href를 이용해야하는 이유 <캐싱>  (0) 2021.08.24
생활코딩 WEB2 - css 편 (3/3)  (0) 2021.08.23
생활코딩 WEB2 - css 편 (2/3)  (3) 2021.08.23
'WEB STUDY/HTML,CSS' Related Articles more