πŸ”₯ [UIUX] 1223 HTML + CSS Coding, μ½”λ”© κ³ κΈ‰ μ‹€μŠ΅ 20

You_Jin.Β·2024λ…„ 12μ›” 26일
1
post-thumbnail

✏️ 2024. 12μ›” 26일 / html + css μ–Έμ–΄, μ½”λ”© κ³ κΈ‰ μ‹€μŠ΅ 단계 20

πŸ‘» μ›Ή λ§Œλ“€κΈ° - 1

☁️ xeicon μ•„μ΄μ½˜ νŽ˜μ΄μ§€
μ•„μ΄μ½˜μ„ 쉽고 κ°„νŽΈν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλŠ” 쒋은 λΈŒλΌμš°μ €κ°€ μžˆμ–΄ μ†Œκ°œν•΄λ“œλ¦¬λ € ν•©λ‹ˆλ‹€.
https://xpressengine.github.io/XEIcon/
ν•΄λ‹Ή μ£Όμ†Œλ‘œ λ“€μ–΄κ°€λ©΄, xeicon ν™ˆνŽ˜μ΄μ§€κ°€ λ‚˜μ˜΅λ‹ˆλ‹€.


링크 νƒœκ·Έ ν•˜λ‚˜μ™€ 클래슀λ₯Ό μ΄μš©ν•˜μ—¬ μ‚¬μš©ν•  수 μžˆλŠ” μ•„μ΄μ½˜μ΄κΈ° λ•Œλ¬Έμ— ꡉμž₯히 μ‚¬μš©ν•˜κΈ°μ— μ’‹μŠ΅λ‹ˆλ‹€!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>plum</title>
    <!-- xeicon μ•„μ΄μ½˜ μ—°κ²° / https:λ₯Ό μ•žμ— λΆ™μ—¬μ€˜μ•Όν•¨ -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
    <link rel="stylesheet" href="./css/layout.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <div class="con">
          <!-- 둜고 -->
          <h1>
            <a href="#">
              <img src="./img/logo.png" alt="logo" />
            </a>
          </h1>
          <!-- 메뉴 -->
          <nav id="gnb">
            <ul>
              <li>
                <a href="#">about</a>
                <!-- 2차메뉴 -->
                <ul class="submenu">
                  <li><a href="#">menu1</a></li>
                  <li><a href="#">menu2</a></li>
                  <li><a href="#">menu3</a></li>
                </ul>
              </li>
              <li>
                <a href="#">product</a>
                <!-- 2차메뉴 -->
                <ul class="submenu">
                  <li><a href="#">menu1</a></li>
                  <li><a href="#">menu2</a></li>
                  <li><a href="#">menu3</a></li>
                </ul>
              </li>
              <li>
                <a href="#">sale</a>
                <!-- 2차메뉴 -->
                <ul class="submenu">
                  <li><a href="#">menu1</a></li>
                  <li><a href="#">menu2</a></li>
                  <li><a href="#">menu3</a></li>
                </ul>
              </li>
              <li>
                <a href="#">community</a>
                <!-- 2차메뉴 -->
                <ul class="submenu">
                  <li><a href="#">menu1</a></li>
                  <li><a href="#">menu2</a></li>
                  <li><a href="#">menu3</a></li>
                </ul>
              </li>
              <li>
                <a href="#">contact</a>
                <!-- 2차메뉴 -->
                <ul class="submenu">
                  <li><a href="#">menu1</a></li>
                  <li><a href="#">menu2</a></li>
                  <li><a href="#">menu3</a></li>
                </ul>
              </li>
            </ul>
          </nav>
          <!-- μ•„μ΄μ½˜ -->
          <div class="icons">
            <a href="#"><i class="xi-user-o"></i></a>
            <a href="#"><i class="xi-bars"></i></a>
          </div>
        </div>
      </header>
      <!-- 컨텐츠 μ˜μ—­ -->
      <main>
        <!-- λ©”μΈλ² λ„ˆ -->
        <section class="main_visual">
          <div class="main_visual_text">
            <h2>We are big explorers.</h2>
            <p>
              We are always looking for your needs.<br />
              What are you waiting for?<br />
              Come With Us!!!
            </p>
          </div>
          <div class="man">
            <img src="./img/bg_img1.png" alt="animation1" />
          </div>
          <div class="woman">
            <img src="./img/bg_img2.png" alt="animation1" />
          </div>
        </section>
        <!-- λ‘λ²ˆμ§Έ μ„Ήμ…˜ -->
        <section class="sec2">
          <div class="con">
            <!-- μ™Όμͺ½ ν…μŠ€νŠΈ μ˜μ—­ -->
            <div class="left_text">
              <h3>WHAT WE DO?</h3>
              <p>
                We find what we like<br />
                through your search.<br />
                And it provides better<br />
                information.
              </p>
              <button type="button">How do you find it?</button>
            </div>
            <!-- 였λ₯Έμͺ½ 이미지 μ˜μ—­ -->
            <div class="right_image">
              <img src="./img/coders.png" alt="coding" />
            </div>
          </div>
        </section>
      </main>
      <footer></footer>
    </div>
  </body>
