본문 바로가기
BIZ/chat

카카오톡 클론 코딩

피고녀 2020. 4. 23. 14:40

[Git]

  Git에서 알아야 할 것

    - repository : 코드를 저장하는 폴더 → Git은 repository를 추적

    -  commit : 깃 파일의 보관함으로 무엇이 변경되는지 기록

    -  branch : 마스터의 복사판으로 새로운 것을 테스트 해보고 싶을 때 사용

 

  Git VS GitHub

    · Git : 코드 변경사항을 기록하는 시스템

    · GitHub : 깃을 업로드하고 관리하는 플랫폼

      → bitbucket : 사적인 깃 관리가 무료로 가능함

 

※ GitHub Desktop

https://desktop.github.com 

 

GitHub Desktop

Simple collaboration from your desktop

desktop.github.com

[HTML]

  · mark-up 언어라는 것이 중요! //단순 텍스트 언어

  · 브라우저에게 각각이 무엇을 뜻하는지 알려주기 위해 작성하는 것 //tag로 작성할 것임

  · 태그 <태그명 속성 = "값">내용</태그명>

  ※ 웹서버들이 index 파일을 제일 먼저 찾도록 설계되어있다. 디폴트 값으로 index파일을 생성한다.

 

<!DOCTYPE html>

  · self-contained 태그로 혼자 스스로 열고 닫는 태그이다.

 

<head>

  · 유저에게 보이지 않는 태그로 브라우저에게 내 웹사이트에 관한 필요한 정보를 제공한다.

 

<meta>

  · 추가정보에 관한 태그

    ex)<meta charset="utf-8"> : UTF-8 방식의 encoding으로 해당 문서를 작성할 것

        <meta name="description" content="welcome my kakao clone"> : 구글에서 검색시 설명

 

semantic / non-semantic 태그

  · semantic tag : 의미가 있는 태그

  · non-semantic tag : 의미가 없는 태그

 

id / class

  · id : 고유하고, 1개만 생성 가능

  · class : 반복해서 여러번 사용 가능

 

[CSS]

  - 어떻게 생겨야 하는지 알려주는 언어

 

1. CSS 작성법

/* css == selector / property */
h1 {
	property-name : value;
}
.class {
	property-name : value;
}
#id {
	property-name : value;
}

2. 적용 방식

  1)inline 방식

    - 태그 사이에 style태그를 집어넣는 방식  → 추천하지 않는 방식

  2)external 방식

    - 새로운 css파일을 만들고, 작성하는 방식

    - <link href="style.css" rel="stylesheet">과 같이 html문서 head에 링크를 시켜놓기만 하면 된다. → 효율적 

 

3. BOX

  - CSS를 배울 때 가장 먼저 이해해야 할 것은 많은 element들이 box라는 사실이다. → F12번으로 확인 가능

  1)contents

  2)margin

  3)border

  4)padding

  - .box>.inside-box

<div class="box">
	<div class="inside-box"></div>
</div>

4. 속성

  1) display

    · block : element가 크기와 상관없이 그 옆에 다른 element가 위치하는 것을 허용하지 않는 것

    · inline-block : 박스의 폭, 높이가 존재하고 그 옆에 서로서로 놓을 수 있음

      → 인라인과 같은 설정값을 원하면서 동시에 박스 형태를 유지하고 싶을 때 사용하는 것

    · inline : 박스의 모든 property 설정값을 지우고 내가 작성한 박스의 폭, 높이 만큼의 스타일만 적용

 

  2) position

    - top/bottom/right/left로 위치를 지정할 수 있다.

    ① static : element를 거기 높으면 거기 있을 것이다.

      ※ 디폴트로 모든 박스는 포지션이 static이다.

    ② fixed : element가 그 위치에 오버랩해서 고정되어 스크롤해도 볼 수 있다.

    ③ absolute : relative에 상대적으로 포지션을 잡는 것

      - fixed와 비슷. 어디에든 붙일 수 있지만, 스크롤한다고 보이지 않는다.

      - absolute가 설정되면 html상에서 해당 element와 관계가 있는 element를 살펴보고 이에따라 postion이 결정됨

        단, relative 포지션이 없을 경우 absolute는 문서의 본문 body에 맞춰 포지션을 잡는다.

      - 따라서 absolute 포지션을 부모 element에 상대적으로 사용하려면,

        부모 element에 꼭 relative 포지션을 먼저 설정해 주어야 한다. 자식 element는 부모 element안에 위치하게 된다.

    ④ relative : 부모 박스라고 설정하는 과정

 

  3)flex

    - 자동으로 완성되는 그리드 

    - 부모 컨테이너를 플렉스로 선언하면, 그 안에 종속된 자식 박스들을 움직일 수 있기 때문에

      각 박스에게 일일히 명령할 필요가 없다.

    ① flex를 사용할 때는 부모 클래스에만 적용한다. ex)display:flex;

      - flex를 쓰면 자동으로 박스가 inline-block으로 되어 보여진다.

    ② justify-content: 수평 방향 정렬 방식

      - center : 컨텐츠 가운데 정렬

      - space-between  : 컨텐츠를 같은 간격으로 정렬

      - space-around : 컨텐츠 뿐만 아니라 주변도 같은 간격으로 정렬

    ③ align-item : 수직 방향 정렬 방식

      - center : 아이템 가운데 정렬

      - flex-end : 아이템을 같은 간격으로 정렬

    ④ flex-direction : 컨텐츠 추가 방향 결정

      - row : 수평 방향으로 추가 → default 값, justify-content가 수평, align-item: 수직 으로 적용됨 

      - column : 수직방향으로 추가 → justify-content가 수직, align-item: 수평 으로 적용됨

    ⑤ flex-wrap : 박스를 포장하는 방식

      - wrap : 폭을 유지하고 박스의 수가 많아지면 밑으로 박스를 떨어뜨리고 싶을 때 작성한다.

      - no-wrap : 디폴트 값이고 폭은 무시하고 박스들의 크기가 줄어든다.

    ⑥ flex-direction : 박스의 순서

      - row-reverse : 박스의 순서가 반대로 나온다.

      - wrap-reverse : 반대방향으로 그리드 방식을 볼 수 있다.

 

  4) 기타

    ① cursor

      - allowed : 손가락 표시

      - not-allowed : X 표시

    ② vh : view for height

 

