border-radius
-
카카오톡 클론 코딩 #17 알림 물풍선이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 23. 01:01
이번 포스트에서는 네비게이션 바에 뜨는 알림 물풍선을 만들어 보겠습니다. 여기서 알림물풍선들은 각 아이콘(사용자, 물풍선 등)에 한정된 것이므로, position property를 잘 활용해 줘야 됩니다. 먼저 index.html에서 알림물풍선을 만들고, 엄마element인 물풍선은 position을 relative로, chile_element인 알림물풍선은 position을 absolute로 해 줍니다. 그럼 이제 알림물풍선이 우측 상단에 위치할 수 있도록 자리를 잡아 주고, 글자크기를 조정한 다음, 글자색은 흰색으로, 배경색은 #FE6420로 입력해 줍니다. 이번에는 알림물풍선의 크기를 조정한 다음, 글자를 상하 좌우 정가운데에 위치 시켜 줍니다. 마지막으로 border-radius의 값을 heigh..