03/05 HTML/CSS 방 만들기, 가변 높이,크기 지정

카테고리

 

방만들기

: 중첩해서 방을 만든다, 제일 큰 방을 단방향으로 정해보자

 제일 큰방 안에서 더 나누겠다고 하면 그 안에서 다시 나누어야 한다. (방 가로지를 수 없어)

 

 

 

 

 

제일 큰 방(Box) 설정

 

 

 

html와 css에서의 헤더와 포터는 의미가 다르지만 같게 써도 되겠다.

높이px은 저 크기가 기본이다.

 

 

 

 

 

aside 와 main을 div태그를 이용해서 하나로 묶어주자.

 

 

 

 

html 부분

:  네 개의 행 완성

 

 

 

css 부분

 

고정 높이와 배경색 설정해주었다.

 

ctrl + k + c  : html 주석달기

 

헤더부분의 스크롤은 overflow:scroll 해보았음.

 

 

 

 

 

 

가변 높이 설정

 

body 부분에 min-height

 

컨텐츠의 양에 따라 높이가 더 늘어날 수도 있는 body의 경우에는 최소 높이(가변 높이) min-height로 설정해주자

컨텐츠가 없을 경우 body부분이 사라지지 않게 해야하므로 가변 높이 설정

 

 

 

마진 없애기

 

 

항상 개발자 도구를 이용해서 미리 설정해보고, 확인해보자.

 

개발자 도구 / 가장 왼쪽 위의 버튼 

 

 

 

 

 

 

 

 

가변크기, 고정크기

크기지정

 

 

 

px (픽셀) : 화면에서 네모난 작은 단위(전구다마)

 

인쇄를 위한 문서를 만들때는 cm, mm로 편리하게 사용할 수 있음

 

 

 

 

폰트 사이즈를 변경했을 때 고정 높이를 가변높이로 변경해서 함께 사이즈 변경할 수 있도록 해주자.

 

폰트 사이즈의 4.5배 만큼 변하도록 em사용

 

ex를 쓸 경우에는 폰트 중간 크기 만큼 커지게 돼서 em보다는 조금 커진다.

 

 

 

 

 

테스트 문자들을 써보았다. 

 

 

 ->  em은 지역적으로 사이즈를 설정할 수 있는 것인데

->   rem은 루트에 설정한 폰트의 크기의 배수만큼 변경하겠다는 것 (전체를 대상으로 줌인/줌아웃할때)

          루트는 html을 뜻함 바디위에..

 

 

 

 

 

 

루트를 이용해서 rem으로 사용해보았다

 

 

->  rem이나 em 둘 중에 하나로 통일해서 사용하는 것이 훨씬 편리하다.