5. pseudo-selector(가상 셀렉터)

  - 셀렉터이나 element가 아닌 것 ex)input[type='submit']{}

  1) :child

    - .box:last-child : 마지막 박스 선택

    - .box:first-child : 첫번째 박스 선택

    - .box:nth-child : n번째 박스 선택

  2) input + .box : input태그의 형제 box 

  3) input > .box : input태그의 직계 box 선택

  4) 필수 입력찬인 경우 required를 사용

 

6. css status

  1) active : 클릭할 때 상태가 변하게 하는 것

  2) hover : 그 위에 뭔가 올라가면 변하게 하는 현상

  3) focus : 누군가가 형식이나 링크를 선택하거나 활성화 // 입력할 때 주로 사용

  4) visited : 클릭했던 적이 있는 경우 표시하는 것

 

7. 애니메이션

  - 키 프레임을 생성한다.

.box{
  animation:1.5s scaleAndRotateSquare infinite ease-in-out;
}

@keyframes scaleAndRotateSquare{
  from {
    transform : none;
  }
  to {
    transform : rotate(1turn) scale(.5, .5);
  }
}

 from, to 대신 0% 50% 100% 등등으로 나눠 적을 수 있다.

 

8. 트랜지션

  - 하나의 state에서 다른 state로 넘어갈 때 나타나는 효과

  - 사용방법 : 무엇을 변경할 지 적어주면 됨

    ex) transition : background-color 5s ease-in-out;

  - 1개 이상의 설정값을 바꾸고 싶다면

    ex) transition : all 5s ease-in-out;

  - 트랜지션은 어떤 state가 바뀔 때 적용되는 것으로

    state는 hover, active, focus, visited 등이 있다.

 

9. 트랜스포메이션

  - html 문서의 element들을 변경, 모습이 변하는 효과를 뜻함

  - 사용 방법

    ex) transform : rotate(20deg);

 

10. 미디어쿼리

  - 사용 방법

    ex) @media screen and (최소) and (최대)

         최소 : min-width:320px; 최대 : max-width : 640px;

  1)휴대폰 모드

    ① landscape 모드

        - and (orientation:landscape)

    ② portrait 모드

        - and (orientation:portrait)

 

[실습]

  · div.header__top+div.header__bottom // emmet 단축키

    → 자동으로 클래스 이름이 header__top, header__bottom인 div가 생성된다.

  · font awesome에 있는 Icon 사용

    - https://www.bootstrapcdn.com/fontawesome/ 

    - Font Awesome CSS 링크를 복사하고 head 사이에 넣는다. (title 태그 위)

  · div.profile__actions*2>span.profile_action-circle(i,fa)+span.profile

<div class="profile__actions">
	<span class="profile_action-circle"></span>
    <i class="fa"></i>
    <span class="profile"></span>
</div>
<div class="profile__actions">
	<span class="profile_action-circle"></span>
    <i class="fa"></i>
    <span class="profile"></span>
</div>

  · flex-direction:row; justify-content:space-between; align-item:flex-start

    - 화면 너비에 맞춰 자동으로 박스 사이의 폭이 줄어든다.

  · div.box{$}*10 : class가 box인 div 태그 내에 1~10까지 입력된 10줄이 출력된다.

 

1. 만들고자하는 화면을 파악 후 해당의 이름을 지정해 html 파일을 생성한다.

  - 공통된 부분은 무엇이 있는지 파악한다.

 

2. 화면별 html 코딩

  - 기본적인 html 코딩 폼을 작성 후, body 영역을 크게 나누며 클래스로 명칭을 지정해준다.

