KokoaTalk Clone Coding: find screen 2

find screen (lower) html css 작성

find-screen

 

open-chat 클래스에서

 

open-chat__header과

open-post 두 부분으로 나눠서 작성

 

upper 부분을 작성했던 것과 같이 직관적으로 알아볼 수 있도록 h6 태그를 사용

 

회색의 글자들이 많은데 조금씩 차이가 나도록 색을 주려고 하니까 코드가 지저분해지는 느낌

 

hashtags는 소문자로 작성하고 css를 통해 대문자로 변경할 예정

divider 클래스를 작성하지 않고 양옆의 span 태그를 이용해서 border를 만들어줘도 되지만 css를 연습하기 위해 작성함

 

justify-content: space-between 와 align-items: center는 아주 자주 쓰이는 조합

text-transform: uppercase 를 통해 소문자를 대문자로 변경

divider 는 다른 screen에서도 쓰일 수 있으니, 어떤 클래스안에서 쓰이는지 함께 표시

 

open-post__heart-count 에서 position: absolute를 작성하려면, 부모에게 posirion: relative를 작성해줘야 작동되므로 유의

 

find screen 완성