ABSOLUTE
-
카카오톡 클론 코딩 #17 알림 물풍선이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 23. 01:01
이번 포스트에서는 네비게이션 바에 뜨는 알림 물풍선을 만들어 보겠습니다. 여기서 알림물풍선들은 각 아이콘(사용자, 물풍선 등)에 한정된 것이므로, position property를 잘 활용해 줘야 됩니다. 먼저 index.html에서 알림물풍선을 만들고, 엄마element인 물풍선은 position을 relative로, chile_element인 알림물풍선은 position을 absolute로 해 줍니다. 그럼 이제 알림물풍선이 우측 상단에 위치할 수 있도록 자리를 잡아 주고, 글자크기를 조정한 다음, 글자색은 흰색으로, 배경색은 #FE6420로 입력해 줍니다. 이번에는 알림물풍선의 크기를 조정한 다음, 글자를 상하 좌우 정가운데에 위치 시켜 줍니다. 마지막으로 border-radius의 값을 heigh..
-
Position property, 위치이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 27. 05:20
이번시간에는 position, 포지션에 대해 배워보도록 하겠습니다. position, 포지션에는 4가지 종류, 1> static, 정지 2> fixed, 고정, 3> absolute가 있습니다. position, 포지션을 설명하기 위해, 제일 먼저 클래스가 box와 box-child인 박스를 두 개 만들고, 브라우저가 갖고 있는 디폴트, default값을 상쇄 시키기 위해, 문서의 스타일은 높이는 100%, margin, 마진은 0, padding, 패딩도 0으로 따로 설정 하도록 하겠습니다. 그리고 본문 body 높이는 400%로, 배경색은 빨간색으로 설정한 후, 크롬에서 확인해 보겠습니다. 이번에는 box의 높이를 300px, 폭은 300px, 배경색은 노란색으로 설정하고, 크롬에서 확인 하겠습니다...