더 나은 사이트 레이아웃을 만들기 위해 최고의 CSS 단위를 선택하는 방법

CSS 단위는 사이트 레이아웃을 만들 때 고려해야 할 가장 기본적인 측면 중 하나입니다. 이 단위는 디자인이 다양한 장치에서 상호 작용하는 방식을 정의합니다.

그러나 CSS 단위의 경우 선택할 수 있는 옵션이 많고 모든 옵션이 동일하지 않습니다. CSS 단위는 글꼴에만 국한되지 않으므로 프런트 엔드 개발자는 이러한 단위가 레이아웃에 어떤 영향을 미치는지 이해해야 합니다.

이 기사에서는 다양한 CSS 단위가 어떻게 작동하는지 보여주므로 이를 사용하여 더 나은 레이아웃과 사이트 디자인을 만들 수 있습니다.

CSS 단위의 종류

CSS 단위는 다음 범주로 구분할 수 있습니다.

• 절대 단위
• 글꼴 관련 단위
• 뷰포트 상대 단위

절대 단위

일부 단위는 특정 절대값에 의존하며 화면 크기나 글꼴의 영향을 받지 않습니다. 이러한 단위 표시는 화면의 DPI(인치당 도트 수)에 따라 다르기 때문에 화면 해상도에 따라 다를 수 있습니다.

이러한 단위는 다음과 같습니다.

• 픽셀(픽셀)
• 인치로)
• cm (센티미터)
• mm (밀리미터)
• PC(파이카)
• pt (포인트)

픽셀

픽셀은 가장 일반적으로 사용되고 허용되는 단위입니다. 그리고 다른 많은 단위의 측정 기준으로 간주됩니다. 다양한 장치 중에서 가장 일관된 결과를 제공합니다.

다음 예제의 box 요소는 높이가 150px이고 너비가 150px이며 모든 화면 크기에서 동일하게 유지됩니다.

[CSS]
.상자{
높이:150px;
폭:150px;
}
[/css]

in(인치), cm(센티미터) 및 mm(밀리미터)와 같은 다른 모든 절대 단위는 실제 CSS 사용 사례가 거의 없는 실제 측정 단위입니다.

그러나 픽셀과의 관계를 이해하는 것이 여전히 좋으므로 비교 방법은 다음과 같습니다.

• 1in = 96px
• 1cm = 37.8픽셀
• 1mm = 3.78픽셀

반면 pc(picas)와 pt(points)는 인치와 직접적인 관련이 있습니다.

• 1in = 72pt
• 1in = 6pc

모든 절대 단위 사이의 관계는 다음과 같이 증명할 수 있습니다.

렘

픽셀을 제외하고 다른 모든 절대 단위는 화면 CSS에 대한 사용 사례가 거의 또는 전혀 없지만 실제 측정 단위이므로 인쇄 CSS에서 효과적으로 사용할 수 있습니다. (픽셀에 대해 궁금한 점이 있다면 인쇄 CSS에서도 잘 작동합니다!)

글꼴 관련 단위

문서의 글꼴 크기나 글꼴 모음 또는 상위 수준 요소에 따라 달라지는 일부 단위가 있습니다. 여기에는 다음과 같은 단위가 포함됩니다.

• 여자 이름
• 렘
• 전-
• 채널

여자 이름

Em은 상대 길이 단위입니다. 부모 요소 또는 문서의 글꼴 크기에 따라 다릅니다. 기본적으로 font-size 정의되지 않은 경우 1em 은 16px 와 같습니다.

Em은 직계 부모의 글꼴 크기에서 크기를 상속합니다. 따라서 부모 요소에 font-size:18px 있는 경우 1em 모든 자식 요소에 대해 18px 로 측정됩니다.

여기 우리는 제목과 약간의 텍스트가 있는 .post-item 세 개의 자식이 있는 div .post 가 있습니다.

