대화방
-
카카오톡 클론 코딩 #11 대화창이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 17. 01:21
이번시간에는 채팅목록을 누르면 넘어가는 대화창을 만들어 보도록 하겠습니다. chat.html을 만든 다음, settings.html의 내용들을 복사-붙여 넣어서 내용들을 수정해 줍니다. 먼저, head에 있는 title은 room으로 고쳐주고, header태그에서는 왼쪽 화살표에 연결되어 있는 하이퍼링크는 index.html로 변경해 주고, title은 사용자로, 돋보기 옆에는 三 아이콘도 추가(fontawesome이용) 해 줍니다. 채팅창의 목록을 클릭하면 대화창으로 넘어가게 만들어 주기 위해, 채팅 목록 부분을 하이퍼링크를 걸어줍니다. 이제 대화창의 main부분을 수정해 주겠습니다. 메시지는 목록화 되어 있기 때문에, ul태그를 이용해 줍니다. 여기서 대화창의 구성을 살펴 보면, 두 종류의 메시지, ..