25. Chats 화면 만들기 (html,css - Chats 화면 2)

6) badge 파일 만들고 적용하기

 

nav-bar에만 있던 notification을 별도로 분리해주겠음.

 

 

코드 옮기기

기존에 작성되어있던 코드 중 adsolute 부분을 제외하고

새로운 badge.css 파일에

badge에 옮김.

 

 

적용하는 모습

물론 이 파일도 import 해주어야 함.

 

 

nav-bar 부분

모든 html 파일에

기존에 nav-bar의 notification에 badge 를 추가해줌.

 

 

두 html화면의 모습

문제없이 잘 있는 모습을 볼 수 있음.

 

 

chats.htlm 화면

시간과 알림 배지를 만들기 위해 작성해줌.

 

 

추가된 모습

시간과 배지를 작성만 하였지만

기존에 스타일한 것이 있어서

자동으로 스타일이 적용되어 나타난 것을 볼 수 있음.

 

 

 

7) margin 주기

chats.html 화면

시간이 있는 span 태그의 class에 __time을 추가해줌.

 

 

스타일한 모습

__time을 불러와서

magin을 주고

span 태그는 inline 요소이니

요소를 block으로 변경해줌.

 

 

변경된 모습

시간과 알림 배지 사이에 공간이 생긴 것을 볼 수 있음.

 

 

 

8) 배지 위치 끝으로 옮기기

스타일 한 모습

기존에 있던 last-child에 스타일 한 부분에

align-items: flex-end; 를 하게 되면

 

 

비교하는 화면

chats 화면의 배지는 원하는대로 이동이 되었지만

friends 화면의 '2>'도 변경되어 이상해진 것을 볼 수 있음.

 

 

friends.html 화면

이럴 땐 간단히 friends.html 파일에서

'2>' 부분을 div 박스로 감싸주면 됨.

 

그렇게 되면 last-child 스타일이 div박스에 적용되기 때문에 문제가 없어짐.

 

 

문제가 사라진 모습

두 화면 모두 문제가 없는 모습을 볼 수 있음.

 

chats 화면 끝!