IT/HTML&CSS

[HTML] ์˜ˆ์ œํ’€๊ธฐ(2021-09-14)

๊ธฐ๋ก์ž ๊ผฌ๋น„ 2021. 11. 9.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>์•„๋ชจ๋ ˆํผ์‹œํ”ฝ</title>
  </head>
  <body>
  <!-- html์€ ์ปจํ…์ธ ๋ฅผ ๋งฅ๋ฝ์— ๋งž๊ฒŒ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ!!!! ์ด๊ฒŒ ๋ฝ€์ธํŠธ/ํ•ต์‹ฌ์ด๋‹ค! ์ฒ˜์Œ์— ์‹œ์ž‘ํ•  ๋•Œ, ๋””์ž์ธ ์‹œ์•ˆ์„ ๋ณด๊ณ  ์˜์—ญ์„ ๋จผ์ € ์žก์•„์ฃผ๋Š” ๊ฒŒ 1์ˆœ์œ„๋‹ค! -->
    <div class="container">
      <header>
        <div>
          <h1 class="logo"><a href="#"><img src="./img/logo.gif" alt="๋กœ๊ณ ์ด๋ฏธ์ง€"></a></h1>
        </div>
        <nav>
          <ul class="topMenu">
            <li><a href="#"><img src="./img/sidemenu1.gif" alt="home ์ด๋ฏธ์ง€"></a></li>
            <li><a href="#"><img src="./img/sidemenu3.gif" alt="sitemap ์ด๋ฏธ์ง€"></a></li>
            <li><a href="#"><img src="./img/sidemenu4.gif" alt="contactus ์ด๋ฏธ์ง€"></a></li>
          </ul>
          <ul class="gnb">
            <li><a href="#"><img src="./img/gnbmenu1.gif" alt="๊ธฐ์—…์†Œ๊ฐœ ์ด๋ฏธ์ง€"></a></li>
            <li><a href="#"><img src="./img/gnbmenu2.gif" alt="์ฑ„์šฉ์ •๋ณด ์ด๋ฏธ์ง€"></a></li>
            <li><a href="#"><img src="./img/gnbmenu3.gif" alt="์ธ์‚ฌ์ œ๋„ ์ด๋ฏธ์ง€"></a></li>
            <li><a href="#"><img src="./img/gnbmenu4.gif" alt="์ธ์žฌ์œก์„ฑ ์ด๋ฏธ์ง€"></a></li>
            <li><a href="#"><img src="./img/gnbmenu5.gif" alt="์ž…์‚ฌ์ง€์› ์ด๋ฏธ์ง€"></a></li>
            <li><a href="#"><img src="./img/gnbmenu6.gif" alt="์ž…์‚ฌ๋„์šฐ๋ฏธ ์ด๋ฏธ์ง€"></a></li>
          </ul>
        </nav>
      </header>
      <div class="banner">
        <!-- ๊ตฌ๋ฆ„์ด๋‚˜ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€๋Š” ์ปจํ…์ธ ๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋–„๋ฌธ์— css์—์„œ ๋ฐฑ๊ทธ๋ผ์šด๋“œ๋กœ ๋„ฃ์–ด์ค€๋‹ค. -->
        <h2>Asian Beauty Creator</h2>
        <dl>
          <dt><a href="#"><img src="./img/tit_news1.gif" alt="์ฑ„์šฉ๋‰ด์Šค"></a></dt>
          <dd><!--dd ํƒœ๊ทธ ์•ˆ์— list ํƒœ๊ทธ๊ฐ€ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ์Œ--->
            <ul>
              <!-- ๋‚ ์งœ/๋ฐ์ดํ„ฐ๋Š” span ํƒœ๊ทธ๋ฅผ ์จ์„œ ๋‚˜์ค‘์— ์Šคํƒ€์ผ์„ ๋”ฐ๋กœ ๋ถ€์—ฌํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ์ด์™•์ด๋ฉด ํƒœ๊ทธ๋กœ ํ‘œํ˜„์„ ํ•˜์ž. ์„ ํƒํ•ด์„œ ์Šคํƒ€์ผ์„ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ฃผ๊ธฐ ์œ„ํ•ด์„œ -->
              <li><a href="#">[AMOREPACIFIC] ์ฑ„์šฉ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ...</a><span>2011.04.22</span></li>
              <li><a href="#">2011 ์ƒ๋ฐ˜๊ธฐ AMOREPACIFIC ์‹ ์ž…์‚ฌ์›...</a><span>2011.04.21</span></li>
              <li><a href="#">2011 AMOREPACIFIC ์‹ ์ž…์‚ฌ์› ์ˆ˜์‹œ์ฑ„์šฉ...</a><span>2011.03.15</span></li>
            </ul>
          </dd>
          <dt><a href="#"><img src="./img/tit_news2.gif" alt="์ž…์‚ฌ์ง€์›"></a></dt>
          <dd>
            <ul>
              <li><a href="#">[AMOREPACIFIC] ์ฑ„์šฉ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ...</a><span>2011.04.22</span></li>
              <li><a href="#">2011 ์ƒ๋ฐ˜๊ธฐ AMOREPACIFIC ์‹ ์ž…์‚ฌ์›...</a><span>2011.04.21</span></li>
              <li><a href="#">2011 AMOREPACIFIC ์‹ ์ž…์‚ฌ์› ์ˆ˜์‹œ์ฑ„์šฉ...</a><span>2011.03.15</span></li>
            </ul>
          </dd>
          <dt><a href="#"><img src="./img/tit_news3.gif" alt="์ฑ„์šฉ๊ณต๊ณ "></a></dt>
          <dd>
            <ul>
              <li><a href="#">[AMOREPACIFIC] ์ฑ„์šฉ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ...</a><span>2011.04.22</span></li>
              <li><a href="#">2011 ์ƒ๋ฐ˜๊ธฐ AMOREPACIFIC ์‹ ์ž…์‚ฌ์›...</a><span>2011.04.21</span></li>
              <li><a href="#">2011 AMOREPACIFIC ์‹ ์ž…์‚ฌ์› ์ˆ˜์‹œ์ฑ„์šฉ...</a><span>2011.03.15</span></li>
            </ul>
          </dd>
        </dl>
      </div>
      <div class="contents">
        <div>
          <h3><img src="./img/tit_service.gif" alt="#"></h3>
          <ol><!--์ž…์‚ฌ ์ง€์›์˜†์˜ ํ™”์‚ดํ‘œ๋ฅผ ux๋ผ ํ•˜๋Š”๋ฐ... ux(์‚ฌ์šฉ์ž ๊ฒฝํ—˜)๋Š” ์‚ฌ๋žŒ๋“ค์ด ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๊ฒฝํ—˜์ด ์Œ“์—ฌ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋””์ž์ธํ•˜๋Š” ๊ฒƒ๋“ค-->
            <li><a href="#">์ž…์‚ฌ์ง€์›&gt;</a></li>
            <li><a href="#">์ƒ์‹œ์ฑ„์šฉ></a></li>
            <li><a href="#">์ง€์›๊ฒฐ๊ณผ></a></li>
            <li><a href="#">FAQ></a></li>
          </ol>
        </div><!--ํƒญ๋ฉ”๋‰ด๋Š” dl ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉ-->
        <div>
          <dl>
            <dt><a href="#"><img src="./img/tit_person.gif" alt="์ธ์žฌ์ƒ ์ด๋ฏธ์ง€"></a></dt>
            <dd>
              <a href="#"><img src="./img/img_person.jpg" alt="์ธ์žฌ์ƒ ์„ค๋ช… ์ด๋ฏธ์ง€"></a>
            </dd>
            <dt><a href="#"><img src="./img/tit_pay.gif" alt="๋ณต๋ฆฌํ›„์ƒ ์ด๋ฏธ์ง€"></a></dt>
            <dd>
              <a href="#"><img src="./img/img_pay.jpg" alt="๋ณต๋ฆฌํ›„์ƒ ์„ค๋ช… ์ด๋ฏธ์ง€"></a>
            </dd>
          </dl>
        </div>
        <div>
          <h3><img src="./img/tit_interview.gif" alt="์„ ๋ฐฐ์™€์˜ ์ธํ„ฐ๋ทฐ ์ด๋ฏธ์ง€"></h3>
          <p><a href="#"><img src="./img/img_interview.jpg" alt="์„ ๋ฐฐ์™€์˜ ์ธํ„ฐ๋ทฐ ๋ณธ๋ฌธ์„ค๋ช… ์ด๋ฏธ์ง€"></a></p>
        </div>
      </div>
      <footer>
        <div><!--๋ˆŒ๋Ÿฌ์„œ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š”๊ฒƒ : select ๋ฐ•์Šค๋ฅผ ์“ด๋‹ค.-->
          <select>
            <option>FAMILY SITE</option>
            <option>NAVER</option>
            <option>KAKAO</option>
          </select>
          <a href="#"><img src="./img/footer_privacy.gif" alt="๊ฐœ์ธ์ •๋ณด์ทจ๊ธ‰๋ฐฉ์นจ ์ด๋ฏธ์ง€"></a>
        </div>
        <div>
          <p><img src="./img/footer_copyright.gif" alt="#"></p>
        </div>
      </footer>
    </div>
  </body>
</html>

๋Œ“๊ธ€