๐position
CSS์์ position ์์ฑ์ HTML ๋ฌธ์ ์์์ ์์๊ฐ ๋ฐฐ์น๋๋ ๋ฐฉ์์ ๊ฒฐ์ ํฉ๋๋ค. ๋ง์ ๊ฒฝ์ฐ, position ์์ฑ์ ์์์ ์ ํํ ์์น ์ง์ ์ ์ํด์ top, left, bottom, right ์์ฑ๊ณผ ํจ๊ป ์ฌ์ฉ๋ฉ๋๋ค.
*ํฌ์คํธ ์๊ณผ ๋น์ทํ ์์ฑ์ ๊ฐ์ง๊ณ ์๋ค.
position์ ๊ธฐ๋ณธ๊ฐ์ static
<body>
<main id="container">
<div></div>
<div class="box">box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
</body>@charset "utf-8";
#container{
background-color: yellow;
left:20px;
top: 20px;
}position์ ์ก์ง์๊ณ ์์น๋ฅผ ์ค์ ํ๋ฉด ์์ง์ด์ง ์๋๋ค.
@charset "utf-8";
#container{
background-color: yellow;
left:20px;
top: 20px;
position: relative;
}
div{
width: 50px;
height: 50px;
background-color: red;
margin-bottom: 10px;
}
.box{
background-color: blue;
}
container์ position ์ง์ ํ ์์น๊ฐ ์ ์ฉ๋์๋ค.
.box{
background-color: blue;
left: 20px;
top: 20px;
position: relative;
}
box์ ์ค์ ํ ์๋ ์์น์์ ์๋์ ์ผ๋ก left,top 20px ์ฉ ์ด๋ํ ๊ฒ์ ํ์ธํ ์ ์๋ค.
.box{
background-color: blue;
left: 20px;
top: 20px;
position: absolute;
}
absolute ์ง์ ํ ์์ ํ ์์น๊ฐ ๋ฐ๋์๋ค.
absolute๋ ๋์ ๊ฐ์ฅ ๊ฐ๊น์ด์ ์์นํ ๋ถ๋ชจ์์์์ ์์น๋ณ๊ฒฝ์ด ์ผ์ด๋๋ค.
relative๋ ์๋ ์์ด์ผ ํ๋ ์๋ฆฌ์์ ์๋์ ์ผ๋ก ์ด๋ํ๊ณ
absolute๋ ์์ดํ ์ด ๋ด๊ฒจ ์๋ ์์ ์์์ ์ด๋ํ๋ค.
(๋ถ๋ชจ ์์์๋ ๊ผญ postion:relative๊ฐ ์ง์ ๋์ด์ผํ๋ค. ์๊ทธ๋ฌ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์๋์ผ๋ก ๋ถ๋ชจ ์์๋ก ์ง์ ๋๋ค.)
.box{
background-color: blue;
left: 20px;
top: 20px;
position: fixed;
}
fixed๋ ์์์์์ ๋ฒ์ด๋ window์์์ ์์ง์ธ๋ค.
๐display ์์ฑ
display css ์์ฑ์ ์์๋ฅผ ๋ธ๋ก๊ณผ ์ธ๋ผ์ธ ์์ ์ค ์ด๋ ์ชฝ์ผ๋ก ์ฒ๋ฆฌํ ์ง์ ํจ๊ป gird,flex์ฒ๋ผ ์์ ์์๋ฅผ ๋ฐฐ์นํ ๋ ์ฌ์ฉํ ๋ ์ด์์์ ์ค์ ํฉ๋๋ค.
display ์์ฑ์, ํ์์ ์ผ๋ก๋ ์์์ ๋ด๋ถ์ ์ธ๋ถ ๋์คํ๋ ์ด ์ ํ์ ์ค์ ํฉ๋๋ค. ์ธ๋ถ ๋์คํ๋ ์ด ์ ํ์ ํ๋ก์ฐ ๋ ์ด์์์ ์์๊ฐ ์ฐธ์ฌํ๋ ๋ฐฉ๋ฒ์ ๋ํ๋ด๊ณ , ๋ด๋ถ ๋์คํ๋ ์ด ์ ํ์ ์์์ ๋ ์ด์์ ๋ฐฉ์์ ์ค์ ํฉ๋๋ค.
Flow layout์ด๋ Inline ์์๋ค์ด layout ์์ ์ด๋ ํ ๋ณํ๋ ์ฃผ์ง ์์์ ๋ ํ๋ฉด์ ๋ํ๋๋ ๋ฐฉ์์ ๋งํ๋ค. ์ด๋ค์๊ฒ ๋ณํ๊ฐ ์ฃผ์ด์ง๋ฉด ๊ฐ์๊ฐ ๋ ๋ฆฝ์ ์ผ๋ก ์์ง์ด๊ธฐ ์์ํ๋ค.
์ข ๋ฅ
- inline
- block
- inline-block
- flex (๋ ์ด์์ ๋ฐฐ์น๋ฅผ ์ฝ๊ฒ ํด์ฃผ๋) - ๋ถ๋ชจ์์์ ์ ์ฉํ๊ธฐ
- list-item
- none
<body>
<main id="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<span>1</span>
<span>2</span>
<span>3</span>
</main>
</body>
@charset "utf-8";
div,span{
width: 100px;
height: 100px;
}
div{
background-color: red;
display:inline;
margin-top: 10px;
}
span{
background-color: blue;
display: block;
margin-top: 10px;
}
๊ฒฐ๊ณผ๊ฐ
display:inline ์์๋ contents, ๋ฌผ๊ฑด ์์ฒด๋ง์ ๊พธ๋ฉฐ์ฃผ๋ฉฐ
ํ๊ทธ์์ ๋ด์ฉ์ด ์์ผ๋ฉด ๋ณด์ด์ง ์๊ณ
์ฌ์ฉ์๊ฐ ์ค์ ํ width, height๊ฐ์ ์ ์ํ ๊ฒ๊ณผ๋ ์๊ด์์ด
์์ ๋ค์ด์๋ ๋ฌผ๊ฑด์ ํฌ๊ธฐ์ ๋ง์ถฐ ๋ณ๊ฒฝ๋๋ค.
@charset "utf-8";
div,span{
width: 100px;
height: 100px;
}
div{
background-color: red;
display:inline-block;
margin-top: 10px;
}
span{
background-color: blue;
display: block;
margin-top: 10px;
}
๋ฐ๋๋ก inline-block์ ํ์ค์ ๋ค ๋ฃ๋๋ฐ ๋ธ๋ก๋จ์, ์์๋ก ๋ณํด์ contents์ size์๋ ์๊ด์์ด ์ฌ์ฉ์๊ฐ ์ ์ํ width,height ๊ฐ์ ๋ง์ถฐ ๋ํ๋๋ค.
block๋ ๋ง์ฐฌ๊ฐ์ง๋ก ์์์ด์ง๋ง ํ์ค์ ํ๋๋ก ํ๊ธฐ๋๋ ๊ฒ์ด๋ค.
* inline์ contents์ ๋ง๊ฒ, inline-block์ ํ์ค์ ์ฌ๋ฌ๊ฐ๊ฐ ์ง์ด๋ ์ ์๋ box
block์ ํ์ค๋น ํ๊ฐ๋ง ๋ค์ด๊ฐ ์ ์๋ box
์ฐธ๊ณ ์๋ฃ
์ ํ๋ฒ ๋๋ฆผ์ฝ๋ฉ๋ ์์์ ๋ณด๋ฉฐ ์ ๋ฆฌํ์์ต๋๋ค.
'Frontend > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| css - transform(์ธ ๋ณํ ํจ์๋ค), transtion (2) | 2023.04.15 |
|---|---|
| css - flexbox (container , item) (0) | 2023.04.06 |
| css - ๋จ์ ์ดํดํ๊ธฐ(px,em,rem,vw,vh) (0) | 2023.03.21 |
| css - ๋ค์ ์ฐจ๊ทผ์ฐจ๊ทผ ๊ณต๋ถํ๊ธฐ! (0) | 2023.03.20 |
| css๋? (0) | 2023.03.19 |
