๐ฅ์ํ์ฝ๋ฉ CSS
๋ ์ด์์
inline vs block level
html์ ํ๊ทธ๋ ํ๊ทธ์ ์ฑ๊ฒฉ์ ๋ฐ๋ผ ํ๋ฉด์ ์ฒด๋ฅผ ์ฐ๋ ํ๊ทธ ์์ ์ ํฌ๊ธฐ๋งํผ ์ฐ๋ ํ๊ทธ๋ก ๋๋๋ค.
- | inline | block level |
---|
์ ์ฉ | ์์ ์ ํฌ๊ธฐ | ํ๋ฉด์ ์ฒด |
ex | a ํ๊ทธ | h1 ํ๊ทธ |
์์ฑ ๋ฐ๊พธ๋ ๋ฒ | a{display:block;} | h1{display:inline} |
box model
์นํ์ด์ง์ ํํ๋ ๋ ์ฌ๋ฐฑ, ์์น, ํฌ๊ธฐ ์ด๋ฐ ๊ฒ๋ค์ ๊ฒฐ์ ํ๋ ๊ฒ์ด๋ค.

- ํ
๋๋ฆฌ ์์ฑ
-border: 10px solid red;
-border: 10px dotted blue;
box-sizing
element์ ํฌ๊ธฐ๋ฅผ ์ง์ ํ ๋ ์ฌ์ฉํ๋ค.
- ๊ธฐ๋ณธ๊ฐ์ box-sizing:content-box
- ๋ชจ๋ elment๊ฐ width๊ฐ์ด ๋ฌ๋ผ์ ธ๋ ํฌ๊ธฐ๋ ๊ฐ์ ์ ์๋๋ก ํ๋ box-sizing:border-box
๋ณดํต *{box-sizing:border-box;}์ ์ค๋ค.
๋ง์ง๊ฒน์นจ
margin์ด ๊ฒน์น๋ ๊ฒฝ์ฐ๊ฐ ์๊ธธ ์ ์๋ค.
- ์ด๋ ๊ฒน์น๋ ๋ถ๋ถ์์ ๋ ํฐ ๊ฐ์ ๊ฐ์ง margin์ด ์ ์ฉ๋๋ค.
- ๋ถ๋ชจelement์๋์ ์์element๊ฐ ์์ ๋ border๊ฐ์ ๋ฐ๋ก ์ฃผ์ง ์๋ ์ด์ ๋ง์ฐฌ๊ฐ์ง๋ก ํฐ ๊ฐ์ ๊ฐ์ง margin์ด ์ ์ฉ๋๋ค.
- border๊ฐ์ด ์๋ค๋ฉด, ๋ margin์ด ๊ฒน์ณ์๋ค๊ณ ์๊ฐํ๊ธฐ: ์/์๋/์ข/์ฐ ํฐ ๊ฐ์ด ์ ์ฉ๋๋ค.
ํฌ์ง์
html์ element์ ํ๋ฉด์ ์์น๋ฅผ ์ง์ ํ๋ ๊ฒ
- position:satic
- ๊ธฐ๋ณธ๊ฐ ํฌ์ง์
- left/right/top/bottom์ ๊ฐ์ ๋ฌด์ํ๋ค.
- position:relative
- ์๋์ ์ธ ํฌ์ง์
- ๋ถ๋ชจ๋ฅผ ๊ธฐ์ค์ผ๋ก left/right/top/bottom์ผ๋ก ์์น๋ฅผ ์กฐ์ ํ๋ค.
- position:absoult
- ์ ๋ ํฌ์ง์
- ๋ง์ฝ ๋ถ๋ชจ๋ค์ด ๋ค static์ด๋ผ๋ฉด html์ ๊ธฐ์ค์ผ๋ก ์์น๊ฐ ์ ํด์ง๋ค.๊ทธ๋ฆฌ๊ณ ๋ชจ๋ ๋ถ๋ชจ์ ์คํ์ผ์ ์์๋ฐ์ง ์๋๋ค.
- ๋ถ๋ชจ๋ค ์ค ํ๋๋ผ๋ relative๊ฐ์ ๊ฐ์ง๋ค๋ฉด absolute์ฌ๋ ๊ทธ ๋ถ๋ชจ์ ๋ํ์ฌ ์๋์ ์ธ ์์น๋ก ๊ฐ์ด ์ ํด์ง๋ค.
- position:fixed
FLEX
https://codepen.io/enxaneta/pen/adLPwv ์ฐธ๊ณ
๋ ์ด์์์ ์ก์ ๋ ์ฌ์ฉํ๋ ๊ฒ.
ul ol์ฒ๋ผ ์นดํ
๊ณ ๋ฆฌ ํ
๊ทธ๊ฐ ํ์ํ๋ค.(์์๊ณผ ๋ถ๋ชจ๊ฐ ์์ด์ผ ํ๋ค.)
<container>
<item></item>
</container>
flex์์ ์ฌ์ฉ๋๋ ํ๊ทธ๋ค
container | item |
---|
display | order |
flex-direction | flex-grow |
flex-flow | flex-shrink |
flex-wrap | flex-basis |
justify-content | flex |
align-items | align-self |
align-content | |
- flex๋ฅผ ์์ํ๊ธฐ์ํ ์ฒซ ๋ฒ์งธ ๋จ๊ณ:
display:flex
- container์์ flex-direction์ผ๋ก item์ ํ์ด(์ธ๋ก๋ก ์ฐ๊ธฐ/๊ฐ๋ก๋ก ์ฐ๊ธฐ)์ค์ ๊ฐ๋ฅ
- flex-direction: row ํ
- flex-direction: row-reverse
- flex-direction: column ์ด
- flex-direction: column-reverse
- flex-basis
- ๊ฐ item์ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์
- ์ ํ์๋ฅผ .item:nth-child()๋ก ํ์ฌ ์ํ๋ item์ ์ ํ๊ฐ๋ฅ
- flex-grow
- containerํฌ๊ธฐ๊ฐ itemํฌ๊ธฐ๋ณด๋ค ํด ๋ ์ฌ๋ฐฑ์ ์ฑ์ฐ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ด๋ค.
- ex) ๋น์จ์ ๋ฐ๋ผ ๋๋ ์ง๋ค.
.item{
flex-grow:1
}
.item:nth-child(1){
flex-grow:2
}
- flex-shrink
- ์นํ์ด์ง์ ํฌ๊ธฐ๋ฅผ ์ค์ผ๋(์ ์ฒดํ๋ฉดx)shrink๊ฐ์ ์๊ฒ ์ค์ ํ ์๋ก ์ค์ด๋ค์ง ์๋๋ค.
- ์ ์ฒด์ ์ผ๋ก ์ค์ด๋ค์ง ์๊ฒ ํ๊ธฐ ์ํด์๋ shrink๊ฐ 0์ผ๋ก ์ฃผ๊ธฐ
- holy grail layout

1์๋ฌ์ ๊ณต๋ถํ css ์์์ ์ฅํด๋๊ธธ๋ 6์์ธ ์ง๊ธ ์ถ๊ฐ