[html]
<사업부 클래스 =”포스트”>
<사업부 클래스 =”사후 항목”>
<h2>제목</h2>
Lorem Ipsum은 단순히 인쇄 및 조판 업계의 더미 텍스트입니다. Lorem Ipsum은 1500년대부터 업계의 표준 더미 텍스트였습니다.
</div>
<사업부 클래스 =”사후 항목”>
<h2>제목</h2>
Lorem Ipsum은 단순히 인쇄 및 조판 업계의 더미 텍스트입니다. Lorem Ipsum은 1500년대부터 업계의 표준 더미 텍스트였습니다.
</div>
<사업부 클래스 =”사후 항목”>
<h2>제목</h2>
Lorem Ipsum은 단순히 인쇄 및 조판 업계의 더미 텍스트입니다. Lorem Ipsum은 1500년대부터 업계의 표준 더미 텍스트였습니다.
</div>
</div>
[/html]

이제 부모 .post 에는 font-size:20px 가 있고 자식 요소 .post div padding:0.75em 및 margin:0.75em 포함된 자체 font-size:1.2em :1.2em이 있으므로 계산된 패딩 및 여백은 18px(20px)가 됩니다. *1.2em*0.75em).

[CSS]
html{
글꼴 크기:20px;
}

.우편{
글꼴 크기:20px;
}

.post div{
글꼴 크기:1.2em;
}

.post-item{
배경:분홍색;
패딩:0.75em;
여백:0.75em;
}

.사후 항목 h2{
글꼴 크기:1.5em;
여백:0.5em 0;
}

.사후 항목 p{
여백:0;
글꼴 크기: 1em;
}
[/css]

보시다시피 자식 요소는 부모로부터 값을 상속받습니다.

em을 사용하는 이점은 각 요소의 font-size , padding 및 margin 비례적으로 변경하기로 결정한 경우 부모 요소의 글꼴 크기를 변경하기만 하면 다른 모든 요소가 그에 따라 조정된다는 것입니다.

각 요소를 개별적으로 조정해야 하는 px와 같은 절대 단위의 경우에는 그렇지 않습니다.

이 상속 특성은 관리하기가 약간 까다로울 수 있지만 중첩된 요소가 em에 고유한 font-size 가지고 있는 경우에도 마찬가지입니다.

이전 데모에서와 같이 하위 항목 중 하나의 다른 div 안에 제목과 단락을 래핑하면 이상한 결과가 나타납니다.

[html]
<사업부 클래스 =”사후 항목”>
<사업부>
<h2>제목</h2>
Lorem Ipsum은 단순히 인쇄 및 조판 업계의 더미 텍스트입니다. Lorem Ipsum은 1500년대부터 업계의 표준 더미 텍스트였습니다.
</div>
</div>
[/html]

post-item 에는 중첩된 div 있으므로 기본 크기는 24px에서 28.8px(20px*1.2em*1.2em)로 변경되고 h2 의 font-size 및 margin 43.2px(20px*1.2em*1.2em)로 변경됩니다. *1.5em) 및 14.4px(20px*1.2em*1.2em*0.5em)입니다.

렘

Rem은 항상 상위 요소가 아닌 루트 요소 글꼴 크기를 참조하기 때문에 이러한 유형의 상황에서 정말 유용할 수 있습니다.

앞의 예에서 .post div 단위를 em에서 rem으로 변경하면 모든 하위 요소가 자체적으로 수정되는 것을 볼 수 있습니다.

[CSS]
.post div{
글꼴 크기:1.2rem;
}
[/css]

단위가 em에서 rem으로 변경되면 기본이 상위 div에서 front-size:20px 인 루트 요소로 변경됩니다.

따라서 계산은 20px*1.2rem*value가 되고 h2 와 p 는 부모와 상관없이 일관된 font-size 와 margin 갖게 됩니다.

전

Ex는 현재 글꼴의 x 높이에 상대적이며 거의 사용되지 않습니다. x 높이 측정이 일관되지 않습니다. 때로는 글꼴 자체에서 가져오고 때로는 브라우저가 자체적으로 계산합니다.

em 및 rem과 마찬가지로 글꼴에 따라 다르지만 주요 차이점은 font-family 변경하면 ex도 변경된다는 것입니다. 다른 두 경우에는 그렇지 않습니다.

[CSS]
.상자{
폭:150ex;
높이:150ex;
}
[/css]

채널

Ch는 ex와 유사하지만 x 높이에 의존하지 않습니다. 오히려 영(0) 문자의 너비에 있습니다. font-family 로도 변경됩니다.

