: ) Web/์น ์คํฐ๋
CSS ๊ธฐ์ด - <div> ์ด์ฉํ์ฌ ๋ค๋ชจ ์์ ๋ง๋ค๊ธฐ
miiinn
2023. 11. 9. 21:33
๐ ๋ค๋ชจ์์ ๋ง๋ค๊ธฐ
1. html ํ์ผ์์ <div>ํ๊ทธ ์ฌ์ฉ
<div class="box">๋ค๋ชจ๋ฐ์ค</div>
2. css ํ์ผ์์ ๋ค๋ชจ์์ ์์ฑ ์ ํ๊ธฐ
- backgound-color = background
- margin (์ํ์ข์ฐ ์ฌ๋ฐฑ)
- padding (์์ชฝ ์ฌ๋ฐฑ)
- border (ํ ๋๋ฆฌ) (๋๊ป / solid, dotted / ์๊น)
- border-radius (ํ ๋๋ฆฌ ๋ฅ๊ธ)
- width, hight ๋ฑ๋ฑ
.box {
width: 100px;
hight: 100px;
background-color: cadetblue;
margin: 30px;
padding: 5px;
border: 4px solid black;
border-radius: 15px;
}
- ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ด๋ฏธ์ง ๊ฐ์ด๋ฐ ์ ๋ ฌ๊ณผ ๋์ผ
.box {
width: 100px;
hight: 100px;
background-color: cadetblue;
margin: 30px;
padding: 5px;
border: 4px solid black;
border-radius: 15px;
**display: block;
margin-left: auto;
margin-right: auto**
}
- <div>๋ฐ์ค๋ display:block์ด ๊ธฐ๋ณธ ์ค์ ์ด๋ฏ๋ก ์๋ต๊ฐ๋ฅ
๐ display : block
- ๊ฐ๋ก ํ์ ์ ๋ถ ์ฐจ์งํด์ฃผ๋ผ
- <div>, <p>, <h> ๋ ๊ธฐ๋ณธ์ผ๋ก ์์
๐ ์์ ์ง์
- <div> </div>์์ ๊ธ์๋ ๋์ถฉ ์ ์ง ๋ง๊ณ ํ๊ทธ๋ฅผ ์ด์ฉํด์ ์ ๊ธฐ!
- <div><p> → ๋ถ๋ชจ ํ๊ทธ์ธ <div>์ ์ ์ฉ๋ .boxํด๋์ค์ <p>์ ๋ํ๊ฑฐ ์ถ๊ฐํด๋ ์๋์ผ๋ก ์์๋จ. → <p>์ ์ง์ ์ ์จ๋ ๋จ.
- inherit ์ง์ → font-size, color, font-family ๋ฑ๋ฑ ์ง์
.box {
width: 300px;
hight: 50px;
background-color: lightblue;
margin: 30px;
padding: 5px;
border: 4px solid black;
border-radius: 15px;
display: block;
margin-left: auto;
margin-right: auto;
**font-size: 15px;
color: darkolivegreen;
text-align: center**
}