【CSS】화면 가득 배경색을 붙인다
사전 준비
HTML
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画面いっぱいに背景色</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contents">
<h1>コンテンツ</h1>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
</div>
</body>
</html>
CSS
.contents{
background-color: rgb(206, 206, 206);
}
표시 확인
준비 완료입니다. 그럼 보자.
전체 화면에 배경색을 추가합니다.
간단하게 화면 전체에 배경색을 붙이고 싶은 경우는 body에 배경색을 지정하면 됩니다.
body 태그 안에 문자나 이미지 등의 요소를 기술하는 것으로 브라우저상에 표시할 수 있습니다만,body 자체에 배경색을 지정하는 것으로 화면 전체에 색을 붙일 수가 있습니다.
body{
background-color: gray;
}
.contents1{
background-color: rgb(206, 206, 206);
}
표시 확인
특정 요소의 배경색을 화면 가득 표시
contents 클래스를 화면 가득 표시합시다.
①%를 사용하여 표시
contents 클래스의 height를 100%로 하여 부모 요소의 높이를 기준으로 합니다.
그리고 화면을 채우기 위해 부모 요소의 html, body의 height도 100%로 합니다.
html,body{
height: 100%;
}
body{
background-color: gray;
}
.contents{
height: 100%;
background-color: rgb(206, 206, 206);
}
표시 확인
기본적으로 margin(여백)이 설정되어 있으므로 * 로 재설정합니다.
*{
margin: 0;
padding: 0;
}
할 수 있었습니다!
②vw,vh를 사용하여 표시
vw와 vh는 뷰포트(화면 표시 영역)에서 요소의 폭, 높이를 지정할 수 있습니다.
즉, 100vw, 100vh는 화면 크기를 기준으로 종횡 100%로 요소를 표시한다는 의미입니다.
*{
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
.contents{
width: 100vw;
height: 100vh;
background-color: rgb(255, 254, 199);
}
표시 확인 여기도 문제 없게 할 수 있었습니다!
참고
Reference
이 문제에 관하여(【CSS】화면 가득 배경색을 붙인다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/TakanoriOkawa/items/2ec400c365fa5937ccd2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画面いっぱいに背景色</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contents">
<h1>コンテンツ</h1>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
<p>
コンテンツ
</p>
</div>
</body>
</html>
.contents{
background-color: rgb(206, 206, 206);
}
간단하게 화면 전체에 배경색을 붙이고 싶은 경우는 body에 배경색을 지정하면 됩니다.
body 태그 안에 문자나 이미지 등의 요소를 기술하는 것으로 브라우저상에 표시할 수 있습니다만,body 자체에 배경색을 지정하는 것으로 화면 전체에 색을 붙일 수가 있습니다.
body{
background-color: gray;
}
.contents1{
background-color: rgb(206, 206, 206);
}
표시 확인
특정 요소의 배경색을 화면 가득 표시
contents 클래스를 화면 가득 표시합시다.
①%를 사용하여 표시
contents 클래스의 height를 100%로 하여 부모 요소의 높이를 기준으로 합니다.
그리고 화면을 채우기 위해 부모 요소의 html, body의 height도 100%로 합니다.
html,body{
height: 100%;
}
body{
background-color: gray;
}
.contents{
height: 100%;
background-color: rgb(206, 206, 206);
}
표시 확인
기본적으로 margin(여백)이 설정되어 있으므로 * 로 재설정합니다.
*{
margin: 0;
padding: 0;
}
할 수 있었습니다!
②vw,vh를 사용하여 표시
vw와 vh는 뷰포트(화면 표시 영역)에서 요소의 폭, 높이를 지정할 수 있습니다.
즉, 100vw, 100vh는 화면 크기를 기준으로 종횡 100%로 요소를 표시한다는 의미입니다.
*{
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
.contents{
width: 100vw;
height: 100vh;
background-color: rgb(255, 254, 199);
}
표시 확인 여기도 문제 없게 할 수 있었습니다!
참고
Reference
이 문제에 관하여(【CSS】화면 가득 배경색을 붙인다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/TakanoriOkawa/items/2ec400c365fa5937ccd2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
html,body{
height: 100%;
}
body{
background-color: gray;
}
.contents{
height: 100%;
background-color: rgb(206, 206, 206);
}
*{
margin: 0;
padding: 0;
}
*{
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
.contents{
width: 100vw;
height: 100vh;
background-color: rgb(255, 254, 199);
}
Reference
이 문제에 관하여(【CSS】화면 가득 배경색을 붙인다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/TakanoriOkawa/items/2ec400c365fa5937ccd2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
