버튼
-
카카오톡 클론 코딩 #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태그 아..