Font Awesome
-
카카오톡 클론 코딩 #4 Screen Title이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 10. 01:10
이번시간에는 (2) header, 상단을 만들어 보도록 하겠습니다. 먼저 header를 생성하고, 클래스로 header를 다시 명명해 줍니다. 그리고 자식 열, column 2개를 추가해 주겠습니다. 위와 같이, class, 클래스로 명명하고, column으로 사용한 이유는 편리성 때문입니다. 첫 번째 열에는 큰 h1태그를 사용해서, 채팅을 입력 하겠습니다. 두 번째 열에는 여러 아이콘들을 입력하도록 하겠습니다. 그 전에, 아이콘들 사이에 빈 공간, 즉, 간격을 재어보면 대략 25px입니다. 위와 같이, 아이콘 사이의 간격이 25px로 모두 동일하기 때문에, 아이콘들을 하나의 박스, div태그 안에 넣겠습니다. 첫 번째 아이콘은 돋보기이고, 저번 포스팅에서 했던 방식 그대로, Font Awesome에서 ..
-
카카오톡 클론 코딩 #3 status bar이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 9. 06:55
이번 포스팅부터는 처음에 열리는 페이지인 index.HTML, 채팅 목록 창의 전체 구조를 만들어 보도록 하겠습니다. 이번 포스팅에는 (1) status bar, 스테이터스 바 를 만들고, (2) header, 상단, (3) navigation bar, 네비게이션 바, 하단을 만들고, (4) 그리고 채팅창을 순서대로 만들어 보겠습니다. 여러 번 반복해서 쓰일 상단, status bar와 하단부분, navigation bar는 컴포넌트 단위로 시작하거나, 반복되는 페이지로 시작하도록 하겠습니다. 이제 Emmet의 html5 단축명령, html: 을 입력 후, 탭키를 눌려주거나, html:5를 선택하여 엔터키를 눌려주면, html5 코드를 확인할 수 있습니다. title, 제목은 chat | Kakao Cl..