-
카카오톡 클론 코딩 #17 알림 물풍선이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 23. 01:01
이번 포스트에서는 네비게이션 바에 뜨는 알림 물풍선을 만들어 보겠습니다.
여기서 알림물풍선들은 각 아이콘(사용자, 물풍선 등)에 한정된 것이므로, position property를 잘 활용해 줘야 됩니다.먼저 index.html에서 알림물풍선을 만들고,
엄마element인 물풍선은 position을 relative로, chile_element인 알림물풍선은 position을 absolute로 해 줍니다.그럼 이제 알림물풍선이 우측 상단에 위치할 수 있도록 자리를 잡아 주고,
글자크기를 조정한 다음, 글자색은 흰색으로, 배경색은 #FE6420로 입력해 줍니다.
이번에는 알림물풍선의 크기를 조정한 다음, 글자를 상하 좌우 정가운데에 위치 시켜 줍니다.
마지막으로 border-radius의 값을 height, 높이의 반으로 적거나, 50%로 적어주면,
알림물풍선을 둥글게 만들어 줄 수 있습니다.'이거 공부 했더니 어때? > HTML & CSS & JS' 카테고리의 다른 글
카카오톡 클론 코딩 #18 친구목록_행 (0) 2020.11.24 카카오톡 클론 코딩 #16 box-sizing: border-box (0) 2020.11.22 카카오톡 클론 코딩 #15 네비게이션 바 CSS (0) 2020.11.21 카카오톡 클론 코딩 #14 header CSS (0) 2020.11.20 카카오톡 클론 코딩 #13 상태표시줄 (0) 2020.11.19