css 표준 단위에 대하여 알아보기

css 표준 단위에 대하여 알아보기

네 안녕하세요, 이번 포스팅에서는 css에서 사용을 하는 표준 단위에 대하여 알아보도록 하겠습니다.

아무래도 우리가 직접 쓰는 프로그래밍 언어이기 때문에 그 표준 단위를 모르고 쓸 수는 없어서

한 번 작성을 해보기로 했습니다.

그럼 지금부터 시작하도록 하겠습니다.

 

1. css의 표준 단위

우리가 css로 스타일 시트를 작성을 하다 보면 사이즈를 적절한 비율로 조절을 하여 구성을 해야만 합니다.

그렇지 않으면 css로 만들어낸 것들이 다 뒤죽박죽이 되어버리고,

오히려 css로 인해서 엉망이 될 수도 있습니다.

그렇기 때문에 단위의 지정은 정말 중요하다고 할 수가 있습니다.

그래서 제가 주로 많이 사용하는 css의 표준 단위를 표로 한 번 정리를 해봤습니다.

단위	의미	사용 예시
em	배수	font-size : 3em; // 현재 폰트의 3배 크기
%	퍼센트	font-size : 500%; // 현재 폰트의 500% 크기
px	픽셀 수	font-size : 10px; // 10픽셀의 크기의 폰트
cm	센티미터	margin-left : 5cm; // 왼쪽 여백 5cm
mm	밀리미터	margin-left : 10mm; // 왼쪽 여백 10mm
in	인치(1in = 96px = 2.54cm)	margin-left : 2in; // 왼쪽 여백 2인치
pt	포인터(1pt = 1in * 1/72)	margin-left : 20pt; // 왼쪽 여백 20포인트
pc	피카소(picas), 1pc = 12pt	font-size : 1pc; // 1pc 크기의 폰트
deg	각도	transform : rotate(20deg); // 시계 방향으로 20도 회전

 

반응형

 

주로 이런 것들을 많이 씁니다.

그리고 주의를 해야 하는 사항 한 가지는, html에서는 단위를 반드시 표시를 해야만 합니다.

그래야만 컴퓨터가 어떤 사이즈를 지정을 할 것인가가 입력이 되고,

입력하지 않을 시에는 오류가 나므로 주의를 해야 합니다.

 

여기까지 css의 표준 단위에 대하여 알아보는 시간을 가졌습니다.

다음 포스팅에서는 폰트에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~