background ์ ๋ํ์ ์ธ ์์ฑ 2๊ฐ๋ฅผ ์๊ฐํด๋ณด๊ฒ ์ต๋๋ค.
1. background-color ์์ฑ
2. background-image ์์ฑ
1. background-color ์์ฑ
๋ฐฐ๊ฒฝ์์ ์๋ฏธํ๋ฉฐ, ๊ฐ์ color ์์ฑ์ ํฌ๋งท์ ์ฌ์ฉํฉ๋๋ค.
<html>
<head>
<style>
div#container div#text {
width: 500px;
height: 50px;
background-color: teal;
color: white;
}
div#container div#des {
width: 500px;
height: 200px;
background-color: tomato;
}
</style>
</head>
<body>
<div id="container">
<div id="text">background-color</div>
<div id="des"></div>
</div>
</body>
</html>
2. background-image ์์ฑ
๋ฐฐ๊ฒฝ์ ์ด๋ฏธ์ง๋ก ์ง์ ํ๋ฉฐ, url์ ๊ฒฝ๋ก๋ฅผ ์ ๋ ฅํด์ค๋๋ค.
<html>
<head>
<style>
div#container div#text {
width: 600px;
height: 50px;
background-color: yellowgreen;
color: white;
}
div#container div#des {
width: 600px;
height: 400px;
background-image: url("./description/image/back.jpg");
}
</style>
</head>
<body>
<div id="container">
<div id="text">background-color</div>
<div id="des"></div>
</div>
</body>
</html>
'Web > ๐งฉ html + CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ํ ์ด๋ธ ์์ฑ (0) | 2020.11.03 |
|---|---|
| ํฌ๊ธฐ (0) | 2020.11.03 |
| font ์์ฑ (0) | 2020.11.03 |
| ์ปฌ๋ฌ (0) | 2020.11.03 |
| ๊ฒฐํฉ ์ ํ์ (0) | 2020.11.03 |