오늘은 배경 사용방법에 대해서 배워볼게요.
먼저 div 가 있어야겠죠? p태그도 상관없고, 블록형태의 태그면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>background 연습</title>
<style type="text/css">
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
저는 저번에 이어서 11번 폴더를 만들었고, 마찬가지로 html을 만들었습니다.
이제 설명 안해도 이 부분은 아시겠죠?
box라는 div를 만들어줬습니다. 크기를 먼저 설정해줘야겠죠?
저번과 마찬가지로 클래스 형태로 스타일을 주겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>background 연습</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
이제 배경을 설정할 차례입니다. background 라고 써주면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>background 연습</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
아주 간단하게 만들어졌죠? 이미지로도 적용할 수 있습니다.
미리 저장해둔 이 이미지를 써보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>background 연습</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background: red url(images/1.jpg) no-repeat center center;;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
적용은 됐는데 이미지가 너무 커서 보이질 않네요.
사이즈를 키웠더니 보이네요. 사실 앞에 red는 지워도 되긴 합니다. 어떤 형태로 된거냐하면 bg로 빨간색을 깔고, 위에 이미지를 덧입힌 겁니다. 그러니... 이해하셨죠?ㅎㅎ
이미지의 크기가 너무 커서 다 안나오네요.
.box {
width: 200px;
height: 200px;
background: red url(images/1.jpg) no-repeat center center;
}
정중앙에 이미지가 나오도록 먼저 고쳐보겠습니다. 이미지가 정중앙에 나오긴 했지만 너무 커서 다 안나왔죠?
우선 실제 이미지가 얼마나 되는지 한번 띄워보겠습니다.
<body>
<h2>cover</h2>
<div class="box">
</div>
<h2>contain</h2>
<div class="box2">
</div>
<h2>Original</h2>
<img src="images/1.jpg" alt="" style="width:200px;" />
</body>
배경의 크기를 줄여주려면 2가지 방법이 있습니다.
둘다 사이즈를 줄여주는 방법인데..
background-size: cover;
이건 이미지의 가로세로 길이를 파악해서 더 작은 수치를 기준으로 줄여주는 방법
background-size: contain;
이건 이미지의 가로세로 길이를 파악해서 더 큰 수치를 기준으로 줄여주는 방법
그냥 봐서는 감이 잘 안오죠?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>background 연습</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background: red url(images/1.jpg) no-repeat center center;
background-size: cover;
}
.box2 {
width: 200px;
height: 200px;
background: red url(images/1.jpg) no-repeat center center;
background-size: contain;
}
</style>
</head>
<body>
<h2>cover</h2>
<div class="box">
</div>
<h2>contain</h2>
<div class="box2">
</div>
<h2>Original</h2>
<img src="images/1.jpg" alt="" style="width:200px;" />
</body>
</html>
차이점이 느껴지시나요? 여기서 cover는 width를 중심으로 이미지를 줄인게 아니라 height 중심으로 줄인겁니다. 이해되시죠?
contain도 확인해보겠습니다. 눈으로 확인되니까 이해하기 좋으시죠?
읽어주셔서 감사드리고 다음 영상에서 뵙겠습니다.
2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?
2019/07/08 - [프로그램 강좌] - [html02]html = head + body
2019/07/11 - [프로그램 강좌] - [html03]CSS가 뭔데? 텍스트 꾸며보기
2019/07/24 - [프로그램 강좌] - [html04]이미지로 코딩하기!
2019/07/25 - [프로그램 강좌] - [html05]이미지로 코딩하기2
2019/07/26 - [프로그램 강좌] - [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)
2019/08/14 - [프로그램 강좌] - [html07]여백의 미:margin, padding #1
2019/08/15 - [프로그램 강좌] - [html08]여백의 미: margin, padding #2
'프로그램 강좌' 카테고리의 다른 글
| [powershell]이 시스템에서 스크립트를 실행할 수 없으므로 (0) | 2019.10.18 |
|---|---|
| [react.js]업데이트하기 (0) | 2019.10.17 |
| [react.js]ref 사용방법 (0) | 2019.10.15 |
| [react.js]onSubmit, preventDefault 사용방법 (0) | 2019.10.14 |
| [react.js]onKeyPress 사용방법 (0) | 2019.10.13 |
