CSS에서 width & height 설정 방법
width 속성과 height 속성의 기본값(default)은 auto입니다. 이 말인 즉, 기본적으로 width: auto; height: auto;라는 뜻이고, 각 속성들은 부모의 크기를 기준으로 결정된다는 뜻입니다. 이해를 돕기 위해 구체적인 예시를 들어보겠습니다. 웹사이트 배경화면으로 특정 이미지를 삽입하려고 한다고 가정해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> ViewWidth & ViewHeight </title>
</head>
<body>
<div class="cover"></div>
<style>
.cover {
background-image: url("images/cover.png");
}
</style>
</body>
</html>
만약 위의 예시처럼, 빈 div에 높이 설정을 안 해준다면 화면에 사진은커녕 아무것도 보이지 않게 됩니다.
이 문제를 해결하고, 배경화면에 이미지가 드러나도록 하기 위해 클래스가 cover인 div태그의 높이를 100%;로 설정하고, 그 부모 요소인 html 태그와 body 태그에 각각 { height:100%; }을 설정해주는 방법이 있지만, 그것은 예전에 사용하던 방식입니다.
<style>
html, body {
height: 100%;
}
.cover {
background-image: url("images/cover.png");
height: 100%;
}
</style>
height: 100%를 보다 편리하게 사용하기 위해 CSS3부터 새롭게 등장한 개념이 있습니다. 바로 viewport width(vw)와 viewport height(vh)라는 개념입니다. 단어에서도 알 수 있듯이, 보이는 화면의 너비와 높이를 의미합니다. 즉, 너비나 높이를 100vw 혹은 100vh로 설정하면, 부모-자식 연결고리 없이, 곧바로 사용 화면의 사이즈에 맞춰 이미지가 화면 위아래로 꽉 차게 됩니다. 이때 viewport란 모바일 화면, 태블릿 화면, 컴퓨터 모니터 화면 등의 화면 매체를 의미하며, vw, vh 개념은 뷰포트의 종류와 상관없이 모두 동일하게 적용됩니다.
여기서 더 나아가, 배경 사진이 화면 중앙에 위치하고, 화면 전체에 꽉 차도록 배치되기를 원한다면, 아래 보기와 같이 background-size 속성과 background-position 속성을 사용하시면 됩니다.
<style>
.cover {
background-image: url("images/cover.png");
background-size: cover;
background-position: center;
}
</style>
background-size: cover; background-position: center;로 설정해주면, 사진 비율을 잃지 않은 채로 정중앙에 위치하고 되고, 뷰포트 종류와 상관없이 각각의 화면 크기에 맞게 반응형으로 자동 조정됩니다.
'HTML & CSS > CSS' 카테고리의 다른 글
| [CSS] 화면 가득 높이 설정 방법 (0) | 2021.08.26 |
|---|---|
| [CSS] 스크롤 스냅 (Scroll Snap) (0) | 2021.08.07 |
| [CSS] 리셋: reset.css (0) | 2021.08.06 |
| [CSS] 반응형 Navbar 제작 (w/o 부트스트랩) (0) | 2021.08.06 |
| [CSS] Flexbox 완벽정리 (0) | 2021.08.05 |