๐html - img
<div class="item">
<h1>html-img</h1>
<img src="./all_image/summer.JPG" alt="๋์ฒด์ด๋ฏธ์ง">
</div>
-์ฃผ๋ก ์ฝํ ์ธ ์์๋ก ์ฌ์ฉ๋จ
๐css - background
<div class="item">
<h2>css-background</h2>
<div class="item-bg"></div>
</div>
- width, height๊ฐ์ ์ง์ ํด์ค์ผํจ * ํ์ง๋ง ์ง์ ํด์ค๋ image์ ๋ณธ์ฐ์ ํฌ๊ธฐ์ ๋ง์ถฐ ์์ฑ๋จ
- ๋ด๊ฐ ์ค์ ํ ๊ฐ์ผ๋ก image๊ฐ ๊ฝ์ฐจ๊ฒ ํด์ฃผ๊ณ ์ถ์ผ๋ฉด background-size:cover;
(*width:100%; image์์ ์ ํฌ๊ธฐ์์ 100%์ด๊ณ background-size:cover; ๋ถ๋ชจ์์์ width๊ฐ์ ๋ฑ ๋ง์ถฐ์ง )
background-repeat:repeat-x /repeat-y /repeat /no-repeat
background-position
์์์ ์ง์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์์น๋ฅผ ๋ณ๊ฒฝํ๊ณ ์ ํ ๋ ์ฌ์ฉํฉ๋๋ค.
center, center top, right center, center bottom, left center๋ฑ
.item-bg{ background-position:left top;}
background-color
background-image:url()
background-size
cover:๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๋์ฌ ์ ์ฉ๋๋ ์์ ์ ์ฒด์ ํ์
contain:๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ๊ฐ๋ก ์ธ๋ก ๋น์จ์ ๋ง์ถฐ ์์์ ํ์ํ ์ ์๋ ์ต๋ ํฌ๊ธฐ๋ก ํ์
background-attachment
์์์ ์ง์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์คํฌ๋กค๋์ด๋ ํญ์ ๊ฐ์ ์์น์ ๊ณ ์ ์ํค๊ณ ์ ํ ๋ ์ฌ์ฉํ๋ค.
scroll:์คํฌ๋กค ์ ์ฉ
fixed:์ง์ ํ ์คํฌ๋ฆฐ ์์น์ ๊ทธ๋๋ก ๋จ์
background
font ์์ฑ๊ณผ ๊ฐ์ด ๋ฐฐ๊ฒฝ๊ณผ ๊ด๋ จ๋ 5๊ฐ์ง ์์ฑ์ ๋จ์ถํด์ ํ๋ฒ์ ์ ์ธํ๊ณ ์ ํ ๋ ์ฌ์ฉํ๋ค.
color/ image/ repeat/ position/ attachment/ inherit
.item-bg{ background:red url(./all_image/summer.JPG) no-repeat center scroll;}
๐ html - img VS css - background
html - img ์์ฑ์ ๋ธ๋ผ์ฐ์ ์ ํฌ๊ธฐ์ ๋ฐ์ํ๋๋ฐ ๋ฐํด
css - background ๊ทธ๋ ์ง ์๋ค.
๊ทธ ์์ฑ์ ๋ฐ๊พธ๊ธฐ ์ํด background - position, size ๋ฑ์ ํ์ฉํ๋ ๊ฒ์ด๋ค.
'Frontend > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
css-box shadow(animation๋ ์ ์ฉ์์ผ๋ณด๊ธฐ) (0) | 2023.04.24 |
---|---|
css - ๋ ์ด์์ grid (0) | 2023.04.22 |
css - transform(์ธ ๋ณํ ํจ์๋ค), transtion (2) | 2023.04.15 |
css - flexbox (container , item) (0) | 2023.04.06 |
css - position,display (0) | 2023.04.05 |