HTML/CSS : 2월 5일

브라우저에서 자동으로 margin을 지정해줌 => 나중에 html작성할 때 초기화하고 시작

 

<문제 발생>

div{ height:100%; background-color: blue }이면 화면에 색이 안 보인다.

why? 부모 기준으로 높이를 잡기 때문

body { height:100% } 해도 여전히 안 보임

html{ height:100%; } 해야 보임

why? html -> body -> div라서 

 

in contrast, div { height: 100vh; background-color: blue } 하면 브라우저 영역을 잡아서 보임 

 

 

# margin

<상, 하>

.box1 { margin-bottom: 20px; }

.box2 { margin-top: 40px; } 인 경우, 숫자가 큰 쪽으로만 처리 => 두 박스 사이 거리는 40이지 60이 아님

 

<좌,우>

.box1 { margin-right:20px;}

.box2 { margin-left:30px;}

얘는 60으로 됨

 

< 박스 크기 설정 >

부모 컨테이너 밖으로 삐져나가지 않게 하려면 child container에 box-sizing: border-box; 속성 추가

안 그러면 삐져나감 why? width: 100%가 부모박스의 content 기준이라 자식 박스의 padding부분은 빠져나갈 수 있음

 

오늘 수업 내용은 기억해야함

이런 내용들이 책에 한번에 안 나오고 여기저기 흩어져있기 때문임

 

.inline-box{ display: inline; background-color:pink; width: 100px }

inline의 경우 텍스트 흐름을 따르게 되어있음 > 따라서 width, height들 설정해봤자 변화가 없슈..

단 margin-left, margin-right는 변화가 생김. 텍스트 흐름에 지자을 주지 않기 때문.

 

cf) display:inline-block

전체 공간을 차지하지 않아도 되지만 사이즈의 조절이 필요할 때 씀 ex. 버튼