documentation: 10/6 로그인창, 친구목록, 채팅방 목록 관련

[day024]

🍥로그인창

div/form/div 구성

<div class="logo">:

• 헤더글씨 내용

Form :

• form에 로그인시 post로 넘어 갈 수있도록 구현 추후에 js를 통해 수정이 요구됨 지금은 임시로 <a href>를 통해서 friends html을 걸어둠

<div class="additional-links">:

• <a href="#">를 통해서 아무 페이지 없게 연결 해둠, 필요하다면 계정찾는 페이지가 필요함

---

🍥친구 목록

header / main / nav 로 구성

Header:

• header와 nav는 css를 통해서 상단 fixed 해둠

Main

• main은 내프로필/펑/광고/생일인 친구 / 즐겨찾기/ 채널 /친구 로 구성함
• 아이콘을 통해서 접는 버튼 모양만 두었는데 후에 동적으로 작동하도록 수정이 요구됨
• friend__column을 통해서 정렬, 각 공간을 나눔 다른 코드 참고함

Nav

• 하단 버튼은 임시로 구현 추후에 디자인 수정해야함

---

🍥 채팅방 목록

header / main / nav로 구성

Header 및 nav:

• header와 nav는 친구목록과 동일한 html , css 사용

Main:

• 전체적으로 친구목록과 유사
• friend__content안에 friend__info 라는 틀을 두고<span class="friend__name"> <span class="friend__time"> span class를 통해서 채팅방의 이름과 시간을 같은 열에 놓을 수 있도록 묶음

---

pigma 색상코드

[day024]

수정해야할 사항 :

• 카카오톡 클론 코딩이므로 모바일기준 최적화 하고 미디어쿼리 추가해두기 @media

• 네이밍 규칙 지키기

• 웹페이지 메인은 항상index.html 라고 기본 이름 정하기

• html에는 css 쓰지말고 body가 최상위라고 생각하기

• input뿐만 아니라 전체 버튼을 form으로 감싸는게 좋다 / label 활용하기

• 시멘틱 tag small사용

• 코드 줄이기 위해서 svg→img 로 변경해서 사용하기

• 패딩,마진 값 마이너스로 하지 않는다. 대신 padding -top을 직접 설정한다.

• BMM 을 통한 css 적용하기 (추후 공부 후 수정)

• css 분리하기 (공통인 것은 style로 묶기, resetcss 사용하기)

---

10/9일까지 할일

• [x] 채팅방 수정
• [x] 프로필 창 만들기
• [ ] 피드백 및 스터디 내용 적용하기