TIL 03 상단바 고정하기

906 단어 CSSTILCSS
  • <header> 태그로 상단바 만든 경우...
  1. 상단바 스타일 지정하고 
header {
  height: 75px;
  padding: 1rem;
  color: white;
  background: teal;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  1. 포지션을 고정시킨다.
header {
  position: fixed;
  top: 0;
  /* width: 100% */
  left: 0;
  right: 0;
  }
  1. 상단바 때문에 일부 콘텐츠 가려지는 문제
    : <body> 엘리먼트의 상단에 메뉴바 높이 만큼 패딩(padding)을 줘서 해결한다.
body {
  padding-top: 75px;
  /* 생략 */
}

참고: [CSS] 메뉴바 상단 고정하기

Hibernate HelloWorld Annotation
[C]백준 2581번 - 소수 -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage