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