Sign Up Screen - HTML 생성 및 작성
* index.html : 대부분의 웹 서버가 디폴트로 index.html을 찾도록 설정되어 있음.
* [단축키]
| ! → Enter키 | HTML 기본틀 생성 |
| ctrl + / | 주석 |
| link:css → Enter키 | link 형식 생성 |
<!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>KokoaTalk Clone</title>
</head>
<body>
<!-- Status Bar -->
<div id="status-bar">
<div class="status-bar_column">
<span>No Service</span>
<!-- 와이파이 아이콘 -->
</div>
<div class="status-bar_column">
<span>10:04</span>
</div>
<div class="status-bar_column">
<span>95%</span>
<!-- 배터리 아이콘 -->
<!-- 충전 아이콘 -->
</div>
</div>
<!-- Header -->
<header class="welcome-header">
<h1 class="welcoome-header__title">Welcome to KokoaTalk</h1>
<p class="welcome-header__text">If you have a Kokoa Account, log in with your email or phone number.</p>
</header>
<!-- Login Screen -->
<form class="login-form">
<input type="text" placeholder="Email or phone number"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Log In"/>
<input type="submit" value="Sign Up"/>
<a href="#">Find Kokoa Account or Password</a>
</form>
</body>
</html>
Sign Up Screen - 아이콘 설정
- 아이콘 설정하는 방법
https://codingrecord2209.tistory.com/69
[HTML] 아이콘 추가
무료 아이콘 사이트 - Heroicons https://heroicons.com/ Heroicons Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. heroicons.com - Font Awesome https://fontawesome.com/ Font Awesome Th..
codingrecord2209.tistory.com
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
<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>KokoaTalk Clone</title>
</head>
<body>
<!-- Status Bar -->
<div class="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<i class="fa-solid fa-wifi"></i>
</div>
<div class="status-bar__column">
<span>10:04</span>
</div>
<div class="status-bar__column">
<span>95%</span>
<i class="fa-solid fa-battery-three-quarters"></i>
<i class="fa-solid fa-bolt"></i>
</div>
</div>
<!-- Header -->
<header class="welcome-header">
<h1 class="welcome-header__title">Welcome to KokoaTalk</h1>
<p class="welcome-header__text">If you have a Kokoa Account, log in with your email or phone number.</p>
</header>
<!-- Login Screen -->
<form class="login-form">
<input type="text" placeholder="Email or phone number"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Log In"/>
<input type="submit" value="Sign Up"/>
<a href="#">Find Kokoa Account or Password</a>
</form>
<script src="https://kit.fontawesome.com/917b690364.js" crossorigin="anonymous"></script>
</body>
</html>
Sign Up Screen - reset.css
- reset.css
: 브라우저는 알아서 html에 margin을 적용시키는 데, 이걸 없애주는 코드.
1. 아래 사이트에 들어가서 코드를 복사한다.
2. reset.css 파일을 생성한 후, 복사한 코드를 입력한다.
3. 사용할 .css 파일에 reset.css 파일을 import하여 사용한다.
https://cssdeck.com/blog/scripts/eric-meyer-reset-css/
Eric Meyer’s “Reset CSS” 2.0 | CSS Reset
One of the pioneers of the method, Eric Meyer's CSS Reset is still in use on millions of websites today. Find it and others, with full guides and docs, on CSSReset.com
cssdeck.com
Sign Up Screen - Font 설정
- Font 설정하는 방법
https://codingrecord2209.tistory.com/70
[CSS] Font 설정
무료 Font 사이트 - Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Font 설정 1. 사이트에 접속해 원하는 폰..
codingrecord2209.tistory.com
Sign Up Screen - Status Bar CSS
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import "reset.css";
body{
font-family: 'Open Sans', sans-serif;
}
.status-bar {
display: flex;
justify-content: center;
padding: 5px;
}
.status-bar__column {
width: 33%;
}
.status-bar__column:first-child span {
margin-right: 5px;
}
.status-bar__column:nth-child(2) {
display: flex;
justify-content: center;
}
.status-bar__column:last-child {
display: flex;
justify-content: flex-end;
align-items: center;
}
.status-bar__column .fa-battery-three-quarters {
margin: 0px 5px;
}+ 추가 설명
- .status-bar {
display: flex;
justify-content: center;
padding: 5px;
→ <div> 3개가 나눠서 위치하고, 위와 간격두도록 구현.
- .status-bar__column:first-child span {
margin-right: 5px;
}
→ 'No Service'와 와이파이 아이콘 간의 간격 설정.
- .status-bar__column:nth-child(2) {
display: flex;
justify-content: center;
}
→ 시간 중앙에 위치하도록 설정.
- .status-bar__column:last-child {
display: flex;
justify-content: flex-end;
align-items: center;
}
→ 세번째 colum 끝에 위치하도록 설정.
- .status-bar__column .fa-solid fa-battery-three-quarters {
margin: 0px 5px;
}
→ 배터리 옆 간격 조절.
Sign Up Screen - Welcome Header CSS
- status-bar.css 분리
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@import "reset.css";
@import "status-bar.css";
body{
font-family: 'Open Sans', sans-serif;
}
.welcome-header {
margin: 90px 0px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 700;
}
.welcome-header__title {
margin-bottom: 40px;
font-size: 25px;
}
.welcome-header__text {
width: 60%;
opacity: 0.7;
font-weight: 400;
}+ 추가 설명
- .welcome-header {
margin: 90px 0px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 700;
}
→ 글 위아래 간격 설정.
→ 글 중앙에 오도록 설정.
→ 좌표축 설정.
→ 중앙에 위치하도록 설정.
→ 글 두께 설정.
- .welcome-header__title {
margin-bottom: 40px;
font-size: 25px;
}
→ 글 아래 간격 설정.
→ 글씨 크기 설정.
- .welcome-header__text {
width: 60%;
opacity: 0.7;
font-weight: 400;
}
→ 텍스트 차지하는 공간 설정.
→ 설명글 회색으로 설정.
→ 글 두께 설정.
결과물
'클론코딩 > 노마드코더 코코아톡' 카테고리의 다른 글
| [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #6 Setting Screen, Chat Screen (0) | 2022.09.28 |
|---|---|
| [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #5 수정 및 추가 기능 구현 (0) | 2022.09.28 |
| [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #4 Chats Screen, Find Screen, More Screen (0) | 2022.09.27 |
| [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #3 Friends Screen (2) | 2022.09.26 |
| [클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #2 Sign Up Screen (0) | 2022.09.23 |
댓글