<body>
  <header class="top-header">
  </header>
  
  <main class="friends">
  </main>
  
  <nav class="tab-bar">
  </nav>
</body>

  - 위 body 영역을 나눈 부분 안으로 들어가 해당 영역을 나눈다.

<header class="top-header">
  <div class="header__top">
  </div>
  
  <div class="header__bottom">
  </div>
</header>

  - 세부 html을 진행한다.

<header class="top-header">
  <div class="header__top">
    <div class="header__column">
      <!-- 비행기 아이콘 필요 -->
      <i class="fa fa-fighter-jet"></i>
      <!-- 와이파이 아이콘 필요 -->
      <i class="fa fa-wifi"></i>
    </div>
    <div class="header__column">
      <span class="header__time">18:38</span>
    </div>
    <div class="header__column">
      <!-- 달 아이콘 -->
      <i class="fa fa-moon-o"></i>
      <!-- 블루투스 아이콘 -->
      <i class="fa fa-bluetooth"></i>
      <span class="header__battery">66%
        <!-- 배터리 아이콘 -->
        <i class="fa fa-battery-three-quarters"></i>
      </span>
    </div>
  </div>
  
  <div class="header__bottom">
    <div class="header__column">
      <span class="header__text">Manage</span>
    </div>
    <div class="header__column">
      <span class"header__text">Friends
        <span class="header__number">1</span>
      </span>
    </div>
    <div class="header__column">
      <i class="fa fa-cog fa-lg"></i>
    </div>
  </div>
</header>

※ 클래스 명 지정

1) 부모__자식

2) 요소-이름(단어 분리)

 

3. CSS를 진행한다.

  - 한 화면씩 html과 CSS를 매핑하는 방법도 있겠지만 노마드 코더에서 진행하던 방식을 따르기로 했다.)

  - html에는 style.css 하나만을 연결한다.

  - 추가적으로 CSS를 작업하며 style.css에 @import 'CSS파일명.css'; 시켜준다.

  - 화면 결과물을 실시간으로 확인하며 CSS를 작업해준다.

 

html 작업

  - 우선 header 영역을 header__top과 header__bottom으로 나누었다.

  - 그 내부에 div로 class명을 지정해준 뒤 다시 재 영역을 나누었다.

  - 그리고 세부 항목에 들어갈 정보를 입력해줬다.

  - 글씨가 들어가는 항목들은 span을 사용해 입력해줬다.

 

  - main class="friends" 부분도 내부를 div로 나눠준 뒤 클래스를 통해 명칭을 입력해준다.

  - div 내부에서도 section, header, div를 사용해 영역을 나눠 작성한다.

 

  - nav="tab-bar" 부분은 a 태그를 통해 구분을 나눠줬다.

 

CSS 작업

  - 초기 세팅 파일인 reset.css 파일을 연결 후 작업을 진행한다.

  - 공통되는 header 부분은 header.css

    글꼴 및 body 관련 지정은 global.css

    friends로 줄로 프로필 나오는 부분은 friends.css

    tab-bar 부분은 navigation.css

  - display : flex를 사용해 작업

 

[참고 사이트]

  · flex 실습 사이트

    - flexboxfroggy.com/#ko

  · 가상 셀렉터 실습

    - http://www.topdesignagencies.com/nth-test/ 

  · 글꼴 적용

    - fonts.google.com

  · 디자인 도구

    - 색상 : chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?

    - 사이즈 : chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal

  · box-sizing 참고

    - paulirish.com/2012/box-sizing-border-box-ftw

  . block element modifier

    - http://getbem.com/introduction 

  · easing function

    - easing.net/en 

  · 추가적으로 공부할 링크

    - http://getbem.com/introduction/ 

    - https://en.bem.info/methodology/key-concepts/ 

    - https://en.bem.info/methodology/quick-start/ 

    - https://github.com/at-import/breakpoint/wiki/advanced-media-queries 

    - https://www.sitepoint.com/advanced-css3-animations 

    - https://cssnext.github.io/ 

 

  · 웹사이트를 웹앱으로 전환하기

    - <head>에 몇개의 <meta> 태그를 추가하면 된다.

    - 참고 링크 

      - ConfiguringWebApplications.html 

      - https://speckyboy.com/creating-a-mobile-web-application-with-meta-tags/  

[보너스]

  · 웹사이트를 위한 무료 호스팅을 얻는 방법

 

    - Github 페이지

      조건 1. index.html을 가지고 있어야 하고

      조건 2. repository에서 브랜치의 이름이 github pages여야 함

 

    - 브랜치 생성

      브랜치 이름 : gh-pages

      publish 한다.

 

    - username.githb.io/name-of-project

      ex)https://seongjinsong.github.io/kakao-clone/

 

    - 추가로 수정할 사항이 있는 경우에는 gh-page에서 수정하는 것이 아닌

      1)master에서 수정 후 커밋하고 push

      2)gh-pages로 이동 후 브랜치 → 업데이트 하고 push해야 반영된다.

티스토리툴바