π» μΉ λ§λ€κΈ° - 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>