๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ ๋ฉ”๋‰ด ๋ฐ”๋กœ๊ฐ€๊ธฐ

ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

๊ธ€์˜ ๊ตฌ์กฐ๋ฅผ ๋งˆํฌ์—…ํ•  ๋•Œ ๊ณ ๋ฏผํ•ด์•ผ ํ•  ๊ฒŒ ๋งŽ๋‹ค. ์ด๋ฒˆ์— ๋‹ค๋ฃฐ ๊ฒƒ์€ ๋ถ€์ œ๋ฅผ HTML ํƒœ๊ทธ๋กœ ์–ด๋–ป๊ฒŒ ํ‘œํ˜„ํ•ด์•ผ ํ•  ๊ฒƒ์ธ๊ฐ€๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ ๋‚˜๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๋งˆ์Œ๋จน์—ˆ๋‹ค.

<header>
    <p class="subheading">[๋ฐ•๊ทผํ˜œ ํƒ„ํ•ต]</p>
    <h1>็พŽ ๋งค์ฒด๋“ค "ํ•œ๊ตญ ๋ฏผ์ฃผ์ฃผ์˜ ๋ฐœ์ „ ๋ณด์—ฌ์ค€ ํŒŒ๋ฉด ๊ฒฐ์ •"โ€ฆ์ด์ •๋ฏธ ์žฌํŒ๊ด€๋„ ์กฐ๋ช…</h1>
</header>

๋ช…์„ธ๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒŒ ์˜ฌ๋ฐ”๋ฅธ ์‚ฌ์šฉ๋ฒ•์„ ์•„๋Š” ์ง€๋ฆ„๊ธธ์ด๋‹ค. ํด๋ฆฌ์–ด๋ณด์Šค์—์„œ ์—ฌ๋Ÿฌ ๋ฒˆ ๋“ค์—ˆ๋˜ ๋ง์ธ๋ฐ ์ตœ๊ทผ ์ƒˆ์‚ผ ๋Š๊ผˆ๋‹ค.

์ž์„ธํ•œ ๋‚ด์šฉ์€ 4.12.1 Subheadings, subtitles, alternative titles and taglines ํ•ญ๋ชฉ์—์„œ ์ฐพ์•„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. HTML์—๋Š” ๋ถ€์ œ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ํƒœ๊ทธ๊ฐ€ ์—†์œผ๋ฉฐ, ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฐฉ๋ฒ•์„ ์ œ์•ˆํ•œ๋‹ค ํ•˜๊ณ  ์„ค๋ช…์ด ๋ผ ์žˆ๋‹ค. ๋ช…์„ธ๊ฐ€ ์ œ์•ˆํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์„ธ ๊ฐ€์ง€๋‹ค.

๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ตฌ๋ถ„ํ•˜๋Š” ๋ฐฉ๋ฒ•

<h1>็พŽ ๋งค์ฒด๋“ค "ํ•œ๊ตญ ๋ฏผ์ฃผ์ฃผ์˜ ๋ฐœ์ „ ๋ณด์—ฌ์ค€ ํŒŒ๋ฉด ๊ฒฐ์ •"โ€ฆ์ด์ •๋ฏธ ์žฌํŒ๊ด€๋„ ์กฐ๋ช…</h1>

์œ„์ฒ˜๋Ÿผ -๋กœ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋‹ค. :์œผ๋กœ ๊ตฌ๋ถ„ํ•ด๋„ ๋  ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ๋ฐฉ๋ฒ•์€ ์•ž์˜ ๊ฒƒ์ด ๋ถ€์ œ์ธ์ง€ ๋’ค์˜ ๊ฒƒ์ด ๋ถ€์ œ์ธ์ง€ ๊ตฌ๋ถ„ํ•˜๊ธฐ ํž˜๋“ค๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค. ์œ„ ๊ฒฝ์šฐ ์•ž์˜ ๊ฒƒ์ด ๋ถ€์ œ๋‹ค.