</html>

πŸ‘» λ°˜μ‘ν˜• / λ―Έλ””μ–΄ 쿼리 μ‹€μŠ΅


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>λ°˜μ‘ν˜• μ‹€μŠ΅</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrap {
        width: 90%;
        margin: 0 auto;
        border: 4px solid #000;
        overflow: hidden;
      }
      .wrap div {
        float: left;
        height: 100px;
      }
      .wrap div:first-child {
        background-color: lavender;
      }
      .wrap div:nth-child(2) {
        background-color: lavenderblush;
      }
      .wrap div:nth-child(3) {
        background-color: lightgoldenrodyellow;
      }
      .wrap div:nth-child(4) {
        background-color: rgb(219, 234, 255);
      }
      .wrap div:last-child {
        background-color: linen;
      }
      /* 미디어쿼리 λͺ¨λ°”일 */
      @media screen and (min-width: 320px) {
        .wrap div {
          width: 100%;
        }
      }
      /* 미디어쿼리 νƒœλΈ”λ¦Ώ */
      @media screen and (min-width: 768px) {
        .wrap div {
          width: 50%;
        }
        .wrap div:last-child {
          width: 100%;
        }
      }
      /* 미디어쿼리 PC */
      @media screen and (min-width: 1024px) {
        .wrap div {
          width: 20%;
        }
        .wrap div:last-child {
          width: 20%;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

πŸ‘» λΆ€νŠΈμŠ€νŠΈλž©μ— λŒ€ν•΄ μ•Œμ•„λ΄…μ‹œλ‹€
☁️ λΆ€νŠΈμŠ€νŠΈλž© / bootstrap
λ°˜μ‘ν˜•μ„ 쉽고 λΉ λ₯΄κ²Œ, μ›Ή μž‘μ—…μ„ λ”μš± μˆ˜μ›”ν•˜κ²Œ λ§Œλ“€μ–΄μ£ΌλŠ” λΆ€νŠΈμŠ€νŠΈλž©μ— λŒ€ν•΄ μ•Œλ €λ“œλ¦¬λ € ν•©λ‹ˆλ‹€.

λΆ€νŠΈμŠ€νŠΈλž©μ€ μ˜μ–΄λ‘œ λ˜μ–΄μžˆλŠ” ν™ˆνŽ˜μ΄μ§€μ™€ ν•œκ΅­μ–΄λ‘œ λ˜μ–΄μžˆλŠ” ν™ˆνŽ˜μ΄μ§€κ°€ μžˆμœΌλ‚˜, μ—…λ°μ΄νŠΈκ°€ λΉ λ₯΄κ²Œ λ°˜μ˜λ˜λŠ” 영문 λΈŒλΌμš°μ €λ₯Ό μΆ”μ²œλ“œλ¦½λ‹ˆλ‹€.

λΆ€νŠΈμŠ€νŠΈλž© ν™ˆνŽ˜μ΄μ§€μ˜ κ°€μ΄λ“œμ™€ 독 λ©”λ‰΄μ˜ λ‹€μ–‘ν•œ 클래슀λ₯Ό μ°Έκ³ ν•˜μ—¬ λ ˆμ΄μ•„μ›ƒμ„ λ§Œλ“€λ©΄
css μž‘μ—…μ„ κ±°μΉ˜μ§€ μ•Šκ³ λ„ λ°˜μ‘ν˜• 웹을 λšλ”± λ§Œλ“€μ–΄λ‚Ό 수 μžˆλ‹΅λ‹ˆλ‹€.
μ•„λž˜ μ‹€μŠ΅λ³Έμ„ ν•¨κ»˜ μ²¨λΆ€ν•˜κ² μŠ΅λ‹ˆλ‹€.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>λΆ€νŠΈμŠ€νŠΈλž©</title>
    <!-- css -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <style>
      .container {
        height: 300px;
        background-color: lightgray;
      }
      .row {
        height: 100%;
      }
      .col {
        box-sizing: border-box;
        border: 2px solid rgb(122, 122, 122);
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 1sec -->
      <div class="row justify-content-between">
        <div class="col col-md-3">컨텐츠1</div>
        <div class="col col-md-3">컨텐츠2</div>
        <div class="col col-md-4">컨텐츠3</div>
      </div>
    </div>
  </body>
  <!-- js -->
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"
</script>
  <!-- bootstrap -->
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"
    integrity="sha512-teGKRDIINyavMA8HWd2it9556yHW6RLuay1xk3s/d87nSU/GGFgt4DNwmAhrZUdpKtgTQCdISUvA0sZqrLpczg=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
</script>
</html>
profile
🎧 α΄˜ΚŸα΄€ΚΙͺΙ΄Ι’: UXUI (Feat: coding) ─────────βšͺ───── 𝟸:𝟷𝟾 / 𝟹:πŸ»πŸΌβ € γ…€ ◄◄⠀▐▐⠀►► ───○ πŸ”Š

0개의 λŒ“κΈ€