greenth322.log
๋ก๊ทธ์ธ
greenth322.log
๋ก๊ทธ์ธ
CSS- declarations, text
Taehee Kim
ยท
2022๋ 4์ 7์ผ
ํ๋ก์ฐ
0
0
CSS
๋ชฉ๋ก ๋ณด๊ธฐ
5/15
๐ vmin/ vmax(๋ชจ๋ฐ์ผ ์ฃผ๋ก ์ฌ์ฉ)
vmin: ๊ฐ๋ก์ธ๋ก์ค ์์ ๊ณณ ๊ธฐ์ค์ 1/100
vmax: ๊ฐ๋ก์ธ๋ก์ค ๊ธด ๊ณณ ๊ธฐ์ค์ 1/100
์ถ์ฒ: https://webclub.tistory.com/356
๐ vw/ vh (๋ทฐํฌํธ์ ๋๋น/ ๋์ด๊ฐ ๊ธฐ์ค)
1vh: ๋์ด์ 1/100 => ๋์ด 900px์ 100vh => 900px(๋์ด ๊ฝ ์ฐธ)
1vW: ๋๋น์ 1/100 => ๋๋น 500px์ 100vW => 500px(๋๋น ๊ฝ ์ฐธ)
๐background
1)
<img>
ํ๊ทธ ์ฌ์ฉ ์ด์
- ๋ฐฑ์๋์ ํ์ ์ ์ํด img ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง ์ฃผ์ ์์ฑ
- img ํ๊ทธ์ ๊ธฐ๋ณธ(basic) ์ด๋ฏธ์ง ๋ฃ์ด๋๋ฉด, ๋ฐฑ์๋ ๊ฐ๋ฐ์๊ฐ ์ ๋ฐ์ดํ๋ฅด ํ๋ฉด์
ํ์ํ ์ฌ์ง์ ๋ฃ์
2) background-image: url() ์ฌ์ฉ ์ด์
- ๋ณ๋ ์๋ ์ด๋ฏธ์ง์ผ ๊ฒฝ์ฐ(์ ๋ ํ์X)
3)
background-size: cover
- ์๋์ผ๋ก ๋น์จ์ ๋ง์ถฐ ํ๋ฉด์ ๋ณด์ฌ์ง
4) background-position
โ bacground-position:center๋ center center์ ์ถ์ฝ
์ถ์ฒ: https://aboooks.tistory.com/162
๐ line-height
๊ธ์์ ๋์ด๋ฅผ ์ง์
1) ๋จ์
โ ๊ผญ ์์๋ฅผ ์ฌ์ฉํ์
- px, em ๋ฑ ํฌ๊ธฐ๊ฐ ์ ํด์ง ๋จ์๋ ์ฌ์ฉ ์์ ์ง์
- ํ ์คํธ ์ฌ์ด์ฆ ๋ณ๊ฒฝ(๋ ์ปค์ง ๋)์ด ๋๋ฉด ์ข์ ๊ฐ๊ฒฉ๋๋ฌธ์ ๊ธ์จ๊ฐ ๊ฒน์น๋ ์ผ์ด ๋ฐ์
(๐ฅ์์ฌ๋ฅผ ๋ฉด์น ๋ชปํ๋ค.)
โ line-height: normal
- ํฐํธ๊ฐ ๊ฐ๊ณ ์๋ ๊ธฐ๋ณธ ์ค์
โ line-height: number (ํฐํธ ํฌ๊ธฐ * number)
-
line-height:1
- font size*1์ ์ค๊ฐ๊ฒฉ์ ๊ฐ๊ฒ๋จ
- leading ๋ถ๋ถ์ ์์ ํ ์์ ์ค๋ค
- ํฐํธ๋ง๋ค ๋์์ธ์ด ๋ฌ๋ผ์, line-height:1์ ์ง์ ํด๋ leading์ ๋์น ์ ์๋ค.
๐ผ ์ฐธ๊ณ )
https://m.blog.naver.com/weekamp/222040583269##
2) leading์ด๋?
- ํฐํธ ์์ฒด๊ฐ ๊ฐ๊ณ ์๋ ์ํ ๊ฐ๊ฒฉ์ผ๋ก, ๊ฐ๋ ์ฑ์ ์ํด ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์กด์ฌ
- margin๊ณผ padding๊ณผ ์์ ํ๊ฒ ๋ค๋ฅธ ๊ฐ๋
๐ letter-spacing
- ๊ธ์ ๊ฐ๊ฒฉ ์กฐ์
- px, em, normal(๊ธฐ๋ณธ๊ฐ)
๐ vertical-align
-
<img>
ํ๊ทธ์ฒ๋ผ inline ์์์ ์์น๋ฅผ ๋ถ๋ชจ ์์ ๋ด์์ ์กฐ์ ํด์ค ๋ ์ฌ์ฉ
- img ํ๊ทธ์ ๋ฐ๊นฅ์ชฝ ๊ณต๋ฐฑ์ ์์ ๊ธฐ ์ํ์ฌ ์์ฃผ ์ฌ์ฉ
- vertical-align: top ๋๋ bottom;
Taehee Kim
ํ๋ก์ฐ
์ด์ ํฌ์คํธ
'overflow: hidden' vs 'display: none' vs 'visibility:hidden'
๋ค์ ํฌ์คํธ
CSS - text
0๊ฐ์ ๋๊ธ
๋๊ธ ์์ฑ