์ œ๋ชฉ(heading) ํƒœ๊ทธ ์•ˆ์— span ๋“ฑ์„ ๋„ฃ์–ด ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•

<h1>
    <span class="subheading">[๋ฐ•๊ทผํ˜œ ํƒ„ํ•ต]</span>
    ็พŽ ๋งค์ฒด๋“ค "ํ•œ๊ตญ ๋ฏผ์ฃผ์ฃผ์˜ ๋ฐœ์ „ ๋ณด์—ฌ์ค€ ํŒŒ๋ฉด ๊ฒฐ์ •"โ€ฆ์ด์ •๋ฏธ ์žฌํŒ๊ด€๋„ ์กฐ๋ช…
</h1>

2015๋…„ 6์›” 7์ผ <์‹ ๋ฌธ์‚ฌ์ดํŠธ>๊ฐ€ ์ทจํ•˜๊ณ  ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์ด๊ฑด ๋ช…์„ธ ๋ณด๊ณ  ํ•œ ๊ฑด ์•„๋‹ˆ๊ณ  ๊ทธ๋ƒฅ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•ด ๋ƒˆ๋˜ ๋ฐฉ๋ฒ•์ธ๋ฐ, ๋ช…์„ธ์—๋„ ์ด๋Ÿฐ ์˜ˆ์‹œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์˜ ๋‹จ์ ์€, CSS๋ฅผ ๊ฑท์–ด๋ƒˆ์„ ๋•Œ ๋ถ€์ œ์™€ ์ œ๋ชฉ์„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์—†๊ฒŒ ๋œ๋‹ค๋Š” ์ ์ด๋‹ค. ๊ทธ๋ž˜์„œ ์ค‘๊ฐ„์— ๋ณด์ด์ง€ ์•Š๋Š” - ๊ฐ™์€ ๊ฒƒ์„ ๋„ฃ์„๊นŒ ๊ณ ๋ฏผํ•˜๊ธฐ๋„ ํ–ˆ๋‹ค. ์•„๋ž˜์ฒ˜๋Ÿผ ๋ง์ด๋‹ค.

<h1>
    <span class="subheading">[๋ฐ•๊ทผํ˜œ ํƒ„ํ•ต]</span>
<span class="hidden">-</span> ็พŽ ๋งค์ฒด๋“ค "ํ•œ๊ตญ ๋ฏผ์ฃผ์ฃผ์˜ ๋ฐœ์ „ ๋ณด์—ฌ์ค€ ํŒŒ๋ฉด ๊ฒฐ์ •"โ€ฆ์ด์ •๋ฏธ ์žฌํŒ๊ด€๋„ ์กฐ๋ช… </h1>

์œ„ ์˜ˆ์ œ๋Š” W3 ๋ช…์„ธ์—๋Š” ์—†๋Š” ๊ฒƒ์ด๊ณ , ๋‚ด๊ฐ€ ์ƒ๊ฐํ•ด ๋ณธ ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์—ฌํŠผ, header ์•ˆ์— ๋„ฃ๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ์ด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜๋ฏ€๋กœ ์‚ฌ์šฉํ•ด ๋ณผ ์ด์œ ๋Š” ์—†์–ด์กŒ๋‹ค.

header ์•ˆ์— p๋กœ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•

<header>
    <p class="subheading">[๋ฐ•๊ทผํ˜œ ํƒ„ํ•ต]</p>
