CSS width height overflow

보통 ‘div’를 사용하여
페이지를 여러 박스로 나누고

그 박스들의 크기와 위치를 조정합니다

페이지를 보기 좋게 디자인하기 위해서는

섬세함이 필요하죠

하지만 지금은 페이지를
보기 좋게 보이게 하는 것보다

바꾸는 방법을 보여줄게요

'div'인 "official-info"의 크기를 바꿔보죠

div는 기본적으로 이용 가능한 폭의 100%를 차지합니다

그래서 이 회색 상자가 전체 페이지에 걸쳐 있는것이죠

이것을 300px 만큼만 차지하도록 하려 한다면

CSS 규칙의 새로운 속성이 필요해요

width: 300px;

잘 되네요, 좀 더 해보죠

폭을 퍼센트로 줘 볼게요

이렇게 div가 가능한 폭의 70%만 차지하게 할 수 있어요

이제 글은 더 작은 상자에 들어갔고,

‘div’는 더 높아졌어요

필요하다면 상자의 높이도 고정할 수 있어요

height 속성으로요

height: 180px;

음, 웃긴 일이 일어났네요

회색 상자의 높이는 180픽셀로 바꾸었는데

글은 회색 상자 밖으로 넘쳐 흐르고 있어요

왜 이렇게 되었을까요?

바로 "overflow" 라는 속성 때문입니다

'overflow'의 기본값은 'visible'로

요소의 크기가 바뀌더라도 내용은
그 크기를 넘어가게 되는 겁니다

조금 이상해 보이지만

overflow의 다른 값은 무엇이 있을까요?

'hidden'이 있어요

이것은 내용을 경계에서 잘라버리죠

하지만 이건 원하던 게 아니죠

독자가 official info를 못 읽게 되니까요

'auto'는 어떨까요

이것은 내용이 넘치면 브라우저가 스크롤 바를 만들게 합니다

이제 글을 보기 위해 상자 안에서 스크롤할 수 있어요

원한다면 더 분명하게 할 수 있어요

각 방향마다 다른 overflow 속성을 지정할 수 있답니다

예를 들면, y 방향

즉 위 아래로 스크롤바를 사용하려면

overflow-y:auto; 이렇게 쓰고

x 방향으로는 잘라내려 한다면

overflow-x: hidden; 이렇게 할 수 있어요

다만 스크롤바는 사용자에게

매우 짜증날 수 있으니 overflow를 신중하게 쓰세요

특히 스크롤바 속 스크롤바는

가능하면 피하세요

폭/높이로 돌아와서
폭과 높이는 사실

그림 등 어떤 요소에든지 사용가능해요

CSS를 배운 여러분은 image의 width/height 특성 대신

CSS의 width/height 속성을 쓸 수 있어요

이 고양이 그림에 id "cute-cat"을 주고 좀 더 크게 만들어보죠

특성을 없애고

스타일 규칙에 다음을 추가합니다
#cute-cat {

width: 120px;

특성과 마찬가지로

폭이나 높이 중 하나만 주고

다른 수치는 브라우저가 최적의 값을 찾게 두는게 좋아요

그렇지 않으면, 고양이가 납작해진다구요!

흠.. 재미있을 것 같으니까
잠깐 시도해보죠

height: 40px;

하하, 납작한 고양이!

네, 빨리 고칠게요

저는 책임감 있는 웹 개발자니까요

여러분이 아는 것이 많을수록

그것에 대한 책임도 지게 됩니다

여러분이 모든 것에 스크롤바를 달 수 있고

모든 고양이를 납작하게 할 수 있다고 해서
그렇게 해야 하는 것은 아니죠

여러분은 보통 다른 사람들이 사용하기 위한
웹사이트를 만들 테니까요

여러분이 재밌다고 생각하는 것이
그들에게는 무지 불편할 수 있어요

하지만 여러분이 칸 아카데미에서
웃긴 걸 조금 만드는 건 상관없답니다