KokoaTalk Clone Coding: find screen 1

HTML CSS

jane.dev 2021. 5. 20. 18:23

friends.html을 복사해서 find.html에 붙여넣기

이 부분은

friends.html 에서 글자 변경, 음악 아이콘 삭제 + 세팅아이콘 위에 알림표시

세팅 아이콘 상위 span 태그에 dot이라는 클래스 이름 추가

navigation-bar에서 사용했던 알림과 같은 형식이기 때문에 components에서 하나로 합쳐줄 예정→클래스 이름 dot 추가

1알림표시를 합쳐준 badge.css에 nav-bar의 위치정보를 제외한 알림표시를 가져오고 dot으로 스타일 적용

main-screen에 전체적인 padding이 적용되고 있기 때문에, 해당 div 태그 안으로 작성

find-icons div를 만들어 각 div에 아이콘과 span을 작성해줌

선생님.find-icons 의 justify-content: space-between으로 했지만, 나는 좀더 모여있는 느낌이 좋아서 space-around로 함

recommended-friends__title을 더 직관적으로 알아보기 위해 h6로 작성

위아래의 border는 recommended-friends에서 위아래로 줌

주석은 선생님이 작성한 부분

나는 박스의 크기만 키웠고, 선생님은 margin만 줌

각 파트마다 중간선을 많이 사용해서 border를 변수로 작성

클래스를 잘 활용하기위해 div 안으로 작성하는 것을 유의해야함