position1 css relative position: 겹쳐서 표현하기 카카오톡에서 메뉴바를 보면 위의 사진과 같이 말풍선 이모티곤 위에 알림이 뜬다. 이를 html과 css에서 나타내는 방법을 기록한다. 먼저 html에서 채팅 목록으로 이동할 수 있는(a) 말풍선 아이콘(i)와 알림의 개수(span)을 나타낸다. 12 그리고 이 html을 꾸미는 css에서 필요한 속성을 설정한다. span tag가 inline 속성을 지니기 때문에 flex로 변경하고, 배경 크기를 조절하고, 적절한 모양새를 갖추면 된다. .nav__notification { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background-color: toma.. 2023. 1. 7. 이전 1 다음
