KokoaTalk Clone Coding: friends screen 5(friends-screen channel)

HTML CSS

jane.dev 2021. 5. 19. 13:04

status-bar 아래 screen-header 아래 main에는 friends-screen이라는 내용으로 위와 같이 포함되어있음

앞서 작성된 프로필 사진과 상태메세지 뒷부분에

friends-screen__channel-header와

앞의 user-component를 복사해서 삽입

channel의 전체적인 사이즈는 더 작기 때문에 img 태그에 user-component__avartar--sm라는 클래스 추가함

그리고 아래 채널에서는앞에 빈칸으로 작성했던 user-component__column:last child 에 2 > 를 작성해줌

채널의 이름이 프로필 이름만큼 두껍지 않기 때문에 user-component__not-bold 클래스 이름을 추가

이 이름을 추가하는 이유는 not-bold 라는 이름을 보고 무슨 속성을 변경했는지 직관적으로 알기위함

user-component__avatar--sm과 xl에 너비, 높이와 테두리를 변경

주의할 점: div가 어떤 태그를 묶어주는지 정확하게 해야 justufy-content: space-between을 적용했을 때 작동함

friends-screen 완성