[CSS]
.상자{
폭:150ch;
높이:150ch;
}
[/css]

뷰포트 관련 단위

다음과 같이 뷰포트 높이 및 너비 크기에 따라 달라지는 몇 가지 단위가 있습니다.

• vh(뷰포트 높이)
• vw(뷰포트 너비)
• vmin(뷰포트 최소값)
• vmax(뷰포트 최대값)

뷔

Vh(뷰포트 높이)는 뷰포트 높이의 1%에 해당하는 1vh 로 측정됩니다. 이 단위는 전체 높이 요소를 만드는 데 매우 유용합니다. Vh는 백분율과 유사하게 반응하지만 상위 요소 높이에 의존하지 않습니다.

어디에서나 vh를 사용할 수 있지만 vh의 가장 일반적인 사용 사례는 전체 높이 요소를 만드는 것입니다. 이 예제에서 full-height 클래스는 뷰포트의 100% 높이가 되는 파란색 컨테이너를 만듭니다.

[CSS]
.전체 높이{
높이:100vh;
배경:파란색;
}
[/css]

폭스바겐

Vw(뷰포트 너비)는 vh와 유사하지만 뷰포트의 높이가 아닌 너비를 고려합니다. 1vw는 뷰포트 너비의 1%와 같습니다. 이러한 단위는 타이포그래피를 기반으로 반응형 뷰포트를 생성하려는 경우에 매우 유용할 수 있습니다.

이 예제에서 h1 의 font-siz 는 뷰포트 너비의 6%이므로 뷰포트 너비가 1000px이면 글꼴 크기는 60px이고 뷰포트가 500px이면 글꼴 크기는 30px입니다.

[CSS]
h1{
글꼴 크기:6vw;
}
[/css]

Vmin

Vmin은 뷰포트의 너비 또는 높이 중 더 작은 값의 최소값을 기준으로 계산됩니다. 높이 1000px, 너비 800px의 뷰포트 크기가 있다고 가정합니다. 1vmin 8px와 같습니다.

Vmax

Vmax는 최대값이 뷰포트로 간주되는 vmin 과 정반대로 계산됩니다.

높이 1000px, 너비 800px의 이전 뷰포트 예제와 같이 1vmax 는 10px와 같습니다.

이제 vmin 및 vmax 효과적으로 사용하는 방법을 살펴보겠습니다. 이전 예제를 사용하여 고정된 값이 아니라 이제 뷰포트 크기를 기반으로 유동적인 패딩과 여백을 원한다고 가정해 보겠습니다.

이 코드 스니펫에서는 패딩을 3vmax 로, 마진을 1.5vmin 으로 설정했습니다.

[CSS]
.post-item{
배경 분홍색;
패딩:3vmax;
여백:1.5vmin;
}
[/css]

패딩과 여백은 뷰포트 크기에 따라 변경됩니다.

백분율(%) 단위

백분율(%) 단위는 위에서 언급한 특정 범주에 속하지 않지만 상대적인 단위로 분류할 수 있습니다. 부모 요소에 상대적입니다.

백분율은 주로 요소의 높이 및 너비와 관련이 있지만 CSS 길이 단위가 허용되는 모든 곳에서 사용할 수 있습니다.

백분율은 반응형 또는 유동적 레이아웃을 만드는 데 가장 유용한 단위 중 하나입니다. Bootstrap, Foundation 및 Bulma와 같은 인기 있는 프레임워크는 기본 레이아웃에 백분율을 사용합니다.

여기서 full-width 클래스는 부모 요소의 100% 너비가 됩니다.

[CSS]
.전체 넓이{
폭: 100%;
}
[/css]

결론

사용할 수 있는 거의 모든 CSS 단위를 다루었습니다. 목표에 따라 일부는 다른 것보다 더 적합할 것입니다. 프런트 엔드 개발자로서 다음 프로젝트에서 어떤 것이 필요할지 모르기 때문에 옵션을 아는 것이 항상 좋습니다.

그렇다면 원하는 결과를 얻기 위해 가장 자주 사용하는 단위는 무엇입니까? 아래 댓글 섹션에서 알려주세요!