position
-
카카오톡 클론 코딩 #17 알림 물풍선이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 23. 01:01
이번 포스트에서는 네비게이션 바에 뜨는 알림 물풍선을 만들어 보겠습니다. 여기서 알림물풍선들은 각 아이콘(사용자, 물풍선 등)에 한정된 것이므로, position property를 잘 활용해 줘야 됩니다. 먼저 index.html에서 알림물풍선을 만들고, 엄마element인 물풍선은 position을 relative로, chile_element인 알림물풍선은 position을 absolute로 해 줍니다. 그럼 이제 알림물풍선이 우측 상단에 위치할 수 있도록 자리를 잡아 주고, 글자크기를 조정한 다음, 글자색은 흰색으로, 배경색은 #FE6420로 입력해 줍니다. 이번에는 알림물풍선의 크기를 조정한 다음, 글자를 상하 좌우 정가운데에 위치 시켜 줍니다. 마지막으로 border-radius의 값을 heigh..
-
카카오톡 클론 코딩 #15 네비게이션 바 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 21. 01:32
이번 포스팅에서는 네비게이션 바를 만들어 보도록 하겠습니다. 앞선 포스트에서 했던 방식대로, 제일 먼저 CSS폴더에 nav-bar.css라는 새 파일을 만들고, style.css에 nav-bar.css를 @import합니다. 그럼 네비게이션 바에 배경색을 지정해주면, 네비게이션 바가 잘 선택 되어있는 지 확인할 수 있습니다. 상태표시줄, 헤더, 네비게이션바는 화면을 스크롤하더라도 그 자리 그대로를 지키고 있습니다. 그래서 position: fixed;를 이용하여 자리를 고정시켜 주겠습니다. (body의 padding에 둘러싸여 있도록 한 설정 제거) position: fixed는 기존에 있던 위치에서 다른 위치에 고정시키도록 설정한 것이기 때문에, position: fixed를 쓸 때는 꼭 width를 ..
-
CSS정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 31. 03:55
지금까지 배웠던 CSS를 한 눈에 정리해 보도록 하겠습니다.제일 먼저, 1. CSS-syntax, 문법에 대해 배워보았고, 2. CSS-HTML연결을 시켜 보았습니다. 그 다음, 3. 박스모델(마진, 패딩)에 대해 알아보았습니다. 그리고 4. 포지션(static, fixed, relative, absolue)를 배웠고, 5. 디스플레인(block, inline-block, inline)에 대해서 살펴보았습니다. 6. 박스를 나열하는 방법인 flex와 7. class로 따로 명명하지 않았지만 지칭하는 방법, 가상설렉터(type, nth child 등)와 마지막으로 8. element states(hover, active, focus, visited)를 배웠습니다.
-
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, 배경색은 노란색으로 설정하고, 크롬에서 확인 하겠습니다...