CSS의 사이즈

요소의 크기는 width(너비)와 height(높이) 속성으로 지정합니다. 단위는 px, %, vw/vh 등을 사용하며, 피그마의 W, H 값과 같은 개념입니다.
그런데 크기는 "지정하는 법"보다 "지정하지 않았을 때 어떻게 되는가"를 아는 것이 먼저입니다. 기본값 auto를 이해하면 "왜 배경이 안 보이지?", "왜 가로 스크롤이 생기지?" 같은 문제의 답이 전부 풀립니다.

축약 입력: VSCode에서 w + Tab → width, h + Tab → height.

width: auto - 너비의 기본값

블록 요소는 너비를 설정하지 않아도 브라우저의 가로를 전부 차지합니다.
width의 기본값이 auto이기 때문입니다. 기본값이란 기재하지 않아도 적용되는 값입니다.

<h1>The new IONIQ 5</h1>

h1 {
    border: 1px solid blue;
}

크기를 아무것도 지정하지 않았지만 테두리를 그려보면, 너비는 브라우저 전체를 차지하고 높이는 내용에 맞춰져 있는 것을 확인할 수 있습니다.

height: auto - 높이의 기본값

높이는 내용에 맞춰 지정됩니다. 내용(글자 크기, 행간, 여백 등)으로 높이가 맞춰지며,
내용이 없으면 높이는 0입니다.

배경색을 넣었는데 화면에 아무것도 안 보인다면, 요소 안에 내용이 없어서 높이가 0인 경우가 대부분입니다. 초보 단계에서 정말 자주 만나는 상황이니 기억해 두세요. 참고로 내용 없이 border만 있으면 위아래 테두리 두께만큼(1px 테두리라면 2px) 얇은 선이 보입니다.

크기 고정하기 - px로 지정

width: 1000px — 너비가 지정한 픽셀로 고정됩니다. 브라우저 크기에 관계없이 주고 싶은 크기를 줄 수 있고, 내용이 길면 끝에서 줄바꿈됩니다.

height: 70px — 높이를 부여하면, 내용의 양이 높이를 초과할 때 잘리거나 스크롤이 생길 수 있습니다.

p {
    width: 1000px;
    height: 70px;
    background: lightblue;
}

긴 문단에 이 스타일을 적용하면, 4줄 분량의 텍스트가 높이 70px짜리 배경을 삐져나와 잘린 것처럼 보입니다. 배경은 70px에서 끝나는데 글자는 계속 흘러나오는 상태입니다. 그래서 원칙은 하나입니다.

높이의 고정이 꼭 필요한 경우가 아니면 넣지 않습니다.

height는 일반적으로 자식 요소의 내용에 맞춰 부모 높이가 결정되므로 안 써도 됩니다. 꼭 필요한 경우는 세 가지 정도입니다. 자식 요소나 내용이 없을 때, 고정된 높이가 필요할 때, flex를 사용해 레이아웃을 잡을 때.

피그마 시안의 width 1920px, 그대로 쓰면 안 되는 이유

문제 풀이 영상 15분 15초에 자세한 내용

디자인 시안에서 확인되는 width 1920px은
PC 브라우저 창 크기에 맞춘 너비 auto를 기준으로 설정된 값입니다.
실제 퍼블리싱에서 width: 1920px로 설정하면
화면 크기에 따라 가로 스크롤이 생길 수 있습니다.

즉, 피그마 패널에 보이는 1920은 "고정하라"는 뜻이 아니라 "디자이너가 1920px 화면 기준으로 그렸다"는 뜻입니다. 코드에서는 width를 지정하지 않아 auto(화면 가득)로 두는 것이 정답입니다. 1920px보다 좁은 노트북에서 가로 스크롤이 생기는 원인 1순위가 바로 시안의 숫자를 그대로 옮긴 width: 1920px입니다.

height도 마찬가지입니다. 피그마의 Hug 값(내용에 맞춤)이 곧 CSS의 height: auto에 해당하므로, 시안의 높이 숫자를 옮겨 적을 필요가 없습니다.

#CSS기초 #width #height #widthauto #CSS크기 #가로스크롤 #웹퍼블리싱 #피그마 #반응형 #프론트엔드 #코딩독학