이거 공부 했더니 어때?/HTML & CSS & JS
-
카카오톡 클론 코딩 #11 대화창이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 17. 01:21
이번시간에는 채팅목록을 누르면 넘어가는 대화창을 만들어 보도록 하겠습니다. chat.html을 만든 다음, settings.html의 내용들을 복사-붙여 넣어서 내용들을 수정해 줍니다. 먼저, head에 있는 title은 room으로 고쳐주고, header태그에서는 왼쪽 화살표에 연결되어 있는 하이퍼링크는 index.html로 변경해 주고, title은 사용자로, 돋보기 옆에는 三 아이콘도 추가(fontawesome이용) 해 줍니다. 채팅창의 목록을 클릭하면 대화창으로 넘어가게 만들어 주기 위해, 채팅 목록 부분을 하이퍼링크를 걸어줍니다. 이제 대화창의 main부분을 수정해 주겠습니다. 메시지는 목록화 되어 있기 때문에, ul태그를 이용해 줍니다. 여기서 대화창의 구성을 살펴 보면, 두 종류의 메시지, ..
-
카카오톡 클론 코딩 #10 설정창이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 16. 06:21
설정창은 각 창들의 상단의 위치한 톱니바퀴를 누르면 실행되는 창이기 때문에, 그럼 더보기창의 톱니바퀴를 눌렀을 때, 설정창으로 넘어가도록 more.html의 header부분의 톱니바퀴 아이콘에 하이퍼링크를 걸어 주겠습니다. (다른 창들의 톱니바퀴도 똑같이 수정해 주면 됩니다) 이제 설정창을 살펴 보면, 다른 창과 유사하게, 1> 상태표시줄, header, 그리고 2> 두 개의 목록들, 3> navigation bar로 이뤄져 있습니다. 위와 같이 만들어 주기 위해, more.html을 복사해서 settings.html에 붙여 넣은 후, 위쪽부터 차례대로 수정해 주도록 하겠습니다. 먼저 창의 타이틀, 제목을 바꿔주고,(더보기 -> 설정) 그리고 header에 위치한 title, 이름도 (더보기->설정으로)..
-
카카오톡 클론 코딩 #9 더보기창이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 15. 04:35
이번 포스팅에서는 카카오톡의 더보기창을 만들어 보도록 하겠습니다. 먼저, 사용자의 프로필 줄이 헤더가 되도록, 클래스명이 more인 main태그를 열고, header태그를 만들어 보았습니다. header태그 안에는 Friends.html에서 friends__list의 내용들을 복사-붙여 줍니다. 그런 다음, 사용자 프로필 사진과 이름을 수정해주고, 상태메시지 자리에는 이메일을 입력하도록 하겠습니다. 이제, friend__now-listening를 지우고, 오른편 2개의 아이콘은 button 태그를 이용해 넣어 주겠습니다. 여기서 사용된 li태그는 필요없기 때문에, li태그 대신 div태그로 고쳐 줍니다. 그럼 아래 아이콘들은 li태그를 이용해서 만들어 주면 됩니다. 먼저 ul태그를 열어주고, li태그 아..
-
카카오톡 클론 코딩 #7 Friends Screen이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 13. 01:30
이번 포스팅에서는 friends screen, 친구창을 만들어 보겠습니다. 채팅창을 살펴보면, 상태표시줄, status bar과 네비게이션바, navigation bar는 저번 포스팅에서 만들어 보았고, 이번 포스팅에는 그 사이에 사진, 이름, 상태메시지, 그리고 노래를 넣어 주도록 하겠습니다. 그리고 카카오톡 사용자와 친구의 크기 차이가 있기 때문에, 크기에서 차이를 주면 됩니다. 그럼 카카오톡 유저의 사진, 이름, 그리고 상태메시지를 만들어 보도록 하겠습니다. 그 전에, 프로필 사진들이 둥근 모양의 형태로 전부 같은 스타일로 되어 있기 때문에, 이미지를 위한 전역, global 클래스로 만들어서 사용할 수 있습니다. 즉, 글로벌 스타일을 위한 파일을 만들어서, 웹사이트의 모든 곳, 어떠한 위치에도 영..
-
카카오톡 클론 코딩 #6 Chat Screen이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 12. 05:05
이번시간에는 index.html에서 (4) 채팅창, chat screen을 만들어 보도록 하겠습니다. 그 전에, 각 창의 title, 제목 줄에 있는 아이콘들을 살펴 보겠습니다. 먼저, 친구창은 채팅창과 비교해서, header 부분에 comment, 말풍선을 지워주고, 유저아이콘을 넣어 주겠습니다. 검색창과 설정창은 일단 놔 두고, 게임별창은 comment, 말풍선과 음악, note 아이콘이 없으니, 지워 줍니다. 그리고 더보기 창에는 검색부분과 스캔하는 부분, 그리고 음악, 설정 기능이 있기 때문에, 코딩했던 부분에서, comment를 지워주고, 스캔 아이콘을 추가 해 주겠습니다. 먼저, 스캔은 QR코드 아이콘으로 사용해서, 카카오톡 더보기창과 유사한 화면을 만들어 줍니다. Status bar, 상태표..
-
카카오톡 클론 코딩 #5 Navigation Bar이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 11. 01:55
이번시간에는 하단에 위치한 (3) navigation bar, 네비게이션 바를 만들어 보도록 하겠습니다. 먼저, navigation을 줄인 nav라는 클래스명을 가진 nav태그를 입력해 주겠습니다. 5개의 버튼은 리스트로, link태그를 이용하기 위해서는, ul을 먼저 만들어 주어야 합니다. li.nav__list-item*5>a.nav__list-link 입력 후, li태그 안에 a태그를 이용하면, nav__list-item이라는 클래스명을 가진 li태그와, 그 안에 nav__list-link라는 클래스명을 가진 a태그를 만들 수 있습니다. 하이퍼링크에 ./friends.html을 입력하여, 친구창으로 이동할 수 있도록 해 주겠습니다. 차례대로 채팅창, 검색창, 게임창, (game.html을 추가해 주..
-
카카오톡 클론 코딩 #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에서 ..