IT/HTML&CSS

[HTML] div ์˜์—ญ ๋‚˜๋ˆ„๊ธฐ_์˜ˆ์ œ๋งŒ๋“ค๊ธฐ(2021-09-10)

๊ธฐ๋ก์ž ๊ผฌ๋น„ 2021. 11. 9.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>๋‚˜์•ผ๋‚˜๋น„์ฆˆ๋‹ˆ์Šค</title>
  </head>
  <body>
  <!-- div ํƒœ๊ทธ๋Š” ์Œํƒœ๊ทธ๋กœ ์˜์—ญ์„ ๊ตฌ๋ถ„ํ•ด์ค€๋‹ค. ์œ„์—์„œ ์•„๋ž˜๋กœ, ์ขŒ์—์„œ ์šฐ๋กœ ๋ ˆ์ด์•„์›ƒ์˜ ์˜์—ญ์„ ๊ตฌ๋ถ„ํ•˜์—ฌ divํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. -->
  <!-- ์ „์ฒด์˜์—ญ : ํฐ ๊ฒƒ๋ถ€ํ„ฐ ์˜์—ญ์„ ์žก๋Š”๋‹ค. -->
    <div id="container"><!-- header, footer๋Š” div๋ž‘ ๊ฐ™์€๋ฐ ์ด๋ฆ„๋งŒ ๋‹ค๋ฅธ ํƒœ๊ทธ, ์ฃผ๋กœ ์ƒ๋‹จ/ํ•˜๋‹จ์— ์“ฐ๋Š” ์˜์—ญ ํƒœ๊ทธ -->
      <header>
        <!--  nav๊ฐ€ div๋ณด๋‹ค ๋จผ์ € ๋“ค์–ด๊ฐ€๋ฉด css ๋•Œ ๊ณ ์ƒํ•˜๋ฏ€๋กœ ์œ„์—์„œ ์•„๋ž˜/์ขŒ์—์„œ ์šฐ์˜ ์ˆœ์„œ๋Œ€๋กœ ํƒœ๊ทธ๋„ ์ž‘์„ฑ๋˜์–ด์•ผ ํ•จ -->
        <div class="logo">
          <h1><a href="#"><img src="./img/logo.gif" alt="๋‚˜์•ผ๋‚˜๋น„์ฆˆ๋‹ˆ์Šค"></a></h1>
        </div>
        <nav><!--navigator ํƒœ๊ทธ๋Š” div ์ฒ˜๋Ÿผ ์˜์—ญ์„ ๋‚˜๋ˆ„์–ด ์ฃผ๋Š”๋ฐ, ๊ทธ ์•ˆ์— ๋ฉ”๋‰ด๋ฅผ ๋‹ด๋Š” ๊ฒŒ navigator(์ค„์—ฌ์„œ nav) ํƒœ๊ทธ-->
          <ul class="topMenu">
            <li><a href="#"><img src="./img/t_m_home.gif" alt="home๋ฐ”๋กœ๊ฐ€๊ธฐ"></a></li>
            <li><a href="#"><img src="./img/t_m_login.gif" alt="login๋ฐ”๋กœ๊ฐ€๊ธฐ"></a></li>
            <li><a href="#"><img src="./img/t_m_join.gif" alt="join๋ฐ”๋กœ๊ฐ€๊ธฐ"></a></li>
            <li><a href="#"><img src="./img/t_m_sitemap.gif" alt="sitemap๋ฐ”๋กœ๊ฐ€๊ธฐ"></a></li>
          </ul>
          <ul class="gnb"><!--gnb = global navigation bar-->
            <li><a href="#">ํšŒ์‚ฌ์†Œ๊ฐœ</a></li>
            <li><a href="#">์‚ฌ์—…๋ถ„์•ผ</a></li>
            <li><a href="#">์ œํ’ˆ์•ˆ๋‚ด</a></li>
            <li><a href="#">์ฑ„์šฉ์ •๋ณด</a></li>
            <li><a href="#">๊ณ ๊ฐ์ง€์›</a></li>
          </ul>
        </nav>
      </header>
      <div class="mainBanner">
        <img src="./img/img_main.jpg" alt="๊ณ ๊ฐ๊ณผ ํ•จ๊ป˜ ์„ฑ์žฅํ•ด์˜จ 1๋“ฑ ๊ธฐ์—… ๋‚˜์•ผ์กด ๋ฉ”์ธ๋ฐฐ๋„ˆ ์ด๋ฏธ์ง€">
      </div>
      <div class="contents">
        <div>
          <h2><img src="./img/m_tit_biz.gif" alt="๋น„์ฆˆ๋‹ˆ์Šค ์ธํฌ"></h2>
          <p><img src="./img/biz_img.gif" alt="#"></p>
          <a href="#"><img src="./img/btn_view.gif" alt="#"></a>
        </div>
        <div>
          <h2>
            <img src="./img/m_tit_notice.gif" alt="๊ณต์ง€์‚ฌํ•ญ ๋‰ด์Šค">
            <a href="#">more</a>
          </h2>
          <ul>
            <li><a href="#">notice1</a><span>2011-02-21</span></li>
            <li><a href="#">notice2</a><span>2011-02-20</span></li>
            <li><a href="#">notice3</a><span>2011-02-19</span></li>
            <li><a href="#">notice4</a><span>2011-02-18</span></li>
          </ul>
          <p><img src="./img/biz_img.gif" alt="#"></p>
          <a href="#"><img src="./img/btn_view.gif" alt="#"></a>
        </div>
        <div>
          <h2><img src="./img/m_tit_quick.gif" alt="ํ€ต๋ฉ”๋‰ด"></h2>
          <ul>
            <li><a href="#"><img src="./img/q_m1.gif" alt="์ƒ๋‹ด๋ฌธ์˜"></a></li>
            <li><a href="#"><img src="./img/q_m2.gif" alt="์ฑ„์šฉ์ •๋ณด"></a></li>
            <li><a href="#"><img src="./img/q_m3.gif" alt="์ฐพ์•„์˜ค์‹œ๋Š”๊ธธ"></a></li>
          </ul>
        </div>
      </div>
      <footer>
        <div>
          <h1><img src="./img/logo_foot.gif" alt="๋‚˜์•ผ๋‚˜๋น„์ฆˆ๋‹ˆ์Šค"></h1>
        </div>
        <div>
          <ul>
            <li><a href="#"><img src="./img/f_priv.gif" alt="๊ฐœ์ธ์ •๋ณด์ทจ๊ธ‰๋ฐฉ์นจ"></a></li>
            <li><a href="#"><img src="./img/f_guide.gif" alt="์ด์šฉ์•ฝ๊ด€"></a></li>
            <li><a href="#"><img src="./img/f_sitemap.gif" alt="์‚ฌ์ดํŠธ๋งต"></a></li>
            <li><a href="#"><img src="./img/f_email.gif" alt="์ด๋ฉ”์ผ์ฃผ์†Œ๋ฌด๋‹จ์ˆ˜์ง‘๊ฑฐ๋ถ€"></a></li>
          </ul>
          <address>
            <img src="./img/f_copy.gif" alt="#">
          </address>
        </div>
      </footer>
    </div>
  </body>
</html>

๋Œ“๊ธ€