HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (1)

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

회고록 블로그

HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (1) 본문

2. 프로그래밍 언어 공부/무엇이든 만들어보기

HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (1)

김간장 2021. 3. 9. 12:24

생활코딩 HTML과 CSS 강의를 드디어 모두 들었다.

당연히 강의를 듣고 필기한다고 해서 모두 내 것이 되는게 아니기 때문에 뭐라도 만들어보기 위해서 카카오톡 클론 만들기를 시작했다.

큰 의미를 두고 카카오톡으로 정한 것은 아니다. 많은 분들이 카카오톡으로 클론 코딩을 하길래..

아무래도 혼자 힘으로 만들다보면 막힐 것 같은데 (+완전 초보)

사람들이 만들어놓은 코드를 참고하면 좀 쉽게 문제가 해결되지 않을까 싶어서 많은 사람들이 클론 코딩한 카카오톡으로 결정했다.

하지만 만들고 싶은 카카오톡 클론은 좀 다른 버전임.

PC버전 카카오톡을 클론하려고 한다.

그래서 어떤 화면들이 필요할까를 고민했고 아래와 같이 정리를 했다.

(아직 github 쓸 줄 몰라서 + 한줄한줄 공부하자는 목적으로 블로그에 정리함)

※ 멘토없이 초보자가 혼자 만드는 코드이므로, 효율적인 코드가 아닐 수 있음

(마치 float나 flex를 놔두고 <table>로 레이아웃을 만드는 것과 같은 비효율적인 코드일 수 있음 주의)

도구: Visual Studio Code

언어: HTML, CSS (언어가 아니지만..)

서버: 없음 (클라이언트 사용)

그 외: 없음

첫번째 페이지. 로그인창 (index.html)

HTML 만들기 : <head> 영역

# 맨땅에 헤딩하기가 쉽지 않아서 NAVER를 참고했다 #

1) 웹페이지의 언어는 korea(=ko), 다크모드 감지는 false로 진행

* 다크모드 감지 true는 나중에 기능 구현하기로 하자

2) 모바일 화면을 고려하여 가상 widnows(=viewport) 설정

* viewport의 너비(width)는 device의 너비(width)로 설정

* 페이지 처음 로딩 시 줌(zoom)은 1.0 (CSS 픽셀 : 기기 픽셀 = 1: 1 임)

* maximum, minimum은 추후 호환 등을 고려하여 추가 No (필요한 정보 최소화하여 추가)

* 사용자가 화면 확대/축소 하지 못하도록 설정하기

3) 모바일 관련 메타데이터는 당장 추가 X

* ios 아이콘, ios 홈아이콘 추가 시 제목 등 정보 설정 No (당장 이것까지 하기에는 난이도 급상승..)

4) <meta http-equiv="X-UA-Compatible" contetn="IE=~~"> 추가

* 과거의 IE를 사용하는 사용자를 위함 (호환성 고려)

* 근데 웹 서버에서 처리해주어도 되는듯 하다. 또한 비표준인 듯 하다. 출처: webdir.tistory.com/38

X-UA-Compatible, IE=edge, 호환성 보기

Internet Explorer 8 버전이 등장하면서 새로운 기능 한 가지를 추가했습니다. 바로 호환성 보기 버튼인데, 이미 주소 표시줄 옆에 있는 종이 모양의 아이콘을 눌러 보신 분도 계실꺼라 생각합니다.

webdir.tistory.com

5) robots.txt(크롤링 제어) 이나 meta name="robots"(인덱싱 제어) 사용하지 않기

* 당장은 검색엔진최적화(SEO) 고민할 정도로 수준급이 아니기 때문에 사용하지 않기로 했다

* 둘의 차이 및 크롤링/인덱싱에 대한 설명 참고 : 능력자님 블로그 www.cnblogs.com/jweb/p/4611456.html

검색엔진의 크롤링과 인덱싱의 차이 (robots.txt 파일과 meta robots 태그의 차이점) - Jweb2 - 博客园

검색엔진의 크롤링과 인덱싱의 차이크롤링 제어는 robots.txt인덱싱 제어는 검색엔진이 검색 키워드에 대한 검색결과를 사용자한테 제공하기 위해서는 크롤러가 끊임없이 온라인 상의

www.cnblogs.com

6) 오픈 그래프(og) 사용 X

* 알아두면 좋을 것 같기는 해서 나중에 정리하기로 했다 (하지만 당장 쓰기에는 실력이 부족..)

7) 별도의 CSS 파일 링크

8) fontello CSS 파일 링크 (~~나중에~~ -> 추가완료)

* 당장은 fontello 사용 안하지만 나중에 사용할 예정이라서.

