레이아웃 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으로 들어갈 내용만 작성하면 끝입니다. 감사합니다.
'Node.js > Express.js' 카테고리의 다른 글
| [Toy Project - Omuk] 9. 컨트롤러 분류 (0) | 2022.09.05 |
|---|---|
| [Toy Project - Omuk] 8. 데이터 베이스 쿼리 작성 (0) | 2022.09.05 |
| [Toy Project - Omuk] 6. 라우팅 분리 (0) | 2022.09.02 |
| [Toy Project - Omuk] 5. 데이터베이스 연결 - PostgreSQL (0) | 2022.09.02 |
| [Toy Project - Omuk] 4. 미들웨어 추가 (0) | 2022.08.31 |
