계획세우기
GNB 구역: 공통으로 적용되는 menu bar
Main 구역: 주된 컨텐츠
CTA 구역: user 반응을 유도하는 버튼, 베너 등
웹페이지를 구성하는 구역을 아주 간단하게 나누면 위 세 구역으로 나뉜다. 구역별로 어느 위치에 어떤 태그를 사용해서 코딩을 할 것인지 대략적으로 계획을 세운다.
<!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>띵동코딩 - clon coding</title>
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
font-family: "Pretendard",serif;
}
.gnb {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 1100px;
margin: auto;
height: 60px;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 20px 40px;
font-family: Pretendard;
box-sizing: border-box;
line-height: 1.5;
}
.main > h1 {
font-family: Pretendard;
color: rgb(38, 52, 61);
font-size: 26px;
font-weight: bold;
line-height: 1.5;
letter-spacing: normal;
}
.main > h3 {
font-weight: 700;
font-size: 16px;
line-height: 1.5;
color: rgb(255, 119, 60);
margin-bottom: 10px;
}
.main > img {
width: 1100px;
}
hr {
border-top: none;
border-bottom: 0.5px solid lightgray;
}
.cta {
background-color: white;
width: 1100px;
height: 80px;
border-radius: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 200px;
left: calc(50% - 550px);
box-shadow: 0px 0px 10px 0px lightgray;
}
.cta > p {
font-size: 18px;
margin-left: 120px;
font-weight: 500px;
}
.cta > p > span {
color: #ff773c;
}
.cta > button {
width: 300px;
height: 60px;
margin-right: 120px;
background-color: #ff773c;
border: none;
border-radius: 8px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div class="gnb">
<img scr="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg" alt="logo">
<span>로그인</span>
</div>
<hr>
<div class="main">
<h3>매주 월요일, 내 강의실에 찾아오는<br>온라인 코딩 학습지</h3>
<h1>띵동 코딩이 도착했어요</h1>
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/hero.png" width="1100px;">
</div>
<div class="cta">
<p><span>첫 달 만 원</span> 혜택 특별 연장, 선착순 100명 한정!</p>
<button>만 원으로 시작하기</button>
</div>
</body>
</html>실습을 해보며 새로 알게 된 css 기능은 폰트 적용법, @import url('주소') 그리고 * { font-family: "family-name", generic-family; }, 이다. 주소에서 폰트를 가져와 전체 적용하는 것.
다음 코드는 띵동코딩 로그인 페이지를 만드는 혼자해보기 과제다. 로그인 페이지가 강의에서 보여준 것과는 다른 부분이 있어서 구글을 뒤져가며 했다. 꽤나 재밌었다. 확실히 html이랑 css는 코딩하면서 결과물을 바로바로 확인을 할 수 있으니 시간가는 줄 모르고 몰입하게 됐다.
<!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>
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
font-family: "Pretendard",serif;
}
* {
font-family: Pretendard;
box-sizing: border-box;
line-height: 1.5;
}
.screen {
display: flex;
flex-direction: column;
align-items: center;
}
.wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 400px;
margin: 70px auto auto auto;
padding: 40px 36px;
border-radius: 8px;
border: solid 1px #dbdde0;
}
.main1 {
width: 350px;
padding-left: 10px;
}
.main1 > p {
display: block;
font-size: 22px;
color: #26343d;
}
.main2 {
display: flex;
flex-direction: column;
margin-top: 30px;
padding: 20px;
gap: 10px;
width: 340px;
background: #f8f8f8;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
color: #26343d;
}
.cta1 {
width: 320px;
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
font-family: Pretendard;
border-radius: 10px;
border: none;
background-color: #ffe237;
cursor: pointer;
color: #1c1d1e;
margin-top: 50px;
margin-bottom: 20px;
}
.cta2 {
width: 200px;
display: block;
text-align: center;
font-size: 14px;
font-weight: 500;
font-family: Pretendard;
color: #26343d;
cursor: pointer;
border: none;
background: none;
margin-top: 10px;
}
.note {
margin-top: 30px;
font-weight: 400;
font-size: 13px;
color: #a4a6a9;
}
</style>
</head>
<body>
<div class="screen">
<div class="wrap">
<div class="main1">
<img src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg">
<p>
코딩 강의 고민은 그만,<br>
쉽고 부담없는<br>
온라인 코딩 학습지<br>
</p>
</div>
<div class="main2">
<div>
<span>
<img src="checkmark.jpg" style="width:13px;height:13px;">
일주일에 2시간, 부담 없는 분량
</span>
</div>
<div>
<span>
<img src="checkmark.jpg" style="width:13px;height:13px;">
왕초보 맞춤 눈높이식 설명
</span>
</div>
<div>
<span>
<img src="checkmark.jpg" style="width:13px;height:13px;">
1:1 학습 관리 매니저, 1:1 질문 시스템
</span>
</div>
</div>
<form action="https://www.kakaocorp.com/page/service/service/KakaoTalk" target="_blank">
<button class="cta1" type="submit">카카오로 1초만에 시작하기</button>
</form>
<form action="https://www.google.com" target="_blank">
<button class="cta2">이메일로 시작하기</button>
</form>
<span class="note">* 스파르타코딩클럽 통합 회원으로 로그인 가능합니다.</span>
</div>
</div>
</body>
</html>
coding을 잘하고 싶은 아저씨