ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [100DaysOfCode] 23๊ฐ• - 24๊ฐ•
      Front-end/100DaysOfCode 2022. 8. 17. 23:52

       

      ๐Ÿ’ก ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ
           ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ

       

      ๋ฏธ๋””์–ด์ฟผ๋ฆฌ ์ž‘์„ฑ๋ฒ•

      @media (min-width or max-width: 1200px) {
    p {
      font-size: 2rem;
      }
}

       

      max-width

      Desktop ๋จผ์ € ์ž‘์—… ํ›„ Mobile ์ž‘์—…

       

      min-width

      Mobile ๋จผ์ € ์ž‘์—… ํ›„ Desktop ์ž‘์—…

       

      ๋ฐ˜์‘ํ˜•์›น & ํ–„๋ฒ„๊ฑฐ ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค์–ด๋ณด์ž! 

       

      ์™„์„ฑ ์˜ˆ์‹œ

       

      HTML ํƒœ๊ทธ

      <body>
    <header>
        <div class="logo">WEBFOOD</div>
        <nav>
            <ul>
                <li>Browse Meals</li>
                <li>My Orders</li>
            </ul>
        </nav>
        <a href="#side-drawer" class="menu-btn">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </header>
    <aside id="side-drawer">
        <header>
            <a href="#" class="menu-btn">
                <span></span>
                <span></span>
                <span></span>        
            </a>
        </header>
        <nav>
            <ul>
                <li><a href="">Browse Meals</a></li>
                <li><a href="">My Orders</a></li>
            </ul>
        </nav>
    </aside>

       

      CSS ํƒœ๊ทธ

      /* *************************************************************** */
/* ham menu */

.menu-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    
    display: none;
}

.menu-btn span {
    width: 100%;
    height: 3px;
    background-color: #fff;
}

header ul {
    display: flex;
    list-style-type: none;
    line-height: 0.5rem;
}

header ul li {
    margin-left: 2.5rem;
    font-size: 1.2rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
}

header ul li:hover {
    color: #ff7043;
    cursor: pointer;
}

/* *************************************************************** */
/* drawer */

#side-drawer {
    width: 100%;
    height: 100%;
    background-color: #1f0665;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

#side-drawer:target {
    display: block;
}

#side-drawer header {
    display: flex;
    align-items: center;
    padding: 1.5rem 5.5rem;
    justify-content: flex-end;
    height: 2.5rem;
    background-color: #b1ffb1;
    
}


#side-drawer nav ul {
    font-size: 2.5rem;
    text-decoration: none;
    list-style-type: none;
    margin: 0 auto;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
}

#side-drawer ul li {
    margin-top: 3rem;
}

#side-drawer ul li a {
    text-decoration: none;
    color: white;
}

#side-drawer ul li a:hover {
    color: #FF7043;
}

      Desktop -> Mobile ์ˆœ์„œ์ด๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์ด ์ค„์–ด๋“ค์—ˆ์„ ๋•Œ๋งŒ ๋ณด์ด๋Š” ์š”์†Œ๋Š”

      display: none; ํ•ด์ค€๋‹ค

       

       

      ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ

      @media (max-width: 768px) {
    .foodBox {
        grid-template-columns: 1fr;
        gap: 6rem;
    }

    main h1 {
        font-size: 2.3rem;
    }

    main h3 {
        font-size: 1.5rem;
    }

    header nav {
        display: none;
    }

    .menu-btn {
        display: flex;
    }

}

       

      ๊ฐ€์ƒ์š”์†Œ ์„ ํƒ์ž :target

      ์š”์†Œ์˜ #id์™€ url์— ์žˆ๋Š” #์ด ๊ฐ™์„ ๋•Œ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค

       

      ์˜ˆ์‹œ

       

      - ๊ธฐ์กด display: none ์ƒํƒœ์˜€๋‹ค๊ฐ€ ํ–„๋ฒ„๊ฑฐ ๋ฉ”๋‰ด๊ฐ€ ํด๋ฆญ๋˜์—ˆ์„ ๋•Œ display: block ์†์„ฑ์ด ๋˜์–ด ํ™”๋ฉด์— ๋ณด์ด๋„๋ก ํ•œ๋‹ค

       

       

       

       

      1๏ธโƒฃ id๋กœ ์•ต์ปค ํƒœ๊ทธ๋ฅผ ์ฐธ์กฐํ•ด์„œ ๋‚ด๋ถ€ ๋งํฌ์™€ ๊ธฐ์กด ์›นํŽ˜์ด์ง€์—์„œ ๋‚ด๋ถ€ ์ฐธ์กฐ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค
      2๏ธโƒฃ target ๊ฐ€์ƒ ์„ ํƒ์ž๋ฅผ ์ด์šฉํ•ด์„œ id๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์— ์ถ”๊ฐ€๋˜๋ฉด ํŠน์ • ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค

       

       

       

      'Front-end > 100DaysOfCode' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

      [100DaysOfCode] 26๊ฐ•  (0) 2022.08.18
      [100DaysOfCode] 25๊ฐ•  (0) 2022.08.18
      [100DaysOfCode] 22๊ฐ•  (0) 2022.08.13
      [100DaysOfCode] 21๊ฐ•  (0) 2022.08.13
      [100DaysOfCode] 20๊ฐ•  (0) 2022.08.05

      ๊ด€๋ จ๊ธ€ ๊ด€๋ จ๊ธ€ ๋”๋ณด๊ธฐ

    Designed by Tistory.

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