보통 ‘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;
하하, 납작한 고양이!
네, 빨리 고칠게요
저는 책임감 있는 웹 개발자니까요
여러분이 아는 것이 많을수록
그것에 대한 책임도 지게 됩니다
여러분이 모든 것에 스크롤바를 달 수 있고
모든 고양이를 납작하게 할 수 있다고 해서 그렇게 해야 하는 것은 아니죠
여러분은 보통 다른 사람들이 사용하기 위한 웹사이트를 만들 테니까요
여러분이 재밌다고 생각하는 것이 그들에게는 무지 불편할 수 있어요
하지만 여러분이 칸 아카데미에서 웃긴 걸 조금 만드는 건 상관없답니다