navigation

2 posts

CSS로 스티키 헤더 (sticky header) 만들기

CSS의 sticky position을 이용하여 항상 화면 상단에 항상 달라붙어 있는 헤더(header)를 만들어보겠습니다. sticky position의 특징 sticky position은 CSS에 비교적 최근에 추가된 포지셔닝 메커니즘인데요. 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 fixed position과 유사하게 동작합니다. position 속성을 sticky로 설정되어 있는 엘리먼트는 마치 position 속성이 static으로 설정되어 있는 것처럼 부모 엘리먼트 내부에서 공간을 차

CSS의 fixed position으로 메뉴바 상단 고정

fixed position을 이용해서 스크롤에 해도 따라가지 않고 항상 화면 상단에 고정되어 있는 메뉴바를 만들어보겠습니다. fixed position의 특징 CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있게 됩니다. 뿐만 아니라, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때

Discord