크기 조정 및 단위
픽셀 단위로 글꼴 크기를 설정하고 페이지를 배포한 후, 편의를 위해 브라우저 텍스트를 더 크게 설정한 독자는 전혀 변화가 없다는 것을 봅니다. 카드에 고정 너비를 지정하면 휴대폰에서 넘칩니다. 둘 다 같은 질문으로 귀결됩니다. CSS에 숫자를 입력할 때 그 숫자는 무엇을 기준으로 측정되나요? 일부 단위는 고정되어 있고, 일부는 글꼴에 따라 확대되고, 일부는 부모를 기준으로 확대되고, 일부는 화면을 기준으로 확대됩니다. 어떤 것이 어떤 것인지 알면 추측을 멈추고 작업을 수행하는 단위를 선택하기 시작합니다.
절대 단위 대 상대 단위
CSS 단위는 두 가지 계열로 나뉩니다. **절대 단위**는 절대로 변하지 않는 고정된 크기입니다. px(픽셀)은 어디서나 만날 수 있는 단위입니다. 상대 단위는 독자의 글꼴 크기나 화면 너비와 같이 다른 것으로 확대되는 크기입니다.
방을 측정하는 것을 생각해 보세요. 센티미터는 절대적입니다. 벽은 키가 크든 작든 400cm입니다. "내 발걸음 3개"는 상대적입니다. 누가 걷고 있는지에 따라 달라집니다. 절대 단위는 정확한 제어를 제공합니다. 상대 단위는 페이지가 이를 보는 사람에게 맞게 조정되도록 합니다.
그 적응이 중요합니다. 일부 독자는 눈에 더 편하기 때문에 더 큰 기본 텍스트 크기를 설정합니다. 상대 단위로 텍스트 크기를 설정하면 해당 설정이 적용되고 페이지가 이에 맞게 커집니다. 픽셀로 잠그면 고정된 상태로 유지되고 무시합니다.
px와 같은 절대 단위는 절대로 변하지 않는 고정된 크기입니다. 상대 단위는 독자의 글꼴 크기나 화면 너비와 같이 다른 것으로 확대됩니다. 상대 단위를 사용하면 페이지가 이를 보는 사람에게 맞게 조정되므로 더 큰 텍스트 크기를 설정하는 독자에게 중요합니다. 픽셀 및 미세한 조정
픽셀(px)은 길이의 작은 고정 단위입니다. 16px는 항상 16px이므로 추론하기 가장 직접적입니다. 이는 어떤 상황에서든 같은 크기로 유지되어야 하는 작은 것에 적합합니다. 테두리의 두께, 작은 둥근 모서리, 고정 아이콘입니다.
.card {
border: 1px solid #ccc; /* 헤어라인 테두리, 항상 1px */
border-radius: 8px; /* 고정된 둥근 모서리 */
}문제는 픽셀이 독자를 고려하지 않는다는 것입니다. 누군가 브라우저를 더 큰 텍스트로 설정했다면, 24px로 잠긴 제목은 24px로 유지되고 그들의 선택을 무시합니다. 그래서 px는 테두리와 작은 세부 사항에는 좋지만 페이지의 단어에 원하는 단위는 아닙니다.
px)은 고정된 크기이므로 16px는 항상 16px입니다. 이는 1px 테두리나 작은 둥근 모서리와 같이 그대로 유지되어야 하는 작은 것에 적합합니다. 거래는 px가 더 큰 텍스트를 설정한 독자를 무시한다는 것이므로 페이지의 단어를 원하는 단위가 아닙니다. em 및 rem
글꼴 크기로 확대되는 두 가지 상대 단위가 있습니다. em과 rem. 도달할 단위는 **rem**입니다. 이는 페이지의 루트 글꼴 크기, 즉 전체 문서에 설정된 기본 텍스트 크기(기본적으로 16px)를 기준으로 측정합니다. 따라서 1rem은 16px, 1.5rem은 24px, 2rem은 32px입니다.
h1 {
font-size: 2rem; /* 2 x 16px = 32px */
}
p {
font-size: 1rem; /* 16px, 기본 크기 */
margin-bottom: 1.5rem; /* 아래 24px 공간 */
}rem은 그 하나의 루트 크기에 연결되어 있으므로 예측 가능합니다. 1.5rem은 페이지의 어디서나 같은 것을 의미합니다. 그리고 독자가 기본 텍스트 크기를 올리면 rem으로 크기가 조정된 모든 것이 함께 커집니다. 다른 단위인 em은 대신 요소 자신의 글꼴 크기로 확대되므로 얽힐 수 있습니다. rem으로 시작하면 거의 걸리지 않을 것입니다.
rem과 em은 모두 글꼴 크기로 확대되며, 시작할 하나는 rem입니다. 페이지의 루트 크기를 측정합니다. 기본적으로 16px이므로 1.5rem은 24px이고 어디서나 같은 의미입니다. em은 대신 요소의 자신의 글꼴 크기로 확대되므로 얽힐 수 있습니다. rem을 먼저 도달하세요. 백분율
백분율(%)은 부모를 기준으로 요소의 크기를 조정합니다. 너비의 경우, width: 50%는 요소가 있는 상자 너비의 절반을 의미합니다.
.sidebar {
width: 25%; /* 부모 너비의 1/4 */
}
.content {
width: 75%; /* 남은 3/4 */
}이것은 레이아웃을 유동형으로 만드는 것입니다. 너비가 부모의 분수이므로 부모가 변함에 따라 축소되고 커집니다. 창을 크기 조정하면 50% 열은 너비의 절반으로 유지되는 대신 고정 500px 열이 가장자리를 넘칩니다. 그 유연성이 반응형 디자인에서 백분율이 자주 나타나는 이유입니다.
width: 50%는 요소가 있는 상자 너비의 절반입니다. 이는 열을 유동형으로 만듭니다. 창을 크기 조정하면 넘치지 않고 커지고 축소됩니다. 이것은 어떤 화면에도 맞는 레이아웃 뒤의 주요 도구 중 하나입니다. 뷰포트 단위
뷰포트 단위는 브라우저 창 자체를 기준으로 크기를 조정합니다. **vw**는 뷰포트 너비의 백분율이고 vh는 뷰포트 높이의 백분율입니다. 뷰포트는 페이지의 보이는 영역입니다. 따라서 100vw는 창의 전체 너비이고 100vh는 전체 높이입니다.
.hero {
height: 100vh; /* 전체 화면 높이를 채움 */
}이는 전체 화면 섹션의 경우입니다. 어떤 크기이든 창을 채워야 하는 랜딩 배너와 같습니다. 단위가 창을 추적하므로 누군가 장치 크기를 조정하거나 회전할 때 한 화면에만 맞는 고정 픽셀 높이를 설정하지 않고 섹션은 전체 화면으로 유지됩니다.
vw와 vh는 브라우저 창을 기준으로 크기를 조정합니다. 100vw는 전체 너비이고 100vh는 전체 높이입니다. 창의 크기를 조정할 때 한 픽셀 높이로 잠금 대신 전체 화면으로 유지되는 랜딩 배너와 같은 전체 화면 섹션의 경우입니다.