<!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">
    </head>

※ <head>에 들어갈 속성 관련 글은 능력자님 글 참고

m.blog.naver.com/chrisphotography/221299524540

HTML 에 들어가는 것들

생각보다 내용이 너무 많아 정리가 안됩니다. 주요하게 쓰이겠다 싶은 것 위주로 조금 정리하였습니다.

blog.naver.com

HTML 만들기 : <body> 영역

# 디자인/스타일(CSS 영역)은 나중에 생각하기로 하고 안의 정보 부분(HTML)을 "잘" 표현하는 것을 먼저 코드로 옮기기로 했다 #

1) 카카오톡 PC버전 로그인 창 뜯어보면서 '정보'에 집중하기

* 어떤 정보들이 있는지, 어떤 형태(표, 입력창 등)로 있는지 매의 눈으로 스캔

* 페이지 크기, 색상, 위치 등 일단 무시

* 정보에 집중하는 방법은 '시멘틱 요소'를 기준으로 하자

시멘틱 참고 : developer.mozilla.org/ko/docs/Glossary/Semantics

Semantics - 용어 사전 | MDN

Semantics 프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML

developer.mozilla.org

1) 로고는 이미지 파일로, '닫기' '최소화' 버튼 등은 fontello 이용하기

2) 로고 이미지의 크기는 CSS에서 지정하기

* <img> 태그에서도 속성으로 지정할 수 있고, 이미지가 많을수록 스크롤이 무한정 내려가서 <img> 태그에서 지정하는게 좋다고는 들었지만 <img> 태그에서 크기를 지정하면 CSS의 단위인 vw를 사용하지 못하는 것을 확인했기 때문이다..ㅠ

3) 로그인 폼 만들기

* 나중에 자바스크립트로 만들게 될 것 같지만 지금은 배운게 HTML, CSS 뿐이니 이걸로 만들기로 하자..

* 계정을 저장해놓고 리스트박스 형태로 보여주는 부분이 있는데(아래 그림) 만들지 않을 예정 (ID 입력창에 입력은 가능하면서 리스트 박스 만드는게 난이도 급상승..)

4) ID와 패스워드를 입력받는 부분은 placeholder로 설명(?)글 남겨두기

일단 완성된 모습은 대충 이랬다.

역시 디자인이 없어서 예상대로 아주 별 볼일 없음.. ㅎ

CSS 만들기

# 이제 CSS를 만들어줄 차례인 것 같다. 로그인 화면 하나 만드는데 정말 오래걸린다. 중간중간 id와 class도 추가해줘야 할 것 같다. #

1) 일단 위에 '닫기', '최소화' 등 상단 버튼을 오른쪽으로 좀 옮겨줘야겠다

...
        <div class="setting_bar">
            <span class="setting" alt="설정버트" title="설정">&#xe803</span>
            <span class="minimization" alt="최소화버튼" title="최소화">&#xe804</span>
            <span class="close" alt="닫기버튼" title="닫기">&#xf2d1</span>
        </div>
...

<- 이 부분을 말하고 있는 것이다.

* 각각 <span> 태그를 부여해주고 페이지 오른쪽으로 이동시키자 (사이즈 등도 조절)

* "div"는 레이아웃 나누기 용도, "p"는 단락 나누기, "span"은 인라인이라고 한다 (또한 span 밑에 div 등은 못 들어간다고 한다)

(p 하위에 div가 못 들어가는 것처럼)

* "flex"를 써보고 싶지만, <span>은 굳이 그렇게 까지는 필요없는 것 같다. 그래서 text-align으로 옮기기로 결정

능력자님 참고자료: codingbroker.tistory.com/60

[HTML, CSS] div 자식 요소 가운데 정렬하는 방법 - margin, text-align, flexbox

HTML에서 div 내에 있는 자식 div를 가운데 정렬하는 방법입니다 여러가지 방법이 있지만 자주 쓰이는 3가지 방법으로 진행해보겠습니다. margin text-align flexbox 다음과 같이 outer div와 자식요소인 inner

codingbroker.tistory.com

※ 주의!
<span>에게 text-align를 적용해봤는데 계속 적용이 안되어서 왜 그러지.. 왜 그러지.. 하다가 알아냈다.
text-align은 block(div, p 등) 요소에 적용되는 것이었다.
inline 요소에는 적용 안됨

3/9 19:37 현재 결과물

(1) 상단에 설정, 닫기, 최소화 버튼만 만들어졌다.. (ㅠㅠ)

(2) 사이즈 조절이 좀 필요해보인다. 너무 작다.

