정보실

웹학교

정보실

css CSS 단위 설명

본문

CSS에는 다양한 CSS 속성의 크기를 결정할 때 사용할 단위에 대한 몇 가지 옵션이 있습니다. 

CSS 단위에 대한 모든 옵션을 배우는 것은 모든 화면에서 관리하기 쉽고 멋지게 보이는 방식으로 스타일링의 핵심이 될 수 있습니다.


https://alligator.io/css/css-units-explained/ 


CSS 단위 란 무엇입니까? 


CSS 단위는 요소 또는 내용에 대해 설정하는 속성의 크기를 결정합니다. 예를 들어 단락의 속성 margin을 설정하려면 특정 값을 지정하십시오. 이 값에는 CSS 단위가 포함됩니다.

p { margin: 20px; } 


이 경우 margin은 20px 속성입니다. 20px는 값이고 px (또는 "pixel")는 CSS 단위입니다.


px와 같은 단위를 사용하는 것이 일반적이지만 큰 문제는 종종 "여기에 가장 적합한 단위는 무엇입니까?"입니다.


그럼 알아 봅시다! ✨


절대 대 상대 단위 


사용할 단위에 대한 모든 옵션을 고려할 때 절대 및 상대의 두 가지 범주의 단위를 고려해야 합니다.


절대 단위 


“절대”단위는 부모 요소나 창 크기에 관계없이 동일한 크기입니다. 즉, 절대 단위를 가진 값으로 설정된 속성은 전화 또는 대형 모니터에서 볼 때 그 크기가 됩니다 (그리고 그 사이의 모든 것!)


응답성을 고려하지 않은 프로젝트에서 작업 할 때 절대 단위가 유용 할 수 있습니다. 예를 들어 크기를 조정할 수 없는 데스크톱 앱은 기본 크기로 스타일을 지정할 수 있습니다. 창 크기가 조정되지 않으면 내용이 필요하지 않습니다.


힌트 : 절대 단위는 화면 크기가 변경 될 때 크기가 조정되지 않기 때문에 반응 형 사이트에 적합하지 않습니다. 

절대단위설명예제
px1/96 of 1 inch (96px = 1 inch)font-size: 12px;
pt1/72 of 1 inch (72pt = 1 inch)font-size: 12pt;
pc12pt = 1pcfont-size: 1.2pc;
cmcentimeterfont-size: 0.6cm;
mmmillimeter (10 mm = 1 cm)font-size: 4mm;
ininchesfont-size: 0.2in;


픽셀 (px)은 일반적으로 화면에서 가장 인기 있는 절대 단위입니다. 센티미터, 밀리미터 및 인치가 인쇄에 더 일반적이며 옵션인지 알지 못할 수도 있습니다!


상대 단위 


상대 단위는 반응형 사이트의 스타일을 지정하는 데 유용합니다 (단위에 따라) 부모 또는 창 크기를 기준으로 크기가 조정되기 때문입니다.


일반적으로 반응 형 사이트의 기본값으로 상대 단위를 사용할 수 있습니다. 이렇게 하면 다양한 화면 크기에 맞게 스타일을 업데이트하지 않아도 됩니다. 


상대 단위는 사용할 단위를 결정하는 데 절대 단위보다 약간 어려울 수 있으므로 옵션을 자세히 살펴 보겠습니다.

상대단위설명
%해당 속성의 부모 요소 값에 상대적
em요소의 현재 글꼴 크기와 관련
rem루트의 글꼴 크기와 관련 (e.g. the <html> element). “rem” = “root em”
ch문자 수 (1 문자는 현재 글꼴의 너비 인 0/0과 같습니다)
vh뷰포트의 높이 (창 또는 앱 크기)를 기준으로 합니다. 1vh = 뷰포트 높이의 1/100
vw뷰포트의 너비를 기준으로 합니다. 1vw = 뷰포트 너비의 1/100
vmin뷰포트의 작은 치수와 관련 (예 : 세로 방향의 경우 너비가 높이보다 작으므로 너비를 기준으로 합니다). 1vmin = 뷰포트 작은 크기의 1/100
vmax뷰포트의 더 큰 차원에 상대적 (예 : 세로 방향의 높이). 1vmax = 뷰포트 더 큰 치수의 1/100
ex현재 글꼴의 소문자 "x"의 높이를 기준으로 합니다.


각 유형의 CSS 속성에 가장 적합한 옵션이 항상 확실하지는 않습니다. 예를 들어, %는 일반적으로 글꼴 크기보다 너비와 같은 레이아웃 관련 속성에 더 적합합니다.


다음은 각 상대 단위를 사용할 때의 몇 가지 예입니다. (스포일러 : 예전엔 거의 오지 않습니다.🙈)


% : 자식 요소가 부모 너비의 10%를 여백으로 갖도록 하여 부모 요소 전체를 채우지 않습니다. 부모의 크기가 변하면 여백도 업데이트 됩니다.

.child { margin: 10%; } 


em : 하위 요소의 글꼴이 부모의 글꼴 크기 (예 : 섹션 제목 아래 단락)의 절반 크기가 되도록 하려고 합니다.

.child { font-size: 0.5em; } 


rem : 글꼴 크기는 루트 요소의 글꼴 크기의 두 배여야 합니다. 이것은 부모 컨테이너에 관계없이 헤더의 크기가 모두 같아야 헤더 크기를 지정할 수 있습니다.

.header { font-size: 2rem; } 


ch : 모노 간격 글꼴이 있고 (문자는 항상 같은 너비) 10 자만 사용할 수 있습니다.


.small-text { width: 10ch; } 


vh : 방문 페이지는 항상 뷰포트 / 창의 높이 여야 합니다.


.wrapper { height: 100vh; } 


vw : 텍스트가 있는 섹션은 뷰포트 / 창 너비의 절반이어야 합니다.

.half-size { width: 50vw; } 


vmin : 이미지가 항상 뷰포트의 작은 크기만큼 넓어야 합니다. 휴대 전화를 세로 모드로 유지하면 이미지가 뷰포트 너비만큼 넓어집니다.


.min-width { width: 100vmin; } 


vmax : 더 큰 치수의 뷰포트를 완전히 채우기 위해 이미지가 잘 리더라도 신경 쓰지 않아도 됩니다. 예를 들어, 패턴 이미지가 배경으로 사용되는 경우입니다.


.max-width { width: 100vmax; } 


ex : 아마 자주 ex를 만나지 못할 수도 있지만 일반적으로 글꼴의 중간 부분을 측정하는 것이 좋습니다. 글꼴의 높이를 글꼴의 "x"높이의 두 배로 설정하려고 한다고 가정 해 보겠습니다.


.double-x { line-height: 2ex; } 


CSS 단위를 언제 어떻게 선택하면 몇 가지 질문이 나옵니다.


뷰포트 크기가 변경 될 때 스타일을 조정하고 싶은가?


크기를 조정하려면 앱에서 크기를 조정하려면 무엇을 원합니까?


이 질문에 대답하면 사용할 단위를 훨씬 쉽게 정할 수 있습니다. 💪





페이지 정보

조회 64회 ]  작성일19-08-23 11:16

웹학교