<img>
<img alt="" src="">
<background-image>
<div class="backgroundImg"></div>
.backgroundImg {
/*๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง url ์ง์ */
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
/*
div์ ๋๋น, ๋์ด๋ฅผ ์ง์ ํ์ง ์์ผ๋ฉด div์์์ ๋ด์ฉ์ ๋ฐ๋ผ ํฌ๊ธฐ๊ฐ ์ ํด์ง๋ค.
์ด ์ฝ๋์์๋ div์์์ ๋ด์ฉ์ด ์์ผ๋ฏ๋ก width, height๋ฅผ ์ง์ ํ์ง ์์ผ๋ฉด ํ๋ฉด์ ๋ํ๋์ง ์๋๋ค!
(width: 0px, height: 0px)
*/
width: 300px;
height: 300px;
/*
๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์ฌ์ด์ฆ๋ฅผ ๋ฐ๋ก ์ง์ ํ์ง ์์ผ๋ฉด div์ ํฌ๊ธฐ๋ณด๋ค ์๋ณธ ์ด๋ฏธ์ง๊ฐ ํจ์ฌ ํฌ๊ธฐ ๋๋ฌธ์ ์ด๋ฏธ์ง์ ์ผ๋ถ๋ถ๋ง ๋ณด์ด๊ฒ ๋๋ค.
background-size๋ฅผ 100%๋ก ํ๋ค๋๊ฑด div์ ์ฌ์ด์ฆ์ ๊ฝ ์ฐจ๊ฒ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ง์ ํ๋ค๋ ์๋ฏธ์ด๋ค.
*/
background-color: aquamarine;
background-size: 100%;
}
<header>
,<footer>
,<p>
,<div>
๋ฑ๋ฑ ๋๋ถ๋ถ ์์๊ฐ block ์์์ด๋ค.<span>
๋ฑ์ด inline ์์์ด๋ค.inline์ผ๋ก ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ์ float๋ ์๋ค!
- ์น ์์๋ฅผ ๋ฌธ์ ์์ ๋ ์๊ฒ ํ๋ค.
- float : left; โ ๋ฌธ์์ ์ผ์ชฝ์ผ๋ก ๋ฐฐ์น
- float : right; โ ๋ฌธ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฐฐ์น
- flex์ grid๊ฐ ๋์จ ์ดํ์๋ ์ ์ฌ์ฉํ์ง๋ ์๋๋ค.
- ์์ ์ฝ๋์์๋ ๋ณผ ์ ์๋ค.(์๋ ์น ํ์ด์ง ์ ์ง๋ณด์ ๋ฑ)
Semantic Web & Tag ์ ๋ฆฌ ํฌ์คํธ ๋ฐ๋ก๊ฐ๊ธฐโ
์ด์ ์ ๋นํด ๊ณต๋ถ๋์ด ๋๋ฌด ์ ๋ค. ๋ถ๋ฐํ์!