위치
위치 (Position)
.fixed-top, .fixed-bottom, .sticky-top, .sticky-bottom 및 이들의 반응형 변형 클래스를 사용해서 요소를 배치하는 방법을 설명하는 문서예요.
출처: 문서
본문
상단 고정 (Fixed top)
요소를 뷰포트 상단에 가장자리부터 가장자리까지 배치해요. 프로젝트에서 고정 위치의 영향을 꼭 이해하세요. 추가 CSS가 필요할 수도 있어요.
<div class="fixed-top">...</div>
하단 고정 (Fixed bottom)
요소를 뷰포트 하단에 가장자리부터 가장자리까지 배치해요. 프로젝트에서 고정 위치의 영향을 꼭 이해하세요. 추가 CSS가 필요할 수도 있어요.
<div class="fixed-bottom">...</div>
상단 스티키 (Sticky top)
요소를 뷰포트 상단에 가장자리부터 가장자리까지 배치하되, 스크롤해서 지나간 뒤에만 그렇게 해요.
<div class="sticky-top">...</div>
반응형 상단 스티키 (Responsive sticky top)
.sticky-top 유틸리티에는 반응형 변형도 있어요.
<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
하단 스티키 (Sticky bottom)
요소를 뷰포트 하단에 가장자리부터 가장자리까지 배치하되, 스크롤해서 지나간 뒤에만 그렇게 해요.
<div class="sticky-bottom">...</div>
반응형 하단 스티키 (Responsive sticky bottom)
.sticky-bottom 유틸리티에도 반응형 변형이 있어요.
<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>