본문 바로가기
HTML,CSS

상단메뉴바 고정, 사이드바 고정 (Fixed)

by flykimjiwon 2022. 4. 2.
반응형

오늘까지 고민했다. 사이드바로 간단하게해서 대충 할지 아니면 정성스럽게 상 하단 고정 메뉴바를 만들어 이용할지

 

결론은 아직 시간이 남아있고, 모바일에서 반응형으로 사용하기 좋게, 어플처럼 만들어 보자였다.

 

중요한건 top,bottom모두 fixed속성을 이용해 주어야했다.

 

특정 사이즈에서 반응형을 사용하는것과 windowsize를 이용하는것ㅇ느

https://flykimjiwon.tistory.com/120 을 참고하고

 

중요한건 fixed속성을 이용한 방법이다.

 

-> css속성에 position:fixed를 사용하고 top,bottom,right,left속성을 이용해 위치를 고정시켜주면 된다.

 

- 참고한링크

https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp

 

How To Create a Fixed Sidebar

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

 

How To Create a Fixed Menu

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://www.daleseo.com/css-position-fixed-navigation/

 

[CSS] 메뉴바 상단에 고정 시키기

Engineering Blog by Dale Seo

www.daleseo.com

 

반응형

'HTML,CSS' 카테고리의 다른 글

포이머웹(poiemaweb) HTML 정리  (0) 2022.06.20
웹사이트 폰트 바꿔 사용하기 (feat.구글폰트)  (0) 2022.04.02
div border속성 (테두리,선,굵기등...)  (0) 2022.04.02
justify-content  (0) 2022.04.02
Margin 간격  (0) 2022.03.23