fixed
-
카카오톡 클론 코딩 #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를 ..
-
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: 수직 배치 값은 정수로 입력. 값이 클수록 앞쪽으로 배치.