WEB LAB
    HTML/CSS 4.2 · 4부. 반응형과 움직임

    유연한 크기

    고정 값을 걷어냅니다. clamp 로 중단점 없이 값이 변합니다.

    예상 학습 시간 16분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 초급
    개념 설명

    고정 값을 걷어내기

    미디어 쿼리는 정해진 폭에서 한 번에 바뀝니다. 그것만으로는 중단점 사이의 폭에서 어색해집니다.

    값 자체가 화면에 따라 이어서 변하게 만들면 중단점이 적어도 됩니다. 이 단원에서 그 단위들을 봅니다.

    최소 예제 · 편집 가능

    화면 기준 단위

    vw 는 화면 폭의 100분의 1, vh 는 화면 높이의 100분의 1 입니다. 

    <div class="a">너비 50vw — 화면의 절반</div>
<div class="b">너비 50% — 부모의 절반</div>
    .a, .b { background: #ece7fb; padding: 12px; margin-bottom: 8px; }

/* 화면 폭 기준 — 부모와 상관없습니다 */
.a { width: 50vw; }

/* 부모 기준 */
.b { width: 50%; }

    vw 는 세로 스크롤 막대를 셈에 넣습니다. width: 100vw 를 주면 막대 너비만큼 넘쳐 가로 스크롤이 생깁니다. 폭을 화면에 맞추려면 100% 를 사용하십시오.

    최소 예제 · 편집 가능

    clamp — 최소·기준·최대를 한 줄로

    clamp(최소, 기준, 최대) 는 기준값이 변하되 최소와 최대를 넘지 않게 합니다. 글자 크기에 가장 많이 사용합니다. 

    <h3 class="title">창 너비를 바꿔 보십시오</h3>
<div class="box">안쪽 여백도 함께 변합니다</div>
    /* 최소 20px, 기준 화면 폭의 4%, 최대 36px */
.title { font-size: clamp(20px, 4vw, 36px); }

/* 여백에도 씁니다 */
.box {
  padding: clamp(12px, 3vw, 32px);
  background: #ece7fb;
  border-radius: 8px;
}

    중단점 하나 없이 글자가 화면에 맞춰 커집니다. 최소와 최대를 반드시 두십시오 — 4vw 만 적으면 아주 좁은 화면에서 읽을 수 없이 작아지고, 넓은 화면에서 지나치게 커집니다.

    상세 사용법

    calc — 값끼리 계산하기

    style.css 
    /* 다른 단위끼리도 계산됩니다 */
width: calc(100% - 40px);
height: calc(100vh - 60px);   /* 머리말 높이를 뺀 나머지 */

/* 연산자 앞뒤에 반드시 빈칸을 둡니다 */
width: calc(100%-40px);    /* 듣지 않습니다 */

    + 와 - 앞뒤에는 빈칸이 있어야 합니다. 없으면 부호로 읽혀 값이 무시됩니다. 이것이 안 듣는 까닭의 대부분입니다.

    상세 사용법

    고정 값을 걷어내는 순서

    이렇게 적었다면이렇게 바꿉니다
    width: 800pxmax-width: 800px — 좁아지면 함께 줄어듭니다.
    height: 400pxmin-height: 400px — 내용이 길면 늘어납니다.
    font-size: 32pxclamp(20px, 4vw, 32px)
    padding: 40pxclamp(16px, 4vw, 40px)

    가로 스크롤이 생기면 어딘가에 고정 폭이 남아 있는 것입니다. 그것부터 찾으십시오(5.5).

    흔한 실수

    세 가지

    • width: 100vw 를 씁니다. 세로 스크롤 막대만큼 넘쳐 가로 스크롤이 생깁니다. 100% 가 맞습니다.
    • calc 의 연산자에 빈칸을 빠뜨립니다. 조용히 무시됩니다.
    • vw 만으로 글자 크기를 정합니다. 최소와 최대가 없어 어떤 화면에서는 읽을 수 없습니다. clamp 로 감싸십시오.
    실습 문제

    직접 해보기

    1. 고정 값을 유연하게 바꾸기 난이도 중

    아래를 좁은 화면에서도 넘치지 않게 고치십시오.

    고칠 코드 
    .hero {
  width: 900px;
  padding: 60px;
  font-size: 40px;
}
    너비는 최대만 정하고, 여백과 글자는 최소·최대를 함께 둡니다.
    .hero { max-width: 900px; margin: 0 auto; padding: clamp(20px, 5vw, 60px); font-size: clamp(24px, 5vw, 40px); }
    요약

    정리

    • % 는 부모 기준, vw 는 화면 기준입니다.
    • 100vw 는 스크롤 막대 때문에 넘칩니다. 100% 를 사용합니다.
    • clamp(최소, 기준, 최대) 로 중단점 없이 값을 변하게 합니다.
    • calc 의 연산자 앞뒤에는 빈칸이 필요합니다.