[Toy Project - Omuk] 7. HTML 구조 작성(레이아웃)

Node.js/Express.js

[Toy Project - Omuk] 7. HTML 구조 작성(레이아웃)

턴태 2022. 9. 3. 14:28

레이아웃 HTML 구조 작성

레이아웃을 조금 더 확실하게 작성하고자 HTML을 수정하겠습니다.

<html>

  <head>
    <title>Omuk</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Seongtae Lee" />
    <meta name="description" content="오늘 먹을 먹거리 추천 및 사이트 연동" />
    <meta
      name="keywords"
      content="먹거리, 점심메뉴, 저녁메뉴, 저메추, 점메추"
    />
    <link rel="stylesheet" href="/stylesheet/style.css" />
  </head>

  <body>
    <header>
      <div class="inner top">
        <div class="header-container">
          <div class="brand">
            <a href="/">
              <img class="logo" src="/image/logo.png" alt="logo" />
            </a>
          </div>
          <div class="search">
            <div class="search-container">
              <form id="search-form" action="/search" method="post">
                <div class="search-box">
                  <label for="search-menu"></label>
                  <input
                    id="search-menu"
                    type="text"
                    name="menu"
                    placeholder="검색어를 입력해주세요."
                  />
                </div>
                <button id="search-btn" type="submit" class="btn">검색</button>
              </form>
            </div>
          </div>
          <div class="sign">
            <div class="sign-container">
              <a href="/auth/signin">로그인/회원가입</a>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="division-bar"></div>
    <main>
      <div class="inner main">
        <div class="container">
          {{{body}}}
        </div>
      </div>
    </main>
  </body>

</html>

CSS 작성

css 를 작성하겠습니다. css 작성이 제일 싫어요...

@font-face {
  font-family: "Pretendard-Regular";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}

*,
:after,
:before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header,
main {
  width: 1024px;
  margin: 0px auto;
  font-size: 10px;
  font-family: "Pretendard-Regular";
}

div {
  display: block;
}

/* @media all and (min-width: 1024px) {
  body {
    max-width: 1024px;
    margin: 0 auto;
  }
} */

header {
  margin: 0px auto 20px;
}

.inner .header-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 1024px;
  height: 80px;
  letter-spacing: -0.33px;
}

.inner .header-container .brand {
  display: flex;
  align-items: center;
  height: 63px;
}

.inner .header-container .brand .logo {
  height: 63px;
}

.inner .header-container .search {
  position: relative;
  width: 1024px;
}

.inner .header-container .search .search-container {
  display: flex;
  position: absolute;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgb(55, 175, 10);
  border-radius: 10px;
  padding-left: 14px;
  left: 250px;
  top: -20px;
  width: 400px;
  height: 40px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(247 247 247) 0px 0px 0px 1px inset;
}

.inner .header-container .search .search-box {
  display: inline-block;
}

.inner .header-container .search-box input {
  width: 300px;
  font-size: 16px;
  letter-spacing: -0.33px;
  border: none;
  outline: none;
}

.inner .header-container .search .btn {
  position: relative;
  right: 3px;
  cursor: pointer;
  border: none;
  background: none;
}

.inner .top .sign {
  position: relative;
  /* width: 1024px; */
  left: 100px;
  margin: 0px auto;
}

.inner .header-container .sign-container {
  margin: 0px auto;
  width: 100px;
}

.inner .header-container .sign-container a {
  font-size: 16px;
  text-decoration: none;
  color: rgb(50, 50, 50);
}

.division-bar {
  position: relative;
  top: -20px;
  margin: 0px;
  width: initial;
  border-bottom: 0.5px solid rgb(110, 110, 110);
}

거의 몇 시간을 끙끙 싸매고 만든 느낌입니다. 프런트엔드, UI/UX 안 가길 정말 x 100 잘했다고 생각합니다.

결과물입니다.

이제 main으로 들어갈 내용만 작성하면 끝입니다. 감사합니다.

저작자표시 비영리