헤더 네비게이터 인터렉션 구현하기

0. 개요 해더를 누르면 해당 페이지로 바로 가는 웹 페이지 예시를 만들어 보았습니다 1. HTML 구조 우선 웹 페이지의 기본 구조를 HTML로 작성합니다. 페이지 상단에 네비게이션 바(header)가 위치하고, 이어서 본문(content) 부분으로 나누었습니다. first second third fourth " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스

html+css 로 인터랙션 사이드바 만들기

티스토리 스킨을 제작하는데 사이드바와 네비게이션을 어떻게 짜면 좋을까 에대한 디자인적인 아이디어가 없어서 웹사이트를 검색하면서 찾아보는데 어딜가도 내가 원하는 깔끔한 인터랙션을 가진 사이드바가 없어서 내가 직접 만들었다 하루정도 찾아본 결과 해외 사이트에서 책갈피 효과같은 꽤 멋진 인터렉션을 가진 사이트를 찾았는데 보고 이런식으로 만들면 멋질꺼 같아서 바로 만들어 봤다 밑에는 html코드인데 따라 해보기 쉽게 가장 간단한 구성요소로만 만들었고 아래 css는 복잡하니까 나중에 디자인 수정을 쉽게 하기 위해서 위쪽으로 색상코드나 크기등을 변수로 조정할수 있게 만들었다 :root{ /* memu */ /* size */ --memu--width:280px; --memu--interval:40px; /* col..