간단한 로그인 페이지 (정적인 페이지)를 만들어보자
먼저, 메인 페이지 구역을 나눈다.
1) GNB 구역 ( Global Navigation Bar)
2) Main 구역
3) CtA 구역 ( Call to Action)
Cta 구역을 구현하기 위해서는 위 아래로 스크롤함에 관계 없이 항상 보여지는 구역을 구현하면 된다.
position: fixed;
bottom: 10px;위 코드를 작성하면 해당 구역을 아래에서 10px 떨어진 곳에 픽스되어 스크롤에 관계없이 항상 따라다니게 된다.
cta 구역을 페이지의 가운데로 오게 하고 싶다면 left 속성을 추가해주면 된다.
이 때는
left: calc(50% - 350px);calc(50% - width의 반 px) 을 해주면 된다.
간단한 로그인 페이지 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>띵동코딩 - 로그인</title>
</head>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
* {
font-family: "Pretendard", serif;
}
.wrap {
width: 300px;
margin: 50px auto auto auto;
border: 1px solid lightgray;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 80px 50px 50px 50px;
border-radius: 10px;
}
.text > img {
width: 70px;
height: 46px;
}
.text {
margin-right: auto;
margin-bottom: 30px;
}
p {
font-size: 22px;
color: rgb(38, 52, 61);
}
button {
width: 270px;
height: 50px;
border-radius: 8px;
border: none;
}
.buttons {
height: 120px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.kakaoButton {
background-color: #ffe812;
font-size: 16px;
font-weight: bold;
}
.emailButton {
background-color: white;
}
</style>
<body>
<div class="wrap">
<div class="text">
<img
src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg" />
<p>
매주 월요일, <br />
내 강의실에 찾아오는 <br />
코딩 학습지
</p>
</div>
<div class="buttons">
<button class="kakaoButton">카카오로 1초만에 시작하기</button>
<button class="emailButton">이메일로 시작하기</button>
</div>
</div>
</body>
</html>
예시 사진)
'Computer Programming > Javascript' 카테고리의 다른 글
| 자바스크립트 자료구조 Map과 Set Object의 사용 (0) | 2023.06.12 |
|---|---|
| 자바스크립트의 일급 객체(First-class Function)로서의 함수 (0) | 2023.06.12 |
| JavaScript의 발전 및 특징(+ AJAX | XML 용어 정리) (0) | 2023.06.12 |
| 🎮 자바스크립트로 2D 게임 개발하기 (블럭맞추기) | canvas, JQuery, localStorage 사용 (0) | 2023.06.06 |
| JQuery - $( document ).ready() (0) | 2023.05.09 |
