상세 컨텐츠

본문 제목

[웹사이트 만들기] Quora html, css 따라해보기

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트

by 주초위왕 2023. 7. 27. 20:52

본문

대충 만들어봤는데 자바스크립트 하다가 오랜만에 하닌가 너무 헷갈린다.

<body>
    <!--로그인 창 화면-->
    <div class="content">

      <!--쿠오라 로고-->
      <div class="logoText">
        <div class="logo">
          <img width="300px" height="150px" src="https://cdn.icon-icons.com/icons2/2699/PNG/512/quora_logo_icon_169811.png"></img>
        </div>
        <div class="text">
            <h5>A place to share knowledge and better understand the world</h5>
          </div>
      </div>

      <!--쿠오라 로그인 박스-->
      <div class="loginbox">

        <!--쿠오라 구글/페이스북-->
        <div class="login-left">
          <div class="line">
            <hr>
          </div>
          <div class="text2">
            <h5>By continuing you indicate that you agree to Quora’s Terms of Service and Privacy Policy.</h5>
          </div>
          <div class="gf-btn">
            <button class="btn1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" viewBox="0 0 24 24"><path class="icon_svg-fill_as_stroke" d="M20.16 12.193c0-.603-.054-1.182-.155-1.739H12v3.288h4.575a3.91 3.91 0 0 1-1.696 2.565v2.133h2.747c1.607-1.48 2.535-3.659 2.535-6.248z" fill="#4285f4"></path><path class="icon_svg-fill_as_stroke" d="M12 20.5c2.295 0 4.219-.761 5.625-2.059l-2.747-2.133c-.761.51-1.735.811-2.878.811-2.214 0-4.088-1.495-4.756-3.504h-2.84v2.202A8.497 8.497 0 0 0 12 20.5z" fill="#34a853"></path><path class="icon_svg-fill_as_stroke" d="M7.244 13.615A5.11 5.11 0 0 1 6.977 12a5.11 5.11 0 0 1 .267-1.615V8.183h-2.84C3.828 9.33 3.5 10.628 3.5 12s.328 2.67.904 3.817l2.84-2.202z" fill="#fbbc05"></path><path class="icon_svg-fill_as_stroke" d="M12 6.881c1.248 0 2.368.429 3.249 1.271l2.438-2.438C16.215 4.342 14.291 3.5 12 3.5a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202C7.912 8.376 9.786 6.881 12 6.881z" fill="#ea4335"></path></svg>Continue with Google</button>
            <button class="btn2"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="icon_svg-fill_as_stroke" fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12a8.5 8.5 0 1 0-9.83 8.397v-5.94H8.513v-2.458h2.159v-1.872c0-2.13 1.269-3.307 3.21-3.307.93 0 1.903.166 1.903.166v2.091h-1.072c-1.056 0-1.385.656-1.385 1.328V12h2.358l-.377 2.457h-1.98v5.94A8.503 8.503 0 0 0 20.5 12Z" fill="#1877F2"></path></svg>Continue with Facebook</button>
          </div>
        </div>
    </div>
* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url("//qsf.fs.quoracdn.net/-4-ans_frontend_assets.images.home_page_bg_desktop.png-26-4770753d59b970e1.png");
  background-size: cover;
}

.content {
  width: 700px;
  height: 500px;
  background-color: white;
  margin: 0 auto;
  margin-top: 150px;
}

.logoText {
  height: 200px;
  width: 500px;
  margin-left: 100px;
}

.logo {
  margin-left: 100px;
}

.text {
  margin-left: 70px;
}

.line {
  width: 500px;
  margin-left: 100px;
}

.text2 {
  width: 400px;
  height: 50px;
  margin-left: 150px;
  margin-top: 30px;
}

.gf-btn {
  display: flex;
  flex-direction: column;
  margin-left: 150px;
  margin-top: 50px;
  height: 50px;
  width: 200px;
}

.gf-btn,
.btn1 {
  width: 400px;
  height: 90px;
  margin-bottom: 10px;
}