<h1>็พŽ ๋งค์ฒด๋“ค "ํ•œ๊ตญ ๋ฏผ์ฃผ์ฃผ์˜ ๋ฐœ์ „ ๋ณด์—ฌ์ค€ ํŒŒ๋ฉด ๊ฒฐ์ •"โ€ฆ์ด์ •๋ฏธ ์žฌํŒ๊ด€๋„ ์กฐ๋ช…</h1>
</header>

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด CSS๋ฅผ ๊ฑท์–ด๋ƒˆ์„ ๋•Œ๋„ ๋ถ€์ œ์™€ ์ œ๋ชฉ์ด ๊ตฌ๋ถ„๋œ๋‹ค. ์•„์šธ๋Ÿฌ hgroup ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๋ฐํžŒ ๋ช…์„ธ์—์„œ๋Š” header๋ฟ ์•„๋‹ˆ๋ผ div๋กœ๋„ ๋ถ€์ œ๋ฅผ ๋ฌถ์„ ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ ์—ˆ๋‹ค(์•„๋ž˜ hgroup ๋ถ€๋ถ„ ์ฐธ๊ณ ). ๋ฌผ๋ก  ๋‚œ ๊ทธ๋ƒฅ header๋ฅผ ์‚ฌ์šฉํ•  ์ƒ๊ฐ์ด๋‹ค.

hgroup ํƒœ๊ทธ๋Š” ๋ช…์„ธ์—์„œ ์—†์–ด์กŒ๋‹ค

hgroup ํƒœ๊ทธ๋Š” ๋ช…์„ธ์—์„œ ๋”์ด์ƒ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค(obsolete)๊ณ  ๋ถ„๋ฅ˜๋๋‹ค. ์•„๋ž˜๋Š” ๋ฒˆ์—ญ์ด๋‹ค. ๊ทธ ๋ฐ‘์— ์›๋ฌธ์„ ๋ถ™์˜€๋‹ค.

hgroup

๋ถ€์ œ๋ฅผ ๋งˆํฌ์—…ํ•˜๊ธฐ ์œ„ํ•ด ์ œ๋ชฉ์„ ๋‹ด๊ณ  ์žˆ๋Š” h1-h6 ์š”์†Œ ๋’ค์— ์˜ค๋Š” p ์š”์†Œ์— ๋ถ€์ œ๋ฅผ ๋„ฃ๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜๋ผ. ์•„๋‹ˆ๋ฉด, ๋ถ€์ œ๋ฅผ ์ œ๋ชฉ์„ ๋‹ด๊ณ  ์žˆ๋Š” h1-h6 ์š”์†Œ ์•ˆ์— ๋ฐ”๋กœ ์ง‘์–ด ๋„ฃ์–ด๋ผ. ๋‹จ, ๊ธฐํ˜ธ ๋“ฑ์œผ๋กœ ์ œ๋ชฉ๊ณผ ๊ตฌ๋ถ„ํ•ด๋ผ. ์˜ˆ์ปจ๋Œ€, span class="subheading" ์š”์†Œ ๊ฐ™์€ ๊ฒƒ์— ์Šคํƒ€์ผ์„ ๋‹ค๋ฅด๊ฒŒ ์ค˜์„œ ๋ง์ด๋‹ค.

์ œ๋ชฉ, ๋ถ€์ œ, ๋Œ€๋“ฑ ์ œ๋ชฉ(alternative titles)

์ด๋‚˜ ํƒœ๊ทธ๋ผ์ธ์€ header๋‚˜ div ์š”์†Œ๋กœ ๋ฌถ์„ ์ˆ˜ ์žˆ๋‹ค.

hgroup

To mark up subheadings, consider putting the subheading into a p element after the h1-h6 element containing the main heading, or putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class="subheading" element with differentiated styling.

Headings and subheadings, alternative titles, or taglines can be grouped using the header or div elements.


์ถœ์ฒ˜ : https://mytory.net/html-css-js/2015/06/07/subheading.html

๋Œ“๊ธ€
๊ณต์ง€์‚ฌํ•ญ
์ตœ๊ทผ์— ์˜ฌ๋ผ์˜จ ๊ธ€
์ตœ๊ทผ์— ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€
Total
Today
Yesterday
ยซ   2024/03   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
๊ธ€ ๋ณด๊ด€ํ•จ