๐ปํ๊ทธ์ ์ํ ์ ๋ ฌ๐ป
์ธ๋ผ์ธ ํ๊ทธ์ ๋ธ๋ญ ํ๊ทธ์ ๋ฐฉ๋ฒ์ด ์์ดํ๋ค.
1. ๋ด์ฉ๋ฌผ์ ์ ๋ ฌ
- text-align
- ์ธ๋ผ์ธ ํ๊ทธ๋ ์ข์ฐ ์ฌ๋ฐฑ์ด ์์ด์ ์ ์ฉ์ด ๋ถ๊ฐ๋ฅํ๋ค.
- ๋ธ๋ญ ํ๊ทธ ์ ์ฉ์ด๋ค.
<body>
<h1>ํ๊ทธ์ ์ํ ์ ๋ ฌ</h1>
<h2>์ธ๋ผ์ธ ํ๊ทธ</h2>
<span id="span1">์ธ๋ผ์ธ ํ๊ทธ</span>
<h2>๋ธ๋ญํ๊ทธ</h2>
<div id="div1">๋ธ๋ญ ํ๊ทธ</div>
</body> <style>
body {
margin:0;
}
#span1, #div1 {
background-color: gold;
}
#span1 {
text-align: right;
}
#div1 {
text-align: right;
}
</style>
2. ํ๊ทธ ์์ฒด์ ์์น๋ฅผ ์ ๋ ฌ
- ์ธ๋ผ์ธ ํ๊ทธ
- ๋ถ๋ชจ๋ ๋ธ๋ญ ํ๊ทธ ๋์์ ๋ฐ๋๋ค.(ex. <div>)
- ๋ธ๋ญ ํ๊ทธ
- ์ข์ฐ ์ฌ๋ฐฑ ๊ณต๊ฐ์ด ์์ด์๋ถ๊ฐ๋ฅํ๋ค.
- ๋ง์ง์ ์กฐ์ ํ์ฌ ์ ๋ ฌํ๋ค.
์ธ๋ผ์ธ ํ๊ทธ ์กฐ์
<body>
<h1>ํ๊ทธ์ ์ํ ์ ๋ ฌ</h1>
<h2>์ธ๋ผ์ธ ํ๊ทธ</h2>
<div style="text-align: center;">
<span id="span1">์ธ๋ผ์ธ ํ๊ทธ</span>
</div>
<h2>๋ธ๋ญํ๊ทธ</h2>
<div id="div1">๋ธ๋ญ ํ๊ทธ</div>
</body>
๋ธ๋ญํ๊ทธ ์กฐ์
<style>
body {
margin:0;
}
#span1, #div1 {
background-color: gold;
}
#span1 {
text-align: right;
}
#div1 {
text-align: center;
width: 150px;
margin: 0 auto;
}
</style>
'WEB > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ํน์ ํ ์์ฑ์ ๊ฐ์ง ์์๋ค์ ์ ํ : ์์ฑ ์ ํ์ (0) | 2023.09.26 |
|---|---|
| [CSS] ์์ ์ ํ : ๊ฐ์ํด๋์ค (0) | 2023.09.26 |
| [CSS] ์์์ ์์น : position, z-index (0) | 2023.09.26 |
| [CSS] CSS ์ด๊ธฐํํ๊ธฐ(Reset CSS, Normalize CSS ) (0) | 2023.09.26 |
| [CSS] ์์์ ์ข์ฐ์์น ์กฐ์ : float (0) | 2023.09.26 |
