[CSS3] HTML/CSS 18일차

HTML / CSS

✔ Preview

overflow, max-width, scroll-behavior 속성 정리

---

✍ Summary

Overflow

: 요소의 컨텐츠가 너무 커서 요소 내에 모두 보여주기 힘들 때의 처리 방법을 지정한다. visible, hidden, scroll, auto 등의 속성이 있다.

종류	설명
visible	넘치는 부분을 요소의 바깥으로 보여줌 (기본값)
hidden	넘치는 부분을 잘라서 보여주지 않음
scroll	스크롤바가 추가되어서 스크롤이 가능 (가로, 세로 모두 추가됨)
auto	자동으로 스크롤바가 추가될지 아닐지를 결정

 

header {
	text-align: center;
	position: relative;
	overflow: hidden; /* 넘치는 내용을 자름 */
}

 

 

max-width

: 요소의 최대 너비를 지정하는 속성이다. 보통 반응형 웹에서 크기를 조절할 때 사용된다.

header img {
	width: 100%;
	height: auto;
	max-width: 960px; /* 960px 보다 화면이 커져도 이미지는 960px로 출력 */
}

 

 

scroll-behavior

: 사용자가 스크롤 속성이 지정된 link를 클릭할 때, 스크롤의 움직임을 제어하는 속성이다. auto, smooth, initial, inherit 등의 속성이 있다.

종류	설명
auto	설정된 요소로 바로 스크롤 됨 (기본값)
smooth	설정된 요소로 이동하는동안 부드러운 효과를 줌
initial	속성의 기본값을 사용
inherit	부모 요소로부터 상속받음

 

html {
	scroll-behavior: smooth; /* IE, Safari 미지원 */
}