relative
-
카카오톡 클론 코딩 #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, 배경색은 노란색으로 설정하고, 크롬에서 확인 하겠습니다...
-
CSS 위치(position, 포지션)이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 28. 16:17
static: 기본값 fixed: 특정 위치에 고정 부모 요소가 아닌 브라우저 화면 기준(상대적 위치)으로 배치. 스크롤에 영향을 받지 않음. 페이지 내 공간을 차지하지 않음. z-index 값으로 앞/뒷쪽 배치 가능. relative: static(기본값)이나 abolute를 포함하는 부모요소에 따른 상대적 배치 z-index 값으로 앞/뒷쪽 배치 가능. absolute: 부모 요소에 따른 상대적 배치 스크롤에 영향을 받지 않음. 페이지 내 공간을 차지하지 않음. z-index 값으로 앞/뒷쪽 배치 가능. z-index: 수직 배치 값은 정수로 입력. 값이 클수록 앞쪽으로 배치.