CSS

왼쪽 고정 메뉴, 오른쪽 내용 스크롤

CD2Y 2021. 4. 12.
반응형

See the Pen 왼쪽 고정 메뉴 - 오른쪽 내용 스크롤 by nilgi (@nilgi) on CodePen.

 

그동안 배운 html, css로 페이지의 기본을 만들었다.

왼쪽에는 메뉴가 있는 사이드바를 배치하고 오른쪽에는 내용을 배치한다.

스크롤을 해도 메뉴는 움직이지 않게 position: fixed;로 고정한다.

오른쪽 내용은 메뉴바와 겹치니 margin-left로 여백을 준다.

첫번재 메뉴 홈은 마우스 hover 값을 주지 않기 위해 a:hover:not(.class)를 쓰면 된다.

반응형