> fontello의 아이콘들은 font로 인식 되는가보다 (font-size로 사이즈 조절해야함)

(3) 계속 회전하도록 만드는 코드는 좀 더 공부해야할 것 같다.

만들수록 좀 더 정교하게 만들 수 있는 언어를 배우고 싶다는 생각이 들긴 한다.

HTML:
...
        <div class="setting_bar">
            <span class="animate-spin" alt="설정버튼" title="설정">&#xe803</span>
            <span alt="닫기버튼" title="닫기">&#xf2d1</span>
            <span alt="최소화버튼" title="최소화">&#xe804</span>
        </div>
...

CSS: 
.setting_bar{
    text-align: right;
}
.setting_bar > * {
    margin: 3px;
}
.setting_bar > *:nth-child(2){
    padding-left:10px;
    border-left: 1px solid rgb(163, 163, 163);
}

설명1) 위의 상단 버튼들은 별도의 class를 각각 지정해줘서 움직이기 보다는 CSS의 선택자를 잘 이용해서 디자인했다.

* 만약에 '최소화'와 '닫기' 버튼 앞, 뒤, 중간에 다른 버튼을 더 추가하면 전체적으로 수정해줘야 할 것 같아서이다.

설명2) 세 개의 버튼(아이콘)을 div로 묶어서 오른쪽 정렬로 해주었다.

설명3) 각 버튼들의 마진(margin)을 3px로 정리해주었다. 선택자는 div 밑에 있는 자식요소를 모두(*) 선택하는 방법으로 썼다.

* 굳이 단위를 'px'로 한건 각각의 아이콘 사이의 간격을 딱히 화면의 크기에 따라 가변적으로 변경해주기 싫어서..

* class로 각각 margin을 조절해도 좋지만 나중에 아이콘이 늘어나면 class를 또 각각 지정해줘야 하니까 귀찮아서..

설명4) '설정' 버튼과 '최소화' 버튼 사이에 작은 줄이 있는데 이는 선택자 nth-child(2)를 이용해서 만들어주었다.

* 역시나, '최소화' 버튼의 왼쪽에만 줄을 그어줄 수 있었지만, 나중에 버튼이 추가될 것을 고려해서 '최소화' 버튼에만 종속되도록 만들고 싶지 않았다.

현재까지 만들어진 코드는 아래와 같다.

글이 너무 길어질 것 같아서 여기서 글을 하나 마무리 짓고 다른 게시글에서 이어서 하기로 하자..

현재 진행상황:
1) 카카오톡 뜯어보기 -> '로그인창'에서 '정보'에 집중해서 HTML 문서 작성하기 (완료)
2) 로그인창 상단의 아이콘들, CSS로 디자인하기 (완료)

<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">
    </head>
    <body>
        <div class="setting_bar">
            <span class="animate-spin" alt="설정버튼" title="설정">&#xe803</span>
            <span alt="닫기버튼" title="닫기">&#xf2d1</span>
            <span alt="최소화버튼" title="최소화">&#xe804</span>
        </div>
        <div class="login">
            <header class="logo">
                <img src="logo.png" alt="카카오톡로고" class="logo">
            </header>
            <section class="login_form">
                <form name="loginform" action="#" method="post">
                    <p>
                        <input type="text" name="id" alt="ID입력" placeholder="계정" required><br>
                        <input type="password" name="pwd" alt="비밀번호입력" placeholder="비밀번호" required>
                    </p>
                    <p><input type="submit" value="로그인" alt="로그인버튼"></p>
                    <p><input type="checkbox" name="auto_login" value="자동로그인" alt="자동로그인">자동로그인</p>
                </form>
            </section>
            <section class="forget_password">
                <p>카카오계정 찾기</p>
                <p>비밀번호 재설정</p>
            </section>
        </div>
    </body>
</html>

<CSS>

body{
    font-family: fontello;
    background-color: rgb(220, 229, 241);
}
.setting_bar{
    text-align: right;
}
.setting_bar > * {
    margin: 3px;
}
.setting_bar > *:nth-child(2){
    padding-left:10px;
    border-left: 1px solid rgb(163, 163, 163);
}

'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버전 클론하기 (2)_로그인 페이지 완성 (0)	2021.03.10

'2. 프로그래밍 언어 공부/무엇이든 만들어보기' Related Articles

Comments

회고록 블로그

HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (1) 본문

HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (1)

첫번째 페이지. 로그인창 (index.html)

HTML 만들기 : <head> 영역

HTML 만들기 : <body> 영역

CSS 만들기

'2. 프로그래밍 언어 공부 > 무엇이든 만들어보기' 카테고리의 다른 글

티스토리툴바