์ด ํ์ด์ง๋ ์ต์ข ๊ตฌํ ํ์ด์ง์ด๋ค!
์ง๊ธ๊น์ง ๋ฐฐ์ด ๋ด์ฉ์ ํ ๋๋ก html ์ ์์ฑํ๋ ์ค์ต์ ํด๋ณด์๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํผ์๋ฅผ ๋ง๋ค์</title>
</head>
<body>
</body>
๋งค์ฐ ํ๋ฒํ๊ฒ ์์~
body
์์ ์ ๋ชฉ์ ์ ์ด์ฃผ๊ณ
<h1>Let's Make Pizza</h1>
article
๋ก ๋
๋ฆฝ์ ์ธ ์์ญ์ ๋ง๋ค์ด์คฌ๋ค.
<article>
<h2>๋ฐ๋ฒ ํ ํ ๋ฅดํฐ์ผ ํผ์ </h2>
<!-- ์ด๋ฏธ์ง๊ฐ ๋ค์ด๊ฐ ๋ถ๋ถ -->
<h3>์ฌ๋ฃ</h3>
<p style="word-break: keep-all;">
ํ ๋ฅดํฐ์ผ 2์ฅ, ๋ผ์ง๊ณ ๊ธฐ ์์ฌ 80g, ์์ก์ด๋ฒ์ฏ 3๊ฐ,
๋นจ๊ฐ ํํ๋ฆฌ์นดยท๋
ธ๋ ํํ๋ฆฌ์นด ยผ๊ฐ์ฉ, ๋ธ๋ก์ฝ๋ฆฌ โ
์ก์ด, ๋ฐ๋นํ์์ค 2ํฐ์ ,
๋ชจ์ฐจ๋ ๋ผ์น์ฆ 2ยฝ์ปต, ํ ๋งํ ์์ค 2ยฝํฐ์ , ๊ฐ์ฅยท๋ค์ง ๋ง๋ 1์์์ ์ฉ,
ํฌ๋์จ์ ยท์๊ธยทํ์ถง๊ฐ๋ฃจยท์ฒญ์ฃผ ์ฝ๊ฐ์ฉ
</p>
<h3>ํผ์ ๋ง๋๋ ๋ฐฉ๋ฒ</h3>
<ol style="word-break: keep-all;">
<li>
๋ผ์ง๊ณ ๊ธฐ๋ ํ์
ํฌ๊ธฐ๋ก ์ฐ์ด ์๊ธ, ํ์ถง๊ฐ๋ฃจ, ์ฒญ์ฃผ๋ก ๋ฐ๊ฐํ๋ค.
</li>
<li>
์์ก์ด๋ฒ์ฏ์ ์ฌ๋ผ์ด์คํ๊ณ , ํํ๋ฆฌ์นด๋ ๋ค๋ชจ๋๊ฒ ์ฐ๊ณ ,<br>
๋ธ๋ก์ฝ๋ฆฌ๋ ์๊ฒ ์ฐ์ด ๋๋ ๋ฌผ์ ๋ฐ์น ๋ค ์ฐฌ๋ฌผ์ ํน๊ตฌ์ด ๋ฌผ๊ธฐ๋ฅผ ๋บ๋ค.
</li>
<li>
๋ฌ๊ตฐ ํฌ์ ํฌ๋์จ์ ๋ฅผ ๋๋ฅด๊ณ ๋ค์ง ๋ง๋์ ๋ณถ์ ํฅ์ ๋ธ ๋ค์<br>
๋ผ์ง๊ณ ๊ธฐ๋ฅผ ๋ณถ์ ๋
ธ๋ฆํ๊ฒ ์ต์ผ๋ฉด ๋ฐ๋นํ์์ค๋ฅผ ๋ฃ๋๋ค.
</li>
<li>
ํ ๋ฅดํฐ์ผ ํ ์ฅ์ ๋ชจ์ฐจ๋ ๋ผ์น์ฆ๋ฅผ ๋ฌ๋ฟ ์ฌ๋ฆฌ๊ณ ๋ค๋ฅธ ํ ๋ฅดํฐ์ผ๋ก ๋ฎ๋๋ค.
</li>
<li>ํ ๋งํ ์์ค๋ฅผ ํด ๋ฐ๋ฅด๊ณ ๋ผ์ง๊ณ ๊ธฐ, ์ฑ์, ๋ชจ์ฐจ๋ ๋ผ์น์ฆ๋ฅผ ์น์ด<br>
220โ๋ก ์์ดํ ์ค๋ธ์์ ์น์ฆ๊ฐ ๋
น์ ๋๊น์ง 5~6๋ถ๊ฐ ๊ตฝ๋๋ค.
</li>
</ol>
</article>
h2
, h3
๋ก ์ ๋ชฉ์ ์ค์ word-break: keep-all
์ ์ฌ์ฉol
(ordered list) ์ li
๋ฅผ ์ด์ฉํด ์์ฑ์ฌ๊ธฐ๊น์ง๋ ์ฝ๊ฒ ํ์ง๋ง ์์ ๋ ํท๊ฐ๋ ธ๋ img ์์ฑ๊ฐ์ผ๋ก ๋ฐ์ํ ์ด๋ฏธ์ง๋ก ๋ง๋๋ ๋ถ๋ถ์ด ํท๊ฐ๋ ธ๋ค...
๊ธฐ์กด์๋ html ์์ ๊ทธ๋ฅ ์ด๋ฐ์์ผ๋ก ์ ๊ณ css ๋ฏธ๋์ด์ฟผ๋ฆฌ๋ก ๋ฐ์ํ ์ด๋ฏธ์ง๋ก ์ค์ ํ๊ณค ํ๋๋ฐ
<img src="/img/pizza-300.png" alt="pizzza">
html์์๋ ๋ฐ์ํ์ผ๋ก ์ด๋ฏธ์ง ์ฌ์ด์ฆ๋ฅผ ์กฐ์ ํ ์ ์๋ ์์ฑ srcset
์ ๋ฐฐ์ ๋ค.
(srcset์ ์๋ ์ด๋ฏธ์ง๋ค์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฑ๋ฅ์ ๊ฐ์ฅ ํจ์จ์ ์ธ ์ด๋ฏธ์ง๋ฅผ ํํด์ ํด๋น ์ด๋ฏธ์ง๋ฅผ ์ฌ์ด์ฆ ์กฐ๊ฑด์ ์ ์ฉ์์ผ์ ๋ณด์ฌ์ค๋ค)
๊ทธ๋์ ์ด ์์ฑ์ ์ฌ์ฉํด์ ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ๋ง๋ค์ด ๋ณด๋ ค๊ณ ํ์ผ๋
์ธํฐ๋ท์์ ๋ค์ด๋ฐ์ ํ๋์ ์ด๋ฏธ์ง๋ก ๋ฐ์ํ์ ์ด๋ป๊ฒ ๋ง๋๋์ง ํท๊ฐ๋ ธ์ ,,
<img
width="450px"
sizes="(min-width: 960px) 250px,
(min-width: 620px) 150px,
300px"
src="/img/pizza.jpg"
alt="ํผ์">
์ฒ์์ ์ด๋ ๊ฒ ์ฝ๋๋ฅผ ์งฐ๋๋ ์ ํ ์๋ฌด๋ฐ ์ผ๋ ์ผ์ด๋์ง ์์๋ค.
์ .. ๋น์ฐํจ,,
srcset
์ ์์ผ์ผ๋๊น์ ,,,
+ img์ width๊ฐ์ ์ค์ ํด๋ฒ๋ ค์ ์ ์ฌ์ด์ฆ๋ก๋ง ์ ์ง๋จ์
๊ทธ๋์ ๋ค์ ๊ณ ์ณ์ด ์ฝ๋
<img
srcset="/img/pizza-300.png 700w,
/img/pizza-300.png 600w,
/img/pizza-300.png 300w"
sizes="(min-width: 960px) 450px,
(min-width: 400px) 250px,
150px"
src="/img/pizza-300.png"
alt="๋ฌ๋ฆฌ๋ ํผ์ ์บ๋ฆญํฐ">
<img
srcset="/img/pizza-450.jpg 700w,
/img/pizza-450.jpg 600w,
/img/pizza-450.jpg 300w"
sizes="(min-width: 960px) 450px,
(min-width: 400px) 250px,
150px"
src="/img/pizza-450.jpg"
alt="๋ฐ๋ฒ ํ ํ ๋ฅดํฐ์ผ ํผ์">
์ด๋ฒ์ srcset
์ผ๋ก ํฝ์
์ค์ ์ ํด์ฃผ๊ณ
min-width: 960px ์ด์์์๋ ์ด๋ฏธ์ง width๊ฐ 450px,
min-width: 400px ์ด์์์๋ ์ด๋ฏธ์ง width๊ฐ 250px,
๊ทธ ์ดํ์์ 150px ์ด ๋๋๋ก sizes
๋ฅผ ์
๋ ฅํด์ฃผ๋ ์ ๋์ํ๋ค ใ
ใ
ํ๋์ ์ด๋ฏธ์ง ์ฌ์ด์ฆ ๋ง๊ณ ๋ทฐํฌํธ ์ฌ์ด์ฆ๊ฐ ๋ฌ๋ผ์ง ๋ ์ด๋ฏธ์ง๊ฐ ์์ ๋ณ๊ฒฝ๋๋๋ก๋ ํด๋ดค๋ค
์ด๊ฑด <picture>
์ ์ด์ฉํด์ ์์ฑํด๋ณด์๋ค.
<picture>
<source srcset="/img/pizza-640.jpg" media="(min-width:960px)">
<source srcset="/img/pizza-450.jpg" media="(min-width:640px)">
<img width="80px" src="/img/pizza-300.png" alt="๋ฌ๋ฆฌ๋ ํผ์" sizes="(min-width:400px) 200px">
</picture>
<picture>
์ <source>
์ <img>
๋ฅผ ํตํด ๊ฐ๊ธฐ ๋ค๋ฅธ ์กฐ๊ฑด์ ๋ง๋ ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ฃผ๋ ์์์ด๊ธฐ ๋๋ฌธ์ ์ฌ์ฉํด๋ณด์๋ค.
<picture>
์์๋ media ์์ฑ์ ๊ฐ์ ํตํด ์กฐ๊ฑด์ ์๋ง๋ ์ด๋ฏธ์ง๋ฅผ ์ฐพ๋๋ค. ์กฐ๊ฑด์ ๋ง๋ <source>
์์ ์์ srcset ์์ฑ ๊ฐ์ ์ฐพ์ <img>
ํ๊ทธ์ src ์ ๋ฃ์ด ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ธฐ ๋๋ฌธ์ <img>
์์๊ฐ ์๋ค๋ฉด ์ด๋ฏธ์ง๊ฐ ํ๋ฉด์ ๋ํ๋์ง ์๋๋ค!
<picture>
์ <source>
์์ ์์ฒด๋ ์ด๋ฏธ์ง๋ฅผ ํํํ์ง ์๋๋ค๋๊ฑธ ๊ธฐ์ตํ์!!!!!
๋ง์ง๋ง์ผ๋ก ์ค์ํ๋ ์ถ์ฒ ํ๊ทธ!
์ธ์ฉ์ ๋ํ๋ด๋ <cite>
๋ฅผ ์ด์ฉํด์ ์์ฑํด์ฃผ์๋ค.
<cite>์ถ์ฒ: <a href="https://www.smlounge.co.kr/best/article/25487">https://www.smlounge.co.kr/best/article/25487</a></cite>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํผ์๋ฅผ ๋ง๋ค์</title>
</head>
<body>
<h1>Let's Make Pizza</h1>
<article>
<h2>๋ฐ๋ฒ ํ ํ ๋ฅดํฐ์ผ ํผ์ </h2>
<img
srcset="/img/pizza-300.png 700w,
/img/pizza-300.png 600w,
/img/pizza-300.png 300w"
sizes="(min-width: 960px) 450px,
(min-width: 400px) 250px,
150px"
src="/img/pizza-300.png"
alt="๋ฌ๋ฆฌ๋ ํผ์ ์บ๋ฆญํฐ">
<img
srcset="/img/pizza-450.jpg 700w,
/img/pizza-450.jpg 600w,
/img/pizza-450.jpg 300w"
sizes="(min-width: 960px) 450px,
(min-width: 400px) 250px,
150px"
src="/img/pizza-450.jpg"
alt="๋ฐ๋ฒ ํ ํ ๋ฅดํฐ์ผ ํผ์">
<picture>
<source srcset="/img/pizza-640.jpg" media="(min-width:960px)">
<source srcset="/img/pizza-450.jpg" media="(min-width:640px)">
<img width="80px" src="/img/pizza-300.png" alt="๋ฌ๋ฆฌ๋ ํผ์" sizes="(min-width:400px) 200px">
</picture>
<h3>์ฌ๋ฃ</h3>
<p style="word-break: keep-all;">
ํ ๋ฅดํฐ์ผ 2์ฅ, ๋ผ์ง๊ณ ๊ธฐ ์์ฌ 80g, ์์ก์ด๋ฒ์ฏ 3๊ฐ,
๋นจ๊ฐ ํํ๋ฆฌ์นดยท๋
ธ๋ ํํ๋ฆฌ์นด ยผ๊ฐ์ฉ, ๋ธ๋ก์ฝ๋ฆฌ โ
์ก์ด, ๋ฐ๋นํ์์ค 2ํฐ์ ,
๋ชจ์ฐจ๋ ๋ผ์น์ฆ 2ยฝ์ปต, ํ ๋งํ ์์ค 2ยฝํฐ์ , ๊ฐ์ฅยท๋ค์ง ๋ง๋ 1์์์ ์ฉ,
ํฌ๋์จ์ ยท์๊ธยทํ์ถง๊ฐ๋ฃจยท์ฒญ์ฃผ ์ฝ๊ฐ์ฉ
</p>
<h3>ํผ์ ๋ง๋๋ ๋ฐฉ๋ฒ</h3>
<ol style="word-break: keep-all;">
<li>
๋ผ์ง๊ณ ๊ธฐ๋ ํ์
ํฌ๊ธฐ๋ก ์ฐ์ด ์๊ธ, ํ์ถง๊ฐ๋ฃจ, ์ฒญ์ฃผ๋ก ๋ฐ๊ฐํ๋ค.
</li>
<li>
์์ก์ด๋ฒ์ฏ์ ์ฌ๋ผ์ด์คํ๊ณ , ํํ๋ฆฌ์นด๋ ๋ค๋ชจ๋๊ฒ ์ฐ๊ณ ,<br>
๋ธ๋ก์ฝ๋ฆฌ๋ ์๊ฒ ์ฐ์ด ๋๋ ๋ฌผ์ ๋ฐ์น ๋ค ์ฐฌ๋ฌผ์ ํน๊ตฌ์ด ๋ฌผ๊ธฐ๋ฅผ ๋บ๋ค.
</li>
<li>
๋ฌ๊ตฐ ํฌ์ ํฌ๋์จ์ ๋ฅผ ๋๋ฅด๊ณ ๋ค์ง ๋ง๋์ ๋ณถ์ ํฅ์ ๋ธ ๋ค์<br>
๋ผ์ง๊ณ ๊ธฐ๋ฅผ ๋ณถ์ ๋
ธ๋ฆํ๊ฒ ์ต์ผ๋ฉด ๋ฐ๋นํ์์ค๋ฅผ ๋ฃ๋๋ค.
</li>
<li>
ํ ๋ฅดํฐ์ผ ํ ์ฅ์ ๋ชจ์ฐจ๋ ๋ผ์น์ฆ๋ฅผ ๋ฌ๋ฟ ์ฌ๋ฆฌ๊ณ ๋ค๋ฅธ ํ ๋ฅดํฐ์ผ๋ก ๋ฎ๋๋ค.
</li>
<li>ํ ๋งํ ์์ค๋ฅผ ํด ๋ฐ๋ฅด๊ณ ๋ผ์ง๊ณ ๊ธฐ, ์ฑ์, ๋ชจ์ฐจ๋ ๋ผ์น์ฆ๋ฅผ ์น์ด<br>
220โ๋ก ์์ดํ ์ค๋ธ์์ ์น์ฆ๊ฐ ๋
น์ ๋๊น์ง 5~6๋ถ๊ฐ ๊ตฝ๋๋ค.
</li>
</ol>
<cite>์ถ์ฒ: <a href="https://www.smlounge.co.kr/best/article/25487">https://www.smlounge.co.kr/best/article/25487</a></cite>
</article>
</body>
</html>
<section>
์์ <section>
๊ฐ๋<article>
์์ <section>
๊ฐ๋
์ง์ ์ด๋ ๊ฒ ๊ตฌ์ญ ์ก์์ ์ด๋ค ํ๊ทธ ์ฌ์ฉํด์ผํ ์ง ๊ตฌ๋ถํ๊ธฐ!
์ง์ html ํด๋ ์ข๋ค