.gf-btn,
.btn2 {
  width: 400px;
  height: 90px;
}
<!--전체 잡기-->
    <div class="container">
      <!--상단 헤더 부분-->
      <div class="header">
        <img
          width="110px"
          height="50px"
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAT4AAACfCAMAAABX0UX9AAAAkFBMVEX///+5Kye5KSW4JiLz4eG3IRy3FQ3AQT63HBbCTEn46+q4Ix+3HhmzAADQdnTanp27NDH++vq+Oze1EQn78vLy2tn78fG7MCzszMu1Ewvw1NPWjIrnu7rjs7LNb23owL/hq6rSgX/ZlZPThILHYF3GWVbWjYvNcnDvz87KZ2XBR0TAQD3EVFHeo6Lir63Md3YLKkzJAAANh0lEQVR4nO1ciZaquBYtw2AkQUXAAUUURxzK//+7B06cE9BCrO6qfnV2r3tXXwMh7Jw5CR8fBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBML/Pyx/GIXHzjGMhr7104P5b8EL4qTVFSOTc26OZHeXrCPvpwf1X0G07tlSaIw1LmBME9LV2hNi8EtYYc+QWqMIZsjeWP/p4f1yHJumxkrIOxOo8e66/9Mj/MUI96MywQMMcvfo/PQofymsE4fkMcFNLtM/BvqVr/yfHuivxHDPc7XVuN2dxuEkmkw67Z7Nxb2JGWL200P9hTi6uZAx8xBDL2Edl8CdMN4mBVawkLnoGYOjGqN4US+/gJlT8iAIp1FODk/KyHFiMyeYt4g/gHlu9picP1DNTyigK+LvjjFwGk8M2xHK35Ts3xWhndMidk8ujM08guHzf218vxtBN2ePNYZPrnR6wP+6k39thL8Zzk4AmRo/vTYSIDQc/GMZsBdE4TGOO7MwCmrZiL7uPxic4w8n4bETr7PeJ8P3X6HDc/aY8UVpbwmoltP7mPQyOBWblffTj8vmwOA8zXg4F4NmMrMKl5Z0lw9cjw/77qDbmqvpkbVdr5oDLetXZn9xybq7aUn3L0AHAtWQiy+unriQ6+j6qy9cU4W9v7/Q0B4Vmx/I7mRqmEqxzNQ2qp1o2YX+2tcm66TxrAOW0nSE9wTrpgnrcOfemWak3UcftTGVoDtt+8XV3g4kwFrvOm9+t1il0Vo5faKkuVlCnxMy1yheywx3ECIRWRUqGyK5tMwkCO/t3BQFK7u0Dnfu3l4F9cj7CAZguNozt3vBGrDdcMPLj1/RV1IDK6PPXz16wzQHX0JVXInCBatzQ8eEj2LmjZZ4YDzo+QxjUFMAE9jtl7qbOg8QIjbEyvtG+joGdExCylTVciYMET+lr5WJZ2zjJ8lLdOW0Xfi7JkeuPULlJc2sFUdYNnya+SxqucCBysV4dKUvMzaP6ROs2KzS12+DiWG8OV2M59Mdh3WM0z3TWQm1Q61p4bzo8uv+fMsJeMe078N4sg2i+ABfRRt8ZbfKcEQdVwlFWnDSjIvzvbgOjsYO6Tu7DqVZoc9LgNoZYnZptcJebizSZPxWyTi7Dlyd7Pof/YKNZTIbRCTRlMfXWfDWIAtoGIfX2esf4BDEssJi0AIaP8bz1NebIRUG9F2aP3tIWzB93g50y5P8VqcNG2Cm3Z+0gAqzxvbjBId2gZ31BN0d4595F3N4g/26+vpIJIwqedgETlmDh6BpBkVZpS9TrYf0OVC9xAF5WWid+Qk2+cDtMTHUGwUTy8x0EDo0UMYJdGBBk2i8nsXDkDkdXKfCLQFiXMIspQ/HWaSvj2wNoi8egVfuYrW2drBSG8OmOWQ2WqOXuVzfS8V1Ajt3UedQ+SqZLgzswczw6zsUL6u1oL4/p+9DPKIPBYbmTLkthK9vQwsPZ1929uwcCCN9yspHIdAXiRUMic/o1eDF6SFxd792vKkq7JDFNiFJNelzDgI2qAbYgYyIJVAxlG9m/xmGphmwLJ7Zs2E+LDbAiVwE6ZPP8/0iAmwt7CrS28cRvwunrCZ9R5AJllmQGIXqs7wBCU/KHl9sPW87Flcrkbrq7CoQa5kKQ4GGZqbC60NE2NPbVSrIToIUHhmjevRZMBZiRnEdFIXd2i6XTmy6mbwaH32pSS3NZnn7MoTjzVwbqmS/mnNhfGJja1e6aYroQ966Hn3QNqV5dPGJVhPyK/MAQ/F8uWgNF7tB714JcMa2NISQ9k5VL2TIyx79FJ069J1Q9nhL1c+oRx8ypqXBEyyTQR3rPI+UcvjrTTKdF10DDH1Sl1/p/XOg/D/1apVuUuiDBqMWfTrK8ktzTxigpLHHvWNE3xcJu1cW1c3hvLxM3wLTZ1a6aY7pW4GmWvShYJvJsi0gWEvyyAb9XinswpihjP9l+jATTNa4SYOpYi36kDSzXpn3h4EvTBwQffbLNbsOri2+K3280k3fLH19VIMoN2BbGNncy2QqfS8mDf0NLmK8bfvcSjd9s+2zUDGwvGqhYyXb34h6g75+R6jVrZfp+w2e10fUiNK8HVclmXZT09r0WZ3WWfTeU97fEPcNkWIam9K3RfQ1zFveW48+J1rwS61QE4N36PuOrAPmWHXoe+QWICxEcZ6b16Cvv53vr1kxk61J85247zfkvJ+ofviAPmzk76WRl+nbrg+u1K7k2eO+3nuHPqeHqahRceHvVlwqSR9W3prS53d698VKJsUpvd5/i76P5Fm9z/E8r9/3lHAd5TnfUO+LsO2rQp9Zhz7/1L0vjjDePZ2vfpO+Ga68AzvmDDvTHTNtV/aWMVRQpdqMMqU69AWK5y19dex55eue1xrn6+9Mmuub23+PPh3F3bkX1cc9wY3zhgampf/Xje9chJhxlKLWivtQ+CWSssBlqyRXt8SuMn3DRv4UTS7uI3uTPk+pZVw1Me5xFMwyjTdvPOH0XaIotxZ9e5R1lO5ajZB9zHuuSt8MrLeLAZjxN+nD2ntdpOm3Rko8no3ZPl2Yapas895Qhz4HxZGlW1/wajRQ8Ir0fcITF3tYk3iXPg/tarjYZK9ZttOEybNsouUyJrGvrlUyUCruZRWXMUou5b3AXY0+S4NLdajoh8qlNejDS8vXxZIZTkZu4JldmsA2NUOtRd8QGVOzbK/EBuWJ9n3OqtG3gGvICWoK2Jv06ahc3Tz/5uyl6Y5u8SXgr60UaWylfgtFuXq1GUVCpWvNK1zVvHuXSvTBN2QcqwtaaatDH5obxi5zf0wmW38YNw28kYmZoQeNhWgpbhLWnrR94XUe0DfGAl0cIlrraPD1vaESfXBbhFpO7LxNnzUAY1OWOqMDzpbYAAofE2qWAv04Y0/py6tOyoIDK0YuaKWNsbwsWok+uJFFVYkW3mX0JVklCOHGMGVvszNVCrJIDAqrOlNoo0x1ZSZAXgcsWMMXZLK4oIMcrwGsVyX6oOYr9PWR46xH38cK7mFa4zZnjkIuiPOOOgxUflWCmg8H7wgBVkiHb1Gy4oPWgaFvqUQf2l+FlVdZJx7U+toA2oNTONeRPNjVytzi2gLafcUEcqJOgv25aIHXgOJnFBZjoUNH84vpe3DOGJU4kEroeFNs0RhVwxYsFcK3OgNnBfmzylzkFhfeoaZYS3UajI3vOBdD58CdegXxg3mOJqCE4N0bD14eCb2AK1tTZT+gcap3RGEGz7SpNY+IF3OQdLBl+2ksNNMNo/d523ofa0UhNtzu4WrIfOC/mIatXwRMJm5zNpAZfAwhB15cyDeVeJtCeGuehroejV/W4SPYlVQ4UTkvbtpsyPKJwkNNs/NmMu7Em9ZAXZa5PksMbhwBBcDHlXR4EAxTpKPNaPkCHAaucbBU6D3nw7HClswGgAdksG7X4K/rMNiSzmSCx2HZhXd3H+zEjHBhLivXSC6Ni05rZqGf3NnBEwVil5tVH+g1M5FeB8r+eqNdyp+vLAgZctWeJ+ePXrDmVOEv2x+o+rwqmDXySZZihgYSK+LH7PhBL07xxEBOSjMqnF8AsUIIznRo9iLIRuD5CxOwd3cbVjJdHoStPsuwW/O40zkqEUFbsRtMM65HIOyJp8z3GXaNj04NwcERxg8xOHPmN/H8scebeKNyLc3Y2wf64Al9HxEcgBwcppvpASq9Ju+aq9tClH1uJiVGclOtOgTugzHJBDut24MadQIYfQkeo3F71+58hmH4GW/wHtQ0PsLGwQ+CYHsr0z2IE5ls+kqdPzuvJhuwnxX8GoUmDEgR483ca+hlMnO/sqdGMOOi1cjAs4JHWHCMotYJj1TzZg20edvIDh5KzgunzDSGaprpv9noVoN0TiXFwsye9kF2lhoYIU3ebU1xkBLvS718ZrAa0B++SJ9zKumW8c1Zv9pKXip3tb9TEyRuyem9IiQsqW9lyka+XulsTDVQzM42Zjek9KW8ZWdNeWM1DoPih+30OedFrdSkO0Ux+ov0fTgL1U4yKTuXd/BONvhIjTSn73xtb5iYJUcaC+DAOZ+LcTDkn7Tcu9plJz7d/fUcj2/YZnc574Tbx+Gp1WmZ/H5s9PzxNrsVK4mIbhuPIQcl4hMtbePaadbniC3yLqOEj7Ldpwa3e4UzwC/CCZIe/1oEjdXt8ZeQ0YaEeGGyZ5mMcdMY7DbhjWqrM7SsL82yF8TL3UBw0+RSdJvLOCjcYiXtJ5iXJb/O8NTqalmn6ZCWMyRijh4upsl0Hgff8Z1H/XNlu+d1tvtsyZEaoRuDOJso/3Rmr7At2BpOZp3zYfpaHyzpB1E0mUy+98OV2Tn8tM+aQ3rpSVG8OfQEd13bFN3DdBzNXIU/JrVBr3E9A8AfBYJ/F5aeRiTDIPD182H/VSFpZfcjPEyrV6v4Q9B7pZWXM14+UPIHMXkQk6XC9/JpsL+IB8E7/CIJ4Qnm5fInevRd5ypw5mXyJwbkNyoiLkTUrDTIJ5RjuMIfYDC0E2nuC3DClm1KITQtzRFH9rJececvQ5+tp6vDanmKw3c+nvWH4WSbnn96EAQCgUAgEAgEAoFAIBAIBAKBQCAQCAQCgUAgEAgEAoFAIBAIBAKBQCAQCP8J/A8kodteaGyjLwAAAABJRU5ErkJggg=="
        />
        <svg
          width="30"
          height="30"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M22.02 11.46L12.63 2.45999C12.34 2.17999 11.89 2.17999 11.6 2.44999L1.99 11.45C1.77 11.66 1.69 11.99 1.8 12.27C1.91 12.56 2.19 12.74 2.5 12.74H5.25V20.49C5.25 20.9 5.59 21.24 6 21.24H9.62C10.03 21.24 10.37 20.9 10.37 20.49V16.36C10.37 15.43 11.09 14.67 12 14.62H12.12C13.08 14.62 13.87 15.4 13.87 16.37V20.5C13.87 20.91 14.21 21.25 14.62 21.25H18C18.41 21.25 18.75 20.91 18.75 20.5V12.75H21.5C21.81 12.75 22.08 12.56 22.2 12.28C22.32 12 22.24 11.67 22.02 11.46Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
        </svg>
        <svg
          width="30"
          height="30"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M7.46001 9.04001C6.26001 9.04001 5.29001 8.07001 5.29001 6.87001C5.29001 5.67001 6.26001 4.70001 7.46001 4.70001C8.66001 4.70001 9.63001 5.67001 9.63001 6.87001C9.63001 8.07001 8.65001 9.04001 7.46001 9.04001ZM7.46001 6.20001C7.09001 6.20001 6.79001 6.50001 6.79001 6.87001C6.79001 7.24001 7.09001 7.54001 7.46001 7.54001C7.83001 7.54001 8.13001 7.24001 8.13001 6.87001C8.13001 6.50001 7.83001 6.20001 7.46001 6.20001Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M18.41 7.39001H12.22C11.81 7.39001 11.47 7.05001 11.47 6.64001C11.47 6.23001 11.81 5.89001 12.22 5.89001H18.41C18.82 5.89001 19.16 6.23001 19.16 6.64001C19.16 7.05001 18.82 7.39001 18.41 7.39001Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M18.41 14.72H12.22C11.81 14.72 11.47 14.38 11.47 13.97C11.47 13.56 11.81 13.22 12.22 13.22H18.41C18.82 13.22 19.16 13.56 19.16 13.97C19.16 14.38 18.82 14.72 18.41 14.72Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M18.41 18.38H12.22C11.81 18.38 11.47 18.04 11.47 17.63C11.47 17.22 11.81 16.88 12.22 16.88H18.41C18.82 16.88 19.16 17.22 19.16 17.63C19.16 18.04 18.82 18.38 18.41 18.38Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M18.41 11.06H12.22C11.81 11.06 11.47 10.72 11.47 10.31C11.47 9.9 11.81 9.56 12.22 9.56H18.41C18.82 9.56 19.16 9.9 19.16 10.31C19.16 10.72 18.82 11.06 18.41 11.06Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M7.44999 11.23L7.81999 11.87L8.18999 12.51H7.44999H6.71999L7.08999 11.87L7.44999 11.23ZM7.44999 9.73001C6.90999 9.73001 6.41999 10.02 6.14999 10.48L5.77999 11.12L5.40999 11.76C5.13999 12.22 5.13999 12.8 5.40999 13.26C5.68999 13.72 6.17999 14 6.71999 14H7.45999H8.19999C8.73999 14 9.22999 13.71 9.49999 13.25C9.76999 12.79 9.76999 12.21 9.49999 11.75L9.12999 11.11L8.75999 10.47C8.48999 10.02 7.98999 9.73001 7.44999 9.73001Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M8.81001 19.07H6.10001C5.69001 19.07 5.35001 18.73 5.35001 18.32V15.61C5.35001 15.2 5.69001 14.86 6.10001 14.86H8.81001C9.22001 14.86 9.56001 15.2 9.56001 15.61V18.32C9.56001 18.73 9.22001 19.07 8.81001 19.07ZM6.85001 17.57H8.06001V16.36H6.85001V17.57Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M18.5 21.75H5.5C3.71 21.75 2.25 20.29 2.25 18.5V5.5C2.25 3.71 3.71 2.25 5.5 2.25H18.5C20.29 2.25 21.75 3.71 21.75 5.5V18.5C21.75 20.29 20.29 21.75 18.5 21.75ZM5.5 3.75C4.54 3.75 3.75 4.54 3.75 5.5V18.5C3.75 19.46 4.54 20.25 5.5 20.25H18.5C19.46 20.25 20.25 19.46 20.25 18.5V5.5C20.25 4.54 19.46 3.75 18.5 3.75H5.5Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
        </svg>
        <svg
          width="30"
          height="30"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20.45 6.28001C20.45 5.55001 20.17 4.87001 19.65 4.35001C18.62 3.32001 16.83 3.32001 15.8 4.35001L5.17 14.98C5.09 15.06 5.03 15.16 4.99 15.27L3.6 19.46C3.51 19.73 3.58 20.03 3.78 20.23C3.92 20.37 4.11 20.45 4.31 20.45C4.39 20.45 4.47 20.44 4.55 20.41L8.74 19.01C8.85 18.97 8.95 18.91 9.03 18.83L19.65 8.21001C20.16 7.69001 20.45 7.01002 20.45 6.28001ZM18.59 7.15001L8.09 17.65L6.33 18.24L5.77 17.68L6.35 15.92L16.85 5.42001C17.31 4.96001 18.12 4.96001 18.58 5.42001C18.81 5.65001 18.94 5.96001 18.94 6.29001C18.94 6.62001 18.82 6.92001 18.59 7.15001Z"
            fill="#636466"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M20.5 11.75C20.09 11.75 19.75 12.09 19.75 12.5V19.75H12.5C12.09 19.75 11.75 20.09 11.75 20.5C11.75 20.91 12.09 21.25 12.5 21.25H20.5C20.91 21.25 21.25 20.91 21.25 20.5V12.5C21.25 12.09 20.91 11.75 20.5 11.75Z"
            fill="#636466"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M4.25 11.5V4.25H11.5C11.91 4.25 12.25 3.91 12.25 3.5C12.25 3.09 11.91 2.75 11.5 2.75H3.5C3.09 2.75 2.75 3.09 2.75 3.5V11.5C2.75 11.91 3.09 12.25 3.5 12.25C3.91 12.25 4.25 11.91 4.25 11.5Z"
            fill="#636466"
            class="icon_svg-fill_as_stroke"
          ></path>
        </svg>
        <svg
          width="30"
          height="30"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20.45 6.28001C20.45 5.55001 20.17 4.87001 19.65 4.35001C18.62 3.32001 16.83 3.32001 15.8 4.35001L5.17 14.98C5.09 15.06 5.03 15.16 4.99 15.27L3.6 19.46C3.51 19.73 3.58 20.03 3.78 20.23C3.92 20.37 4.11 20.45 4.31 20.45C4.39 20.45 4.47 20.44 4.55 20.41L8.74 19.01C8.85 18.97 8.95 18.91 9.03 18.83L19.65 8.21001C20.16 7.69001 20.45 7.01002 20.45 6.28001ZM18.59 7.15001L8.09 17.65L6.33 18.24L5.77 17.68L6.35 15.92L16.85 5.42001C17.31 4.96001 18.12 4.96001 18.58 5.42001C18.81 5.65001 18.94 5.96001 18.94 6.29001C18.94 6.62001 18.82 6.92001 18.59 7.15001Z"
            fill="#636466"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M20.5 11.75C20.09 11.75 19.75 12.09 19.75 12.5V19.75H12.5C12.09 19.75 11.75 20.09 11.75 20.5C11.75 20.91 12.09 21.25 12.5 21.25H20.5C20.91 21.25 21.25 20.91 21.25 20.5V12.5C21.25 12.09 20.91 11.75 20.5 11.75Z"
            fill="#636466"
            class="icon_svg-fill_as_stroke"
          ></path>
          <path
            d="M4.25 11.5V4.25H11.5C11.91 4.25 12.25 3.91 12.25 3.5C12.25 3.09 11.91 2.75 11.5 2.75H3.5C3.09 2.75 2.75 3.09 2.75 3.5V11.5C2.75 11.91 3.09 12.25 3.5 12.25C3.91 12.25 4.25 11.91 4.25 11.5Z"
            fill="#636466"
            class="icon_svg-fill_as_stroke"
          ></path>
        </svg>
        <svg
          width="30"
          height="30"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M20.86 14.93L20.48 14.54C20.22 14.27 19.98 14 19.76 13.73C19.57 13.49 19.4 13.27 19.26 13.07C19.07 12.79 18.99 12.62 18.96 12.55C18.93 12.46 18.81 12.1 18.73 11.12C18.68 10.5 18.66 9.8 18.67 9.12C18.67 9.05 18.67 8.97 18.67 8.87C18.66 5.22 15.67 2.25 11.99 2.25C8.30999 2.25 5.31999 5.23 5.31999 8.89V9.11C5.32999 9.81 5.30999 10.51 5.25999 11.12C5.17999 12.09 5.06999 12.46 5.02999 12.54C4.99999 12.62 4.91999 12.78 4.72999 13.06C4.58999 13.26 4.42999 13.48 4.22999 13.72C4.01999 14 3.77999 14.27 3.51999 14.54L3.27999 14.79C3.22999 14.84 3.17999 14.89 3.15999 14.91C2.76999 15.28 2.54999 15.79 2.54999 16.32V17.1C2.54999 17.96 3.24999 18.65 4.10999 18.65H8.21999C8.56999 20.41 10.13 21.75 12 21.75C13.87 21.75 15.43 20.42 15.78 18.65H19.89C20.75 18.65 21.45 17.95 21.45 17.1V16.32C21.44 15.78 21.22 15.26 20.86 14.93ZM12 20.25C10.97 20.25 10.1 19.58 9.77999 18.65H14.22C13.9 19.58 13.03 20.25 12 20.25ZM19.88 17.15L4.05999 17.1V16.32C4.05999 16.2 4.10999 16.08 4.22999 15.97L4.60999 15.59C4.88999 15.29 5.15999 14.99 5.39999 14.7C5.62999 14.42 5.81999 14.16 5.98999 13.92C6.18999 13.62 6.33999 13.34 6.43999 13.11C6.58999 12.72 6.69999 12.1 6.76999 11.25C6.81999 10.59 6.83999 9.85 6.82999 9.08V8.9C6.82999 6.06 9.15999 3.75 12.01 3.75C14.86 3.75 17.19 6.05 17.19 8.87V9.08C17.18 9.83 17.2 10.58 17.25 11.24C17.32 12.08 17.42 12.71 17.58 13.1C17.67 13.34 17.82 13.61 18.03 13.91C18.19 14.15 18.39 14.41 18.62 14.69C18.86 14.98 19.13 15.28 19.41 15.58L19.82 15.99C19.91 16.08 19.96 16.19 19.96 16.32L19.88 17.15Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
        </svg>
        <svg
          width="30"
          height="30"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Zm10.45 2.95L16 16l4.95 4.95Z"
            class="icon_svg-stroke"
            stroke="#666"
            stroke-width="1.5"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
        </svg>
        <input placeholder="Search Quora" />
        <button>Try Quora +</button>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="30"
          height="30"
          fill="currentColor"
          class="bi bi-file-person"
          viewBox="0 0 16 16"
        >
          <path
            d="M12 1a1 1 0 0 1 1 1v10.755S12 11 8 11s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"
          />
          <path d="M8 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
        </svg>
        <svg
          width="30"
          height="30"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 2.25C6.62 2.25 2.25 6.62 2.25 12C2.25 17.38 6.62 21.75 12 21.75C17.38 21.75 21.75 17.38 21.75 12C21.75 6.62 17.38 2.25 12 2.25ZM19.34 8.25H15.82C15.31 6.17 14.43 4.78 13.69 3.92C16.16 4.44 18.22 6.07 19.34 8.25ZM14.75 12C14.75 12.83 14.69 13.57 14.59 14.25H9.41C9.31 13.57 9.25 12.83 9.25 12C9.25 11.17 9.31 10.43 9.41 9.75H14.59C14.69 10.43 14.75 11.17 14.75 12ZM12 19.66C11.42 19.17 10.34 17.99 9.72 15.75H14.28C13.66 17.99 12.58 19.16 12 19.66ZM3.75 12C3.75 11.22 3.87 10.47 4.07 9.75H7.9C7.81 10.44 7.75 11.18 7.75 12C7.75 12.82 7.81 13.56 7.9 14.25H4.07C3.87 13.53 3.75 12.78 3.75 12ZM9.72 8.25C10.34 6.01 11.43 4.84 12 4.34C12.58 4.83 13.66 6.01 14.28 8.25H9.72ZM10.31 3.92C9.57 4.78 8.69 6.17 8.18 8.25H4.66C5.78 6.07 7.84 4.44 10.31 3.92ZM4.66 15.75H8.18C8.69 17.83 9.57 19.22 10.31 20.08C7.84 19.56 5.78 17.93 4.66 15.75ZM13.69 20.08C14.43 19.22 15.31 17.83 15.82 15.75H19.34C18.22 17.93 16.16 19.56 13.69 20.08ZM19.93 14.25H16.1C16.19 13.56 16.25 12.82 16.25 12C16.25 11.18 16.19 10.44 16.1 9.75H19.93C20.13 10.47 20.25 11.22 20.25 12C20.25 12.78 20.13 13.53 19.93 14.25Z"
            fill="#666666"
            class="icon_svg-fill_as_stroke"
          ></path>
        </svg>
        <button>Add Question</button>
      </div>

      <!--가운데 레이아웃 flex로 묶기-->
      <div class="section">
        <!--왼쪽 네비게이션 바-->
        <div class="left">
          <!--버튼 리스트들-->
          <div class="buttonlist">
            <button class="btn1">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4.5 12h15M12 4.5v15"
                  class="icon_svg-stroke"
                  stroke="#666"
                  stroke-width="1.5"
                  fill="none"
                  fill-rule="evenodd"
                  stroke-linecap="round"
                ></path>
              </svg>
              Create space
            </button>
            <button class="btn2">
              <img
                class="q-image qu-display--block qu-size--18 qu-minWidth--18"
                src="https://qph.cf2.quoracdn.net/main-thumb-t-3850-100-ydyepulsyncunqitoqtxcgxaatlooxtu.jpeg"
                width="20px"
                height="20px"
                style="
                  box-sizing: border-box;
                  max-width: 100%;
                  position: relative;
                "
              />
              Korean (language)
            </button>
            <button class="btn3">
              <img
                class="q-image qu-display--block qu-size--18 qu-minWidth--18"
                src="https://qph.cf2.quoracdn.net/main-thumb-t-980-100-H0buhDed9OV3rFiJlV9gj5ZOHtCovmDU.jpeg"
                width="20px"
                height="20px"
                style="
                  box-sizing: border-box;
                  max-width: 100%;
                  position: relative;
                "
              />
              Computer Science
            </button>
            <button class="btn4">
              <img
                class="q-image qu-display--block qu-size--18 qu-minWidth--18"
                src="https://qph.cf2.quoracdn.net/main-thumb-t-40375-100-qguthmoqwdjzwyrxbdxiajedxdhtykkl.jpeg"
                width="20px"
                height="20px"
                style="
                  box-sizing: border-box;
                  max-width: 100%;
                  position: relative;
                "
              />
              Mobile Technology
            </button>
            <button class="btn5">
              <img
                class="q-image qu-display--block qu-size--18 qu-minWidth--18"
                src="https://qph.cf2.quoracdn.net/main-thumb-t-1978-100-R8q9yWpMPBqq2PNalousWjlz2ewHeDnW.jpeg"
                width="20px"
                height="20px"
                style="
                  box-sizing: border-box;
                  max-width: 100%;
                  position: relative;
                "
              />
              Technology Trends
            </button>
            <button class="btn6">
              <img
                class="q-image qu-display--block qu-size--18 qu-minWidth--18"
                src="https://qph.cf2.quoracdn.net/main-thumb-t-1393740-100-tjtbwiqofezszbgbqrtunqerutuchpmn.jpeg"
                width="20px"
                height="20px"
                style="
                  box-sizing: border-box;
                  max-width: 100%;
                  position: relative;
                "
              />
              Technology
            </button>
          </div>
        </div>

        <!--가운데 내용-->
        <div class="middle">
          <div class="searchbar">
            <input placeholder="What do you want ask or share?" />
          </div>
          <div class="clickbar">
            <button class="clk1">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g
                  class="icon_svg-stroke"
                  stroke="#666"
                  stroke-width="1.5"
                  fill="none"
                  fill-rule="evenodd"
                >
                  <g transform="translate(9 7)">
                    <path
                      d="M3 6v-.5A2.5 2.5 0 1 0 .5 3"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    ></path>
                    <circle
                      class="icon_svg-fill_as_stroke"
                      fill="#666"
                      cx="3"
                      cy="8.5"
                      r="1"
                      stroke="none"
                    ></circle>
                  </g>
                  <path
                    d="M7.5 4h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-3L9 22v-3H7.5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3Z"
                    stroke-linejoin="round"
                  ></path>
                </g>
              </svg>
              Ask
            </button>
            <br />
            <button class="clk2">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g stroke-width="1.5" fill="none" fill-rule="evenodd">
                  <path
                    d="M18.571 5.429h0a2 2 0 0 1 0 2.828l-9.9 9.9-4.24 1.416 1.412-4.245 9.9-9.9h0a2 2 0 0 1 2.828 0Z"
                    class="icon_svg-stroke"
                    stroke="#666"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    class="icon_svg-fill_as_stroke"
                    fill="#666"
                    d="m4.429 19.571 2.652-.884-1.768-1.768z"
                  ></path>
                  <path
                    d="M14.5 19.5h5v-5m-10-10h-5v5"
                    class="icon_svg-stroke"
                    stroke="#666"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                </g>
              </svg>
              Answer
            </button>
            <br />
            <button class="clk3">
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g fill="none" fill-rule="evenodd">
                  <path
                    d="M18.571 5.429h0a2 2 0 0 1 0 2.828l-9.9 9.9-4.24 1.416 1.412-4.245 9.9-9.9a2 2 0 0 1 2.828 0Z"
                    class="icon_svg-stroke"
                    stroke="#666"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    class="icon_svg-fill_as_stroke"
                    fill="#666"
                    d="m4.429 19.571 2.652-.884-1.768-1.768z"
                  ></path>
                </g>
              </svg>
              Post
            </button>
            <br />
          </div>
        </div>

        <!--오른쪽 내용-->
        <div class="right">
          <h2>오른쪽 광고</h2>
        </div>
      </div>
    </div>
