카카오톡 클론 코딩 #3 status bar

이번 포스팅부터는 처음에 열리는 페이지인 index.HTML, 채팅 목록 창의 전체 구조를 만들어 보도록 하겠습니다.

이번 포스팅에는 (1) status bar, 스테이터스 바 를 만들고,

 

 

(2) header, 상단,

 

 

(3) navigation bar, 네비게이션 바, 하단을 만들고,

 

 

(4) 그리고 채팅창을 순서대로 만들어 보겠습니다.

 

 

여러 번 반복해서 쓰일 상단, status bar와 하단부분, navigation bar는 
컴포넌트 단위로 시작하거나, 반복되는 페이지로 시작하도록 하겠습니다.

이제 Emmet의 html5 단축명령, html: 을 입력 후, 탭키를 눌려주거나, html:5를 선택하여 엔터키를 눌려주면,

 

 

html5 코드를 확인할 수 있습니다.

title, 제목은 chat | Kakao Clone으로 바꿔 주겠습니다.

 

 

이번에는 하나의 독립적으로 분리된 (1) Status Bar, 상태 표시줄을 만들어 보겠습니다.

 

 

.status-bar를 입력해서, 전체 div를 만들고,

 

 

.status-bar*3을 입력하면, status-bar 클래스의 div 세 개를 만들어 줄 수 있습니다. 
즉, 세 열, 좌측의 상태표시, 중간의 시간, 그리고 우측의 상태표시들을 나타낼 수 있습니다.

 

 

 

기본적으로 클래스는 이름을 부모는 ###로, 자식은 ###__column으로 사용하고 있기 때문에,
status-bar로 이름 지은 자식의 클래스들을 status-bar__column으로  고쳐주도록 하겠습니다.

 

 

먼저, 가운데 시계를 span으로 만들어 주면, span.status-bar__clock

 

 

status bar 안에 시계, clock이 있다는 것을 CSS에서 알 수 있습니다.
즉, 언더바, '_' 2개로 element들을 구분할 수 있습니다. 

다시 돌아가, 오후 12:24를 입력하여 시간을 나타낼 수 있습니다.

 

 

나머지 다른 열들도 무엇인가를 입력할 수 있을 뿐만 아니라, 아이콘(와이파이, 배터리 등)을 입력할 수 있습니다. 
아이콘을 무료로 사용할 수 있는 웹사이트, Font Awesome을 소개해 드리겠습니다.

 

Font Awesome 웹사이트

 

Font Awesome을 단지 CSS파일에 import를 한다면, 쉽게 아이콘을 사용할 수 있습니다. 
일부는 무료가 아니기 때문에, 확인하길 바랍니다. (우리는 무료버전만 사용하도록 하겠습니다.)

아이콘을 사용하기 전에,

 

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
를 head 태그 안에 넣어 준다면, 이제 Font Awesome에서 아이콘들을 import할 수 있습니다.

그럼 이제 Icons로 들어가, 차례대로 아이콘들을 찾아보도록 하겠습니다.
먼저, clock을 검색하여 시계 아이콘을 한 번 찾아 보겠습니다.

 

 

마음에 드는 시계 아이콘을 누른 후, html을 복사-붙여넣기 해서 사용할 수 있습니다.

 

 

 

그럼 첫 번째 열에 있는 안테나, signal 아이콘을 입력해 보도록 하겠습니다.
아이콘을 클릭해서 들어가지 않고, 아이콘 아래를 복사한 후, i.fas.fa-뒤에 signal을 붙여 넣어 사용할 수도 있습니다.

 

 

시간 입력할 때 썼던 span을 이용하여, 안테나 옆에 SKT와 LTE를 입력해 보도록 하겠습니다.

 

 

아래와 같이 웹페이지에서 확인할 수 있습니다. 

 

 

이제 마지막 열의 배터리 잔량과 배터리 아이콘을 입력하고 확인해 보도록 하겠습니다.

여기서도 먼저, battery 아이콘을 찾은 다음, 아래를 복사하고,  i.fas.fa-뒤에 붙여 넣어 줍니다.

 

 

마지막으로 잔량을 표기하기 위해, span을 이용해 주겠습니다.

 

 

여기서 '-', 바는 단어를 나누기 위해서 사용하고, '_', 언더바는 부모, 자식을 구분하기 위해서 사용합니다.

 

 

위와 같이 div를 이용하면, block은 아래로 하나씩 나열되기 때문에,

 

 

style에서 inline-block으로 고쳐주면 카카오톡 상단과 동일하게 만들어 줄 수 있습니다.

오늘 공부한 아이콘 클래스는 위에서 입력했던, CSS파일을 import 되었을 때만 작동한다는 점을 기억하길 바랍니다:)