31. Find 화면 만들기 (html,css - open chat 4)

5) 부모 찾아서 relative 해주기

작성한 모습

open-post__heart-count 의 부모는

open-post__photo 이므로

open-post__photo 의 position을 relative로 변경해줌.

 

 

변경된 모습

heart-count 박스가 제대로 위치한 모습

 

 

 

6) 세부 작업

스타일한 모습

하트 아이콘과 숫자 사이에 공간을 주기 위해

숫자의 왼쪽에 margin을 조금 줌.

 

 

변경된 모습

하트아이콘과 숫자 사이에 조금의 공간이 생김.

 

 

 

7) open post  두 개 만들기

작성한 모습

open-post 코드를 복사하여

바로 밑에 붙여넣기 함.

 

숫자나 내용은 변경하여도 됨.

 

 

스타일한 모습

두 개의 open-post 의 사이에

공간을 주기 위해 밑부분에 margin을 줌.

 

 

적용된 모습

이렇게 두개의 open-post가 적용된 모습을 볼 수 있음.