* {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.section {
  background-color: aliceblue;
  display: flex;
}

.left {
  width: 300px;
  height: 740px;
}

.buttonlist {
  margin: 20px 20px 50px 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.btn1,
.btn2,
.btn3,
.btn4,
.btn5 {
  width: 130px;
  height: 60px;
  margin-bottom: 5px;
}

.button-bottom {
  margin-left: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.middle {
  margin: 20px;
  width: 700px;
  height: 100px;
  background-color: white;
  border: 2px gainsboro solid;
  border-radius: 10px;
}

.clickbar {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 0px;
}

.clk1,
.clk2,
.clk3 {
  margin-top: 15px;
  width: 230px;
  height: 40px;
}

.right {
  width: 400px;
  height: 300px;
  background-color: white;
  border: 2px gainsboro solid;
  border-radius: 10px;
  margin-top: 20px;
  margin-right: 150px;
}
반응형
저작자표시 비영리

'WEB-Front end > *웹사이트 만들기 & 토이 프로젝트' 카테고리의 다른 글

[React, node.js] 2차 프로젝트 Trello만들기  (0) 2024.03.06
unsplash API를 활용해서 이미지 검색 어플리케이션 만들기  (0) 2024.02.13
[todolist] HTML, CSS, JAVASCRIPT...ToDo-List  (0) 2023.06.12
유튜브 틀 잡기(1)  (0) 2023.04.22
[스파르타 코딩클럽] 나만의 프로필 링크 페이지 만들기 무료강의 1일차  (0) 2022.07.03

관련글 더보기

댓글 영역

티스토리툴바