๐Ÿงฉ ๊ธฐ๋ก์ž ๊ผฌ๋น„์˜ ํ†ต์ œ ๋ฃจํ‹ด

IT/HTML&CSS

[html] ๋‚˜๋ฌด์œ„ํ‚ค_์˜ˆ์ œ(HTML ๋งŒ๋“ค๊ธฐ)_๊ธฐ์ดˆ(2021-09-07)

๊ธฐ๋ก์ž ๊ผฌ๋น„ 2021. 11. 9. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>์œ ์žฌ์„_๋‚˜๋ฌด์œ„ํ‚ค</title>
    <style>
      ol{list-style:none}/*ol์˜ ๋ถˆ๋ฆฟ์„ ๋ชจ๋‘ ์—†์•ฐ*/
      a{text-decoration:none}/*๋งํฌ์˜ ๋ฐ‘์ค„(underline)์„ ๋ชจ๋‘ ์—†์•ฐ*/
      a:hover{text-decoration:underline}/*hover(๋งˆ์šฐ์Šค์— ์˜ฌ๋ ธ์„ ๋•Œ ๋ผ๋Š” ๋œป)๋กœ aํƒœ๊ทธ์— ๋งˆ์šฐ์Šค ์˜ฌ๋ฆฌ๋ฉด ๋ฐ‘์ค„์ด ๋ณด์ด๋Š” ์Šคํƒ€์ผ ์ ์šฉ*/
      caption,th{background:gray;color:white}/*์„ ํƒ์ž๋ฅผ ,(์‰ผํ‘œ)๋กœ ๊ทธ๋ฃนํ•‘ํ•  ์ˆ˜ ์žˆ๋‹ค*/
    </style>
  </head><!--๋ธŒ๋ผ์šฐ์ €๋Š” ์œ„์—์„œ ์•„๋ž˜๋กœ, ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ ์ˆœ์„œ๋กœ ์ฝ๋Š”๋‹ค-->
  <body>
    <!-- ๋ชฉ์ฐจ : ctrl+/ ๋ˆ„๋ฅด๋ฉด ์ฃผ์„ ์“ธ ์ˆ˜ ์žˆ๊ฒŒ ๋‚˜์˜ต๋‹ˆ๋‹ค. -->
    <!-- ctrl+alt+๋ฐฉํ–ฅํ‚ค : ํ•จ๊ป˜ ์„ ํƒ, Home๊ณผ end ํ‚ค๋กœ ํ–‰์˜ ์•ž ๋’ค ์กฐ์ •์ด ์‰ฝ๊ฒŒ ๊ฐ€๋Šฅ -->
    <h2>๋ชฉ์ฐจ</h2>
    <ol>
      <!-- ์ฑ…๊ฐˆํ”ผ ๊ธฐ๋Šฅ = ํ•œ ํŽ˜์ด์ง€ ์•ˆ์—์„œ ์•ต์ปค๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ id์™€ a ํƒœ๊ทธ๋ฅผ ํ™œ์šฉํ•ด์„œ ์”€ -->
      <li><a href="#sub1">1.</a>๊ฐœ์š”</li>
      <li><a href="#">2.</a>์ธ๊ธฐ์™€ ์œ„์ƒ</li>
      <li><a href="#">3.</a>๋ฐฉ์†ก ํ™œ๋™
       <ol>
         <li><a href="#">3.1</a>.<a href="https://namu.wiki/w/%EC%9C%A0%EC%9E%AC%EC%84%9D/%ED%99%9C%EB%8F%99%20%EB%82%B4%EC%97%AD" title="์œ ์žฌ์„ ํ™œ๋™๋‚ด์—ญ">ํ™œ๋™ ๋‚ด์—ญ</a></li>
         <li><a href="#">3.2</a>.๋ฐฉ์†ก ๊ฒฝ๋ ฅ</li>
         <li><a href="#">3.3</a>.<a href="https://namu.wiki/w/DY%20%EC%97%94%ED%84%B0%ED%85%8C%EC%9D%B8%EB%A8%BC%ED%8A%B8%20%EC%82%AC%EA%B1%B4">DY ์—”ํ„ฐํ…Œ์ธ๋จผํŠธ</a></li>
         <li><a href="#">3.4</a>.<a href="https://namu.wiki/w/%EC%9C%A0%EC%9E%AC%EC%84%9D/%EC%88%98%EC%83%81%20%EB%82%B4%EC%97%AD">์ˆ˜์ƒ ๋‚ด์—ญ</a></li>
         <li><a href="#">3.5</a>.<a href="https://namu.wiki/w/%EC%9C%A0%EC%9E%AC%EC%84%9D/%ED%8A%B9%EC%A7%95">ํŠน์ง•</a></li>
         <li><a href="#">3.6</a>.<a href="https://namu.wiki/w/%EC%9C%A0%EC%9E%AC%EC%84%9D/%EC%9D%8C%EC%95%85%20%ED%99%9C%EB%8F%99">์Œ์•…ํ™œ๋™</a></li>
       </ol>
      </li>
      <li><a href="#">4.</a>์ธํ’ˆ๊ณผ ์šฐ์ƒ
       <ol>
        <li><a href="#">4.1</a>.๊ธฐ๋ถ€</li>
        <li><a href="#">4.2</a>.๋™๋ฃŒ๋“ค๊ณผ์˜ ์—ํ”ผ์†Œ๋“œ</li>
        <li><a href="#">4.3</a>.๊ธฐํƒ€ ์—ํ”ผ์†Œ๋“œ</li>
       </ol>
      </li>
      <li><a href="#">5.</a><a href="https://namu.wiki/w/%EC%9C%A0%EC%9E%AC%EC%84%9D/%EB%8C%80%EC%9D%B8%20%EA%B4%80%EA%B3%84">๋Œ€์ธ ๊ด€๊ณ„</a></li>
      <li><a href="#">6.</a><a href="https://namu.wiki/w/%EB%AC%B4%ED%95%9C%EC%9E%AC%EC%84%9D%EA%B5%90">ํŒฌ๋ค</a>
        <ol>
          <li><a href="#">6.1</a>.๊ด‘ํŒฌ</li>
          <li><a href="#">6.2</a>.์•ˆํ‹ฐ</li>
        </ol>
      </li>
      <li><a href="#">7.</a>๊ฑฐ์ง“ ๋ฃจ๋จธ
        <ol>
          <li><a href="#">7.1</a>.<a href="https://namu.wiki/w/%ED%94%84%EB%A1%9C%ED%8F%AC%ED%8F%B4">ํ”„๋กœํฌํด</a> ์‚ฌ๊ฑด ์—ฐ๋ฃจ ๋ฃจ๋จธ</li>
          <li><a href="#">7.2</a>.<a href="https://namu.wiki/w/%EC%8B%A0%EC%B2%9C%EC%A7%80%EC%98%88%EC%88%98%EA%B5%90%20%EC%A6%9D%EA%B1%B0%EC%9E%A5%EB%A7%89%EC%84%B1%EC%A0%84?from=%EC%8B%A0%EC%B2%9C%EC%A7%80">์‹ ์ฒœ์ง€</a> ์—ฐ๊ด€ ๋ฃจ๋จธ</li>
        </ol>
      </li>
      <li><a href="#">8.</a><a href="https://namu.wiki/w/%EC%9C%A0%EC%9E%AC%EC%84%9D/%EC%96%B4%EB%A1%9D">์–ด๋ก</a></li>
      <li><a href="#">9.</a><a href="https://namu.wiki/w/%EC%9C%A0%EC%9E%AC%EC%84%9D/%EB%B9%84%ED%8C%90">๋น„ํŒ</a></li>
      <li><a href="#">10.</a><a href="https://namu.wiki/w/%EC%9C%A0%EC%9E%AC%EC%84%9D/%EC%97%AC%EB%8B%B4">์—ฌ๋‹ด</a></li>
    </ol>
    <!-- ํ”„๋กœํ•„ ํ‘œ -->
    <table border="1" cellspacing="0">
      <caption><b>์œ ์žฌ์„<br>ๅŠ‰ๅœจ้Œซ ๏ฝœ Yu Jae-seok</b></caption>
      <tr><!--๋ณ‘ํ•ฉ์„ ํ•˜๊ธฐ ์ „์— ์Šคํƒ€์ผ์„ ๋งŒ๋“ค์–ด ๋†“์•„๋ผ!-->
        <td colspan="2"><img src="./img/yjs.png" width="750px" height="1126px"></td>
      </tr>
      <tr>
        <th rowspan="2">์ถœ์ƒ</th>
        <td><a href="#">1972๋…„</a> <a href="#">8์›” 14์ผ</a>(49์„ธ)</td>
      </tr>
      <tr>
        <td><a href="#">์„œ์šธํŠน๋ณ„์‹œ</a> <a href="#">์„ฑ๋ถ๊ตฌ</a> <a href="#">์ˆ˜์œ ๋™</a>
          <br><!--์œ—์ฒจ์ž ๋ฌธ์ž ๋„ฃ๊ธฐ : sup / ์•„๋žซ์ฒจ์ž ๋ฌธ์ž ๋„ฃ๊ธฐ : sub-->
          (็พ <a href="#">์„œ์šธํŠน๋ณ„์‹œ</a> <a href="#">๊ฐ•๋ถ๊ตฌ</a> <a href="#">์ˆ˜์œ ๋™</a>)<sup>[8]</sup></td>
      </tr>
      <tr>
        <th>๊ฑฐ์ฃผ์ง€</th>
        <td><a href="#">์„œ์šธํŠน๋ณ„์‹œ ๊ฐ•๋‚จ๊ตฌ ์••๊ตฌ์ •๋™</a></td>
      </tr>
      <tr>
        <th>๊ตญ์ </th>
        <td><img src="./img/icon.svg" width="20px" height="15px"><a href="#">๋Œ€ํ•œ๋ฏผ๊ตญ</a></td>
      </tr>
      <tr>
        <th>๋ณธ๊ด€</th>
        <td><a href="#">๊ฐ•๋ฆ‰ ์œ ์”จ</a></td>
      </tr>
    </table>
    <!-- ๊ณ ์œ ์˜ ์ด๋ฆ„์„ ์„ค์ • ํ•ด์ฃผ๋ ค๋Š” ๊ฒƒ์ด id ์†์„ฑ ์ž…๋‹ˆ๋‹ค. id๋Š” ์˜์†Œ๋ฌธ์ž๋กœ(์ˆซ์ž๋Š” ๋งจ ์•ž์—๋งŒ ์•ˆ๋ถ™์œผ๋ฉด ๋œ๋‹ค) ์จ์•ผํ•จ. ํ•œ๊ธ€, ํŠน์ˆ˜๋ฌธ์ž ์•ˆ๋จ! -->
    <!-- id ์†์„ฑ์€ html์˜ ๋ชจ๋“  ํƒœ๊ทธ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. id๋Š” ๊ณ ์œ ์˜ ์ด๋ฆ„์ด๋ฏ€๋กœ ๋˜‘๊ฐ™์€ ์ด๋ฆ„์ด ์ค‘๋ณต๋˜๋ฉด ์•ˆ๋œ๋‹ค. -->
    <h2 id="sub1">1. ๊ฐœ์š”</h2>
    <fieldset>
    <p>์ด ๋ฌธ๋‹จ์€ ์•„๋ž˜ ํ† ๋ก ๋“ค๋กœ ํ•ฉ์˜๋œ ํŽธ์ง‘๋ฐฉ์นจ์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ํ•ฉ์˜๋œ ๋ถ€๋ถ„์„ ํ† ๋ก  ์—†์ด ์ˆ˜์ •ํ•  ์‹œ ์ œ์žฌ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
    </fieldset>
    <!--๋งฅ๋ฝ์„ ๋”ฐ์ ธ๋ณด๋ฉด ์ด๋ฏธ์ง€๊ฐ€ ๋‚ด์šฉ ์ปจํ…์ธ  ์•ˆ์œผ๋กœ ๋“ค์–ด๊ฐ€๊ธฐ ๋•Œ๋ฌธ์— pํƒœ๊ทธ ์‚ฌ์ด์— ๋„ฃ์–ด์คŒ-->
    <p><img src="./img/img1.png" alt="์œ ์žฌ์„ ์‚ฌ์ง„"></p>
    <p>์ฝ”๋ฏธ๋””์–ธ ์ถœ์‹  MC, ๋ฐฉ์†ก์ธ ๊ฒธ ๊ฐ€์ˆ˜์ด๋ฉฐ ๋Œ€ํ•œ๋ฏผ๊ตญ์˜ ๊ตญ๋ฏผMC๋‹ค. 1991๋…„ KBS ๊ณต์ฑ„ ๊ฐœ๊ทธ๋งจ 7๊ธฐ[28]๋กœ ๋ฐ๋ท”ํ–ˆ๋‹ค. ๋Œ€ํ•œ๋ฏผ๊ตญ ๋ฐฉ์†ก๊ณ„ ์—ญ์‚ฌ์— ์ „๋ฌดํ›„๋ฌดํ•œ 17ํšŒ ๋Œ€์ƒ ์ˆ˜์ƒ[29]์„ ๊ธฐ๋กํ–ˆ์œผ๋ฉฐ ๊ตญ๋ฏผMC๋ผ๋Š” ๋ณ„๋ช…์œผ๋กœ ์ „๊ตญ๋ฏผ์ ์ธ ์ธ๊ธฐ๋ฅผ ๋ˆ„๋ฆฌ๊ณ  ์žˆ๋‹ค.</p>
    <hr>
    <dl>
      <dt>1.๊ฐœ์š”</dt>
      <dd>์ด ๋ฌธ๋‹จ์€ ์•„๋ž˜ ํ† ๋ก ๋“ค๋กœ ํ•ฉ์˜๋œ ํŽธ์ง‘๋ฐฉ์นจ์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ํ•ฉ์˜๋œ ๋ถ€๋ถ„์„ ํ† ๋ก  ์—†์ด ์ˆ˜์ •ํ•  ์‹œ ์ œ์žฌ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.</dd>
      <dd><img src="./img/img1.png" alt="์œ ์žฌ์„ ์‚ฌ์ง„"></dd>
      <dd>์ฝ”๋ฏธ๋””์–ธ ์ถœ์‹  MC, ๋ฐฉ์†ก์ธ ๊ฒธ ๊ฐ€์ˆ˜์ด๋ฉฐ ๋Œ€ํ•œ๋ฏผ๊ตญ์˜ ๊ตญ๋ฏผMC๋‹ค. 1991๋…„ KBS ๊ณต์ฑ„ ๊ฐœ๊ทธ๋งจ 7๊ธฐ[28]๋กœ ๋ฐ๋ท”ํ–ˆ๋‹ค. ๋Œ€ํ•œ๋ฏผ๊ตญ ๋ฐฉ์†ก๊ณ„ ์—ญ์‚ฌ์— ์ „๋ฌดํ›„๋ฌดํ•œ 17ํšŒ ๋Œ€์ƒ ์ˆ˜์ƒ[29]์„ ๊ธฐ๋กํ–ˆ์œผ๋ฉฐ ๊ตญ๋ฏผMC๋ผ๋Š” ๋ณ„๋ช…์œผ๋กœ ์ „๊ตญ๋ฏผ์ ์ธ ์ธ๊ธฐ๋ฅผ ๋ˆ„๋ฆฌ๊ณ  ์žˆ๋‹ค.</dd>
    </dl>
  </body>
</html>
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'IT > HTML&CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML] div ์˜์—ญ ๋‚˜๋ˆ„๊ธฐ_์˜ˆ์ œ๋งŒ๋“ค๊ธฐ(2021-09-10)  (0) 2021.11.09
[HTML] form ์–‘์‹ํผ ๋งŒ๋“ค๊ธฐ(2021-09-09)  (0) 2021.11.09
[HTML] ๋‚ด๋ถ€์Šคํƒ€์ผ์‹œํŠธ๋ฐฉ์‹_๊ธฐ์ดˆ(2021-08-31)  (1) 2021.11.08
[HTML] ์ธ๋ผ์ธ์Šคํƒ€์ผ_๊ธฐ์ดˆ(2021-08-31)  (0) 2021.11.08
[HTML] ํ‘œ๋งŒ๋“ค๊ธฐ(Table)_์˜ˆ์ œ_๊ธฐ์ดˆ(2021-08-27)  (1) 2021.11.08

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”