웹개발 프로젝트(CSS/HTML)-#9 스크롤뷰

오늘은 스크롤뷰에 대해서 알아보겠다.

 

스크롤 역시 css파일에서 속성으로 설정해줘야한다.

 

이떄 필요한 속성은 overflow속성이다.

 

스크롤뷰가 언제 필요한지 생각을 해보면 내용을 담는 컨테이너의 크기보다 내용물의 크기가 더 클때 필요하다는것을

 

상식적으로 생각할 수 있다.(overflow라는 뜻도 넘쳐서 흐른다 이런뜻으로 유추 가능)

 

여기서 스크롤뷰가 적용되기 위한 중요한 조건이 생긴다. 바로 내용물의 크기가 정해져있어야한다는 것이다.

 

##overflow의 속성값은 4가지가 있다. 

visible / hidden / auto / scroll

 

참고)overflow라는 속성은 overflow-x와 overflow-y라는 속성을 합친것이다.

 

visible부터 하나씩 보자

 

1. overflow: visible;

overflow의 기본값이다. 내용물의 크기가 컨테이너보다 크다면 컨테이너를 뚫고 전체가 다 보이게 된다.

 

2. overflow: auto;

가장 많이 사용하는 속성값인것 같다. 스크롤이 필요할때만 스크롤이 생긴다.

 

auto속성값은 overflow-x와 overflow-y라는 두 속성 모두 auto이기 떄문에 x축 y축 모두 스크롤이 생긴다.

 

3. overflow: scroll;

언제나 스크롤이 뜨게 된다. 내용물의 양이 컨테이너 크기보다 적든 많든 스크롤은 항상 보이게 되는 속성이다.

 

4. overflow: hidden;

컨테이너를 넘는 내용에 대해서는 보여주지 않는 속성값이다. 스크롤이 나타나지 않는다.

 

예시)

overflow-x: hidden;

overflow-y: auto;

라고 하면 x축은 스크롤뷰가 생기지 않고 y축에만 auto로 인해 스크롤 뷰가 생긴다.

 

끝