HTML์ ์์๋ค์ ํ
์คํธ ์์, ๊ตฌ์กฐ๋ฅผ ๋ํ๋ด๋ ์์, ๋ชฉ๋ก๊ณผ ํ, ์๋ฒ ๋๋ ์์, ํผ๊ด๋ จ ์์, ๋ฉํ๋ฐ์ดํฐ ์์, ์ ์ญ ์์ฑ์ผ๋ก ๋๋์ด ์ดํด๋ณด๊ณ ์ํ๋ค. ๊ทธ์ค ๊ธฐ๋ณธ์ผ๋ก ์์์ผํ HTML์ ๋ํด ๊ฐ๋จํ ์์๋ณด๊ณ ์ ํ๋ค.
(๊ณต๋ถํ ๋ด์ฉ์ ๋ฐํ์ผ๋ก ์์ง ์๊ธฐ ์ํด ๊ณต๋ถ ํ ์์ฝ์ฒ๋ผ ์์ฑํ๊ณ ์ํจ!)
[ ์ฐธ ๊ณ ์ฌ ํญ ]
ํ์์ mdn์ด๋ผ๋ ์ฌ์ดํธ๋ฅผ ์ฐธ๊ณ ํ์ฌ ๊ฐ๋ ์ ์ตํ๊ณ ์ ๋ ธ๋ ฅํ๊ณ ์๋ค. ์ด์ฌ์ดํธ์ ๊ฒ์์ฐฝ์ ์๊ณ ์ ํ๋ ์์์ ๋ํด ๊ฒ์ํ๋ฉด ๊ทธ ์์์ ๋ํ ์ ๋ณด๋ฅผ ์์ธํ๊ณ ์ฝ๊ฒ ์ ์ ์๋ ์ฌ์ดํธ์ด๋ค.
: HTML ๊ตฌํ ์ ๋ชฉ ์์๋ฅผ ๋ํ๋ด๋ ๊ฒ์ผ๋ก h1, h2, h3, h4, h5, h6 ๋ก ๋ํ๋ผ ์ ์๋ค.
: h1์ด ๊ฐ์ฅ ๋์ผ๋ฉฐ h6์ด ๊ฐ์ฅ ๋ฎ๋ค๊ณ ์๊ฐํ๋ฉด ๋๋ค. h6๋ก ๊ฐ ์๋ก ๊ธ์จ์ฒด๊ฐ ์์์ง๋ค.
: mdn์ ์ฌ์ดํธ๋ฅผ ์ฐธ๊ณ ํ์ฌ ์ฝ๋์ ์์๋ฅผ ๋ณด์๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
: ์ ๋ชฉ ๋จ๊ณ์์ ๊ฑด๋ ๋ฐ๋ ๊ฒ์ ํผํด์ผ ํ๋ฉฐ ์ผ๊ด์ฑ ์๊ฒ ์์ฑํด์ผ ํ๋ค.
ํ์ง๋ง ๊ฑด๋๋ฐ๊ฒ ์์ฑํ๊ฒ ๋ ๊ฒฝ์ฐ ์น์ด ์๋ง์ด ๋์ง ์์ง๋ง, ์น ์ ๊ทผ์ฑ์ ์ฃผ์ํด์ผํ๊ธฐ ๋๋ฌธ์ ์ด๋ฅผ ์ค์ํด์ผ ํ๋ค.
: ๊ธ์จ ํฌ๊ธฐ๋ฅผ ์ํด ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ง ์์์ผ ํ๋ฉฐ ์คํ์ผ์ ๋ชจ๋ css๋ฅผ ํตํด ์์
ํ๋ ๊ฒ์ด ์ข๋ค.
: ํ ํ์ด์ง ๋น ํ๋์ h1๋ง ์ฌ์ฉํด์ผ ํจ์ ๊ธฐ์ตํ์!
๐ต h1 ~ h6 ์์ ํ์ง ๋ง์์ผ ํ ๊ฒ
h1 ์์ ๋จ๊ณ๋ฅผ ๋ฐ์ด ๋์ด ๋ฐ๋ก h3 ์ ๋ชฉ์ ์ฌ์ฉํ์ง ๋ง๊ฒ ์ด๋ ๊ฒ ๋จ๊ณ๋ฅผ ๋ฐ์ด ๋๊ฒ ๋๋ฉด ์ค๊ฐ์ ๋น ์ง ์ ๋ชฉ์ด ์ด๋ ์๋ ๊ฒ์ธ์ง ๋ชจ๋ฅด๊ฒ ๋์ด ํผ๋์ ๊ฐ์ ธ์ฌ ์ ์๋ค. ์ฐจ๋ก์ฐจ๋ก h1, h2, h3, h4, h5, h6 ์์๋๋ก ์์ฑํ ๊ฒ!
: ํ๋์ ๋ฌธ๋จ์ ๋ํ๋ด๋ ์์๋ก, ๋ฌธ๋จ์ ๋ค์ด๊ฐ ๋ด์ฉ์ ์๋ก ๊ด๋ จ ์๋ ์ฝํ
์ธ ๋ฌด์์ด๋ ๋ ์ ์๋ค. ์ด ๋ํ ์ฌ๋ฐฑ์ ๊ธฐ์ค์ css๋ฅผ ํตํด ์ฌ๋ฐฑ์ค์ ์ ํ๋ ๊ฒ์ด ์ข๋ค. ๋ํ ๋นํ๊ทธ๋ฅผ ์ํด ์ฌ์ฉํ์ง ๋ง๊ฒ!
: ์๊ฐ์ ์ธ ๋งค์ฒด์์ ๋ฌธ๋จ์ ๋ณดํต ์ธ์ ๋ธ๋ก๊ณผ์ ์ฌ๋ฐฑ๊ณผ ์ฒซ์ค์ ๋ค์ฌ์ฐ๊ธฐ๋ก ๊ตฌ๋ถํ์ง๋ง HTML์์ ๋ฌธ๋จ์ ์ด๋ฏธ์ง๋ ์
๋ ฅ ํผ ๋ฑ ์๋ก ๊ด๋ จ์๋ ์ฝํ
์ธ ๋ฌด์์ด๋ ๋ ์ ์์์ ์ ์ ์๋ค.
: ์์ ์ ๋ซ๋ ํ๊ทธ ์ด์ ์ ๋ค๋ฅธ ๋ธ๋ก ๋ ๋ฒจ ํ๊ทธ๊ฐ ๋ถ์๋๋ฉด ์๋์ผ๋ก ๋ซํ๋ค.
: ์ค์ ๋ฐ๊ฟ์ฃผ๋ ์์์ด๋ค. (์บ๋ฆฌ์ง ๋ฆฌํด) ์์ฑ
: enter ๋์ ํด์ฃผ๋ ์ญํ ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ์ดํดํ๊ธฐ ์ฝ๋ค.(์ฃผ์๋ ์์กฐ ๋ฑ ์ค์ ๊ตฌ๋ถ์ด ์ค์ํ ๋ด์ฉ์ ์์ฑํ ๋ ์ ์ฉํ๋ค.)
: br ํ๊ทธ๋ฅผ ๋ง์ด ์ฌ์ฉํ ์๋ก enter์ฒ๋ฆฌ๊ฐ ๊ทธ๋งํผ ๋จ์ ์ ์ ์๋ค.
: ๋ ๋ง์ ์ฌ๋ฐฑ์ ์์ฑํ๊ณ ์ ํ๋ค๋ฉด css์ ํตํด ๋ง๋๋ ๊ฒ์ด ์ข๋ค.
: ์ค๊ฐ์ pํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉฐ ํ ํ
ํฌ ๋์ด์ฃผ๋ ๊ฒ๋ ์์ง๋ง๊ธฐ!
br๋ก ๋์ด์ฃผ๋ ๊ฒ๋ ํด๋ณด์๋ค. css์คํ์ผ๋ง์ ๋ชจ๋ ์ง์ฐ๊ณ ๋จ์ํ๊ฒ ๋ณด์ด๋ ๊ธ๋ก๋ง ๋ณด์ด์ง๋ง css๋ก ๊พธ๋ฉฐ์ค๋ค๋ฉด ๊ธ์ด ๋ ๋ช
ํํ๊ฒ ๋ณด์ผ ์ ์์ ๊ฒ์ด๋ผ ์๊ฐ๋๋ค.
* BLOCKQUOTE, Q ๋ ์๋ก ๋น์ทํ ๋งฅ๋ฝ์์ ์ฌ์ฉ์ด ๋์ง๋ง ์ฐจ์ด์ ์ด ์๋ค๋ ๊ฒ ๊ธฐ์ตํ์!
blockquote
q
: ๋ฏธ๋ฆฌ ์์์ ์ง์ ํ ํ
์คํธ๋ฅผ ๋ํ๋ด๋ฉฐ ์์ฑํ ๋ด์ฉ์ ๊ทธ๋๋ก ํํํ๋ค.
: ํ
์คํธ๋ ๊ณ ์ ํญ ๊ธ๊ผด์ ์ฌ์ฉํ์ฌ ๋ ๋๋งํ๊ณ ์์ ๋ด ๊ณต๋ฐฑ ๋ฌธ์ ๊ทธ๋๋ก ์ ์งํ๋ค.
: figure, figcaption์ ๊ฐ์ด ์ฌ์ฉ๋์ด์ง๋ค.
: figure ๋
๋ฆฝ์ ์ธ ์ฝํ
์ธ ๋ฅผ ํํํ๋ค. figure ํ๊ทธ ์ฌ์ฉ ์์ด pํ๊ทธ๋ก๋ ํํํ ์ ์์ง๋ง ๋จ๋
์ฑ์ด ์ฌ๋ผ์ง๋ค๋ ์ ๊ธฐ์ตํ์.
: mdn figure์ ๋ช
์๋ ๊ฐ๋
๋ค์ ๋ ์ดํด๋ณด์๋ฉด figcaption ์์๋ฅผ ์ฌ์ฉํด ์ค๋ช
์ ๋ถ์ผ ์ ์๋ค. ์์ ๋ก๋ ์ด๋ฏธ์ง, ์ฝ๋ ์กฐ๊ฐ, ์ธ์ฉ๋ฌธ, ์๋ฅผ ํตํด ์ ์ ์๋ค.
: ์ํ์ ์ ํํํ ์ ์๋ค. br ํ๊ทธ์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋น ์์์ด๋ค.
: ๋ฌธ๋จ์ ๋ถ๋ฆฌ(์ฃผ์ ์ ์ํ)๋ฅผ ์ํด ์ค์ ํ๋ค.
: ์ด์ผ๊ธฐ ์ฅ๋ฉด ์ ํ, ๊ตฌํ ๋ด ์ฃผ์ ๋ณ๊ฒฝ ๋ฑ ๋ฌธ๋จ ๋ ๋ฒจ ์์์์ ์ฃผ์ ์ ๋ถ๋ฆฌ๋ฅผ ๋ํ๋ธ๋ค.
(1) abbr : ์ฝ์ด : ์ ํ ์์ฑ์ธ title์ ์ฌ์ฉํ๋ฉด ์ค๋ง์ ์ ์ฒด ๋ป์ด๋ ์ค๋ช ์ ์ ๊ณตํ ์ ์๋ค. title ์์ฑ์ ์ ์ฒด ์ค๋ช ๋ง์ ๊ฐ์ ธ์ผ ํ๋ฉฐ ๋ค๋ฅธ๊ฑด ํฌํจ์ด ๋ถ๊ฐ๋ฅํ๋ค.
(2) address : ์ฃผ์
: ์ฌ๋, ๋จ์ฒด, ์กฐ์ง ๋ฑ์ ๋ํ ์ฐ๋ฝ์ฒ ์ ๋ณด๋ฅผ ๋ํ๋ธ๋ค.
(3) cite : ์ธ์ฉ์ ์ถ์ฒ / ์ ๋ชฉ์ ๋ฐ๋์ ํฌํจํด์ผ ํ๋ค.
(์ฑ
, ๋
ผ๋ฌธ, ์์ธ์ด, ์, ์
๋ณด, ์์
, ๋๋ณธ, ์ํ, TV์ผ, ๊ฒ์, ์กฐ๊ฐ, ๊ทธ๋ฆผ, ์ฐ๊ทน, ๊ณต์ฐ, ์คํ๋ผ, ๋ฎค์ง์ปฌ, ์ ์ํ, ํ๋ก, ์ปดํจํฐ ํ๋ก๊ทธ๋จ, ์น์ฌ์ดํธ, ์นํ์ด์ง, ๋ธ๋ก๊ทธ ๊ธ๊ณผ ๋๊ธ, ๊ฒ์ํ ๊ธ๊ณผ ๋๊ธ, ํธ์, ํ์ด์ค๋ถ ๊ธ, ์ค๋ช
์, ๊ธฐํ ๋ฑ๋ฑ์ผ๋ก ์์๋ค์ ๋ณผ ์ ์๋ค.)
(4) bdo : ๊ธ์ ์์ ์์ฑ (์ด ๊ธ์ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ์์ฑํจ)
-ltr : ํ
์คํธ๋ฅผ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ์์ฑํด์ผ ํจ์ ๋ํ๋ธ๋ค.
-rtl : ํ
์คํธ๋ฅผ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์์ฑํด์ผ ํจ์ ๋ํ๋ธ๋ค.