회고록 블로그
HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (2)_로그인 페이지 완성 본문
저번 글에 이어서 계속 만들고 있다.
현재 로그인창(index.html) 만드는 중이다.
저번 글:
HTML과 CSS 공부: 혼자 힘으로 카카오톡 클론하기 (1)
생활코딩 HTML과 CSS 강의를 드디어 모두 들었다. 당연히 강의를 듣고 필기한다고 해서 모두 내 것이 되는게 아니기 때문에 뭐라도 만들어보기 위해서 카카오톡 클론 만들기를 시작했다. 큰 의미
cinnamonc.tistory.com
CSS 만들기
2) 로고 사이즈 조절하기
* <img> 태그에서 조절할수도 있지만 CSS에서 사이즈를 조절하기로 했다.
* 이유는 저번에도 썼지만, CSS의 단위(vh, vw)가 필요하기 때문이다. (HTML에서는 먹히지 않았다..ㅠㅠ)
* 만들면서 생각해보니까 화면 크기에 따라 사이즈를 다르게 하는 것보다는 사용자가 설정한 폰트크기에 종속되는게 맞는 것 같기도 하다. 그래서 최상위 요소의 크기에 따라 화면을 맞추기 위해 rem을 쓰기로 했다.
왜 em이 아니라 rem을 쓰는지는 아래의 능력자님 블로그 참고
(em은 부모 요소의 폰트 크기에 영향을 받기 때문에 모두 계산해서 사용해야 하지만 rem은 최상위 요소(html 태그)의 크기에 영향을 받기 때문에 rem으로 사용을 한다 + 기본적으로 브라우저의 폰트크기는 16px이므로 최상위 요소의 기본 폰트크기는 16px 이다)
* 능력자님 글 참고 : nykim.work/85
반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성
프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히
nykim.work
3) form 디자인 수정하기
* 하나씩 margin 등을 조절해줬었는데 생각보다 코드가 길어져서 flex를 사용하기로 했다.
그래서 HTML 파일도 좀 수정했다.
* flex 설명: 능력자님 블로그 참고 heropy.blog/2018/11/24/css-flexible-box/
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F
heropy.blog
4) 아래 '계정 찾기', '비밀번호 초기화' 부분 디자인하기
* 링크도 연결해줘야 한다
* 이 부분은 column 속성을 이용해야하나 했는데, 그러면 빈 공간에서는 클릭이 되지 않아서 padding을 이용했다.
column 속성 참고: www.tcpschool.com/css/css3_expand_multicolumn
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
2021.3.11 15:36 현재 결과물
드디어 겉모습이 얼추 완성되었다.
몇일동안 로그인 페이지 만드는데에만 시간을 쏟았다. ㅠㅠ
하지만 아직 해야할 일이 많다.
<아직 더 해야할 일>
1) 디바이스별로 크기를 다르게 해줄 필요가 있어서 CSS 단위 수정 (적용No)
* 수정하면서 보니까 디바이스별로 맞춰주는 것보다는 사용자가 설정한 폰트 사이즈에 맞춰주는게 좋을 것 같다. (하단 별첨1 참고)
2) '계정'과 '비밀번호' 사이에 있는 줄(line)을 제거 (보류)
* 근데 제거를 못하고 있음.. 선 없애고 싶다 ㅠㅠ
3) 링크 클릭한 후 바뀌는 디자인(카카오계정 찾기, 비밀번호 재설정 부분) 수정 (완료)
* 참고글 : aboooks.tistory.com/88
4) 계정과 비밀번호를 클릭하면 '계정'과 '비밀번호'라는 설명글(?) 지우기 (완료)
* 참고글 : ipwag.tistory.com/11
* 콜론 한개와 콜론 두개의 차이는 하단 별첨2 참고
+추가) 웹페이지 너무 크다 -> 줄여달라는 멘트 추가하기 (완료)
* display로 안보이게 하기 참고글 : webberstudy.com/html-css/css-2/display-and-visibility-property/
* 굳이 hidden이 아닌 none을 사용한 이유도 위 링크에서 능력자님이 언급하신 부분 때문이다. (영역을 차지하고 있기 때문)
* 500px 이하를 기준으로 잡았다. 이유는 없다..
+추가) 폰트 수정하기 (완료)
* 폰트 관련 속성 참고글 : webberstudy.com/html-css/css-1/font-style/
* 웹폰트 추가 관련 참고글 : webclub.tistory.com/261
* 솔직히 폰트는 바꾸고 싶지 않은데 (용량 때문 ㅠㅠ)클론 코딩을 하는 목적이 연습이기 때문에 외부 폰트를 적용하기로 했다.
* google Fonts에서 사용하는 방법을 알려주어서 그냥 그걸로 추가하기로 했다. (@font-face로 추가 안함) (구글 최고)
+추가) 로그인 버튼 클릭 시 색상 변경되도록 하기 (완료)
* transition 속성에 대한 참고글 : www.tcpschool.com/css/css3_transform_transition
+추가) 로고에 마우스 올려두면 움직이도록 애니메이션 주기 (완료)
* animation 속성 관련 참고글 : www.tcpschool.com/css/css3_transform_animation
2021.03.11 18:10 현재 결과물
로그인 페이지를 완성했다. 코드는 마지막에 적어두었다.
스스로 생각하기에 문제점이 있다면, "코드가 비효율적일 수 있다"는 점이 문제일 수 있다
(+ 다양한 모바일 기기(iOS, AOS 등), 웹브라우저(Chrome, IE 등)를 고려하지 않았다는 점..)
class를 마구마구(?) 지정해버렸더니 CSS가 정신없어졌다.
class명도 적절하지 않은게 들어있는 듯..
그래도 처음 치고는 나쁘지 않다.
더 굉장한 기능을 구현하려면 자바스크립트를 배워야 하지 않을까 싶다.
로그인 페이지를 이제 완성했는데 나머지는 언제 완성하지..?
[별첨1] rem으로 단위 지정했을때 결과물
[별첨2] 콜론 두개와 콜론 한개의 차이
콜론 두개를 사용하면 가상요소
developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Pseudo-elements - CSS: Cascading Style Sheets | MDN
Pseudo-elements A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. p::first-line { color: blue; te
developer.mozilla.org
콜론 한개를 사용하면 가상클래스
developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes
Pseudo-classes - CSS: Cascading Style Sheets | MDN
Pseudo-classes A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. button:hover { color: blue; } P
developer.mozilla.org
그러니까 특정 요소만 선택할 때에는 콜론 두개(::)를 사용하고
(e.g. <p> 태그 내에 여러 줄의 정보가 적혀있고, 그 중 첫번째 줄만 선택할 때 등)
전체를 선택할 때에는 콜론 한개(:)를 사용하라는 의미인 것 같다.
(e.g. 버튼이 있는데, 버튼에 마우스를 올려놓았을 때 색상이 변경되도록 할 때 등)
p.s. 앱 개발자가 되고 싶은데 웹부터 공부하고 있는 내 인생 레전드..
코드:
<HTML>
<!DOCTYPE html>
<!-- Description: Kakao PC ver. Clone -->
<html lang="ko" data-dark="false">
<head>
<meta charset="utf-8">
<title>Kakao Talk Clone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Kakao Talk Clone Login View">
<meta name="keywords" content="KakaoTalk, Clone, Login">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="CSS/210309style.css">
<link rel="stylesheet" href="fontello/css/animation.css">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
</head>
<body>
<div class="max_screen">
<p>화면을 500px 이하로 줄여주세요.</p>
</div>
<div class="setting_bar">
<span class="animate-spin" alt="설정버튼" title="설정"></span>
<span alt="최소화버튼" title="최소화"></span>
<span alt="닫기버튼" title="닫기"></span>
</div>
<div id="login_page">
<header class="logo_header">
<img src="logo.png" alt="카카오톡로고" class="logo">
</header>
<section class="login_form" id="login_form">
<form name="loginform" action="#" method="post">
<input type="text" class="id-pw" name="id" alt="ID입력" placeholder="계정" required>
<input type="password" class="id-pw" name="pwd" alt="비밀번호입력" placeholder="비밀번호" required>
<input type="submit" class="loginbutton" value="로그인" alt="로그인버튼">
<label class="auto-login"><input type="checkbox" name="auto_login" value="auto_yes" alt="자동로그인">자동로그인</label>
</form>
</section>
</div>
<div class="forget">
<section class="forget_password">
<a href="#">카카오계정 찾기</a>
<a href="#">비밀번호 재설정</a>
</section>
</div>
</body>
</html><CSS>
body{
font-family: fontello, 'Nanum Gothic', sans-serif, Arial;
background-color: rgb(220, 229, 241);
}
*{
box-sizing: border-box;
}
.max_screen{
display:none;
}
/* 화면 크기가 width:500px 이하가 되도록 조절 */
@media (min-width:501px){
body{
background-color: black;
}
body > *{
display: none;
}
.max_screen{
display:block;
color: white;
font-weight: bold;
}
}
/* 상단 메뉴 조절 */
.setting_bar{
text-align: right;
}
.setting_bar > *{
margin: 3px;
height: 1rem;
color: gray;
}
.setting_bar > *:nth-child(2){
border-left: 1px solid rgb(163, 163, 163);
padding-left: 15px;
}
/* 로고 사이즈, 위치 등 조절 */
.logo{
width: 7rem;
}
.logo_header{
text-align: center;
margin-top: 60px;
margin-bottom: 30px;
}
.logo:hover{
animation-name: logoAnimation;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/* form 큰 디자인 수정 */
form[name="loginform"]{
display: flex;
flex-direction: column;
justify-content: flex-start;
/* 열(column)로 정렬 방법 - 시작점 기준으로 정렬 */
align-items: center;
/* 행(row)에서 item들 정렬 방법 - 가운데 기준으로 정렬 */
/* items가 한 줄 이어서 align-items 사용했음 */
}
/* form 내부 요소들 디자인 수정 */
form[name="loginform"] > *{
width: 17rem;
height: 2.5rem;
font-size: 1rem;
}
.id-pw, .loginbutton{
border: 1px solid rgb(219, 219, 219);
}
.loginbutton, .auto-login{
margin-top: 7px;
color: gray;
}
.id-pw:focus::placeholder{
color: transparent;
/* 계정, 비밀번호 입력창 클릭 시 placeholder 지우기 */
}
/* 로그인 버튼에 마우스 두면 색상 바뀜 */
.loginbutton{
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-in;
}
.loginbutton:hover{
background-color: rgb(46, 97, 207);
color: white;
}
/* 계정 찾기 영역 큰 디자인 수정 */
.forget_password{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
color: gray;
}
/* 계정 찾기 영역 세부 디자인 수정 */
.forget_password{
margin-top: 100px;
font-size: 0.8rem;
}
.forget_password > *:last-child{
border-left: 1px solid rgb(163, 163, 163);
padding-left: 10px;
}
.forget_password > *:first-child{
padding-right: 10px;
}
a:visited, a:link{
color: gray;
text-decoration: none;
}
/* 로고에 마우스 올려둘 때 움직임 주기 */
@keyframes logoAnimation{
0%{
transform: rotateZ(0deg);
}
50%{
transform: rotateZ(10deg);
}
100%{
transform: rotateZ(0deg);
}
}
p.s. animation과 transition이 가장 마음에 든다.
만들면서 느낀점:
HTML, CSS가 초보자에게 배우기 좋은 언어(?)이기는 한데...흥미가 엄청 샘 솟는 분야는 아닌 것 같다..ㅠㅠ
개발을 잘 했었던 것은 아니지만 어쨌든 나름 컴퓨터 관련 학과를 나왔기 때문에 C언어, Java 등을 아주 얕게 배운 적이 있다.
if문, for문, 포인터, 객체지향언어 등등 이런 개념을 잠깐 배웠고 거기에 익숙해져 있었는데...
HTML, CSS를 배울 때에는 그런 문법을 하나도 사용하지 못하다보니 너무 낯설고 어려운 언어(?)였다.
자바스크립트를 배우고 나면 어떨지 모르겠지만
만약 웹개발쪽으로 가게 된다면 프론트엔드는 내가 원하는 길이 아닌 것 같다...
'2. 프로그래밍 언어 공부 > 무엇이든 만들어보기' 카테고리의 다른 글
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (6)_더보기 화면 완성 (0) | 2021.03.25 |
|---|---|
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (5)_채팅목록 완성 (0) | 2021.03.23 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (4)_친구리스트 완성(추후 기능 수정) (0) | 2021.03.16 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (3) (0) | 2021.03.15 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (1) (0) | 2021.03.09 |
