11일. CSS(2) - 제일 큰 방 만들기, min-height, 가변길이(rem,em) vs 고정길이

* CSS 속성들 (마진 등등)

1. 박스 다루는 속성들

- 방 만들기

  제일 큰 방을 단방향으로 정하기

  큰 방 안에서! 다시 나누기

 

2. 컨텐츠 다루는 속성들 

 

//

 

* 제일 큰 방 (BOX) 설정

- 스타일링은 무조건 <div> 태그 (section 태그 쓰면 절.대.노)

- 보통 header, footer는 다 있음

가운데 2개 방은 추가하자.

aside, main 포함시키는 태그를 <div>로 감싸줌

위의 body는 구조적으로 body이고, id="body"는 내가 id명으로 명명해준 것

 

3개의 방이 준비가 됨! 

 

Q. Customer 라고 써진 부분은? 

-> 이건 이미지. 아래 2번처럼 넣어준다.  

4개 방 준비 완료!

 

CSS에서도 4개 방 준비!

내용물이 70px이 넘어도, header에 먹힌 70px에 의해서 절대 70px를 넘어서는 일이 없다.

Q. 왜 글자가 겹쳐지지...? 

-> 방 크기가 작아서. 

    컨텐츠들은 저절로 작아지고 커지고 그렇지 않다는거~ ㅠ

 

• overflow 
• ctrl + k +c -> 내용 숨기기 (스타일 만드는데 방해되서)

그럼 이렇게 내용 없이 스타일 꾸밀 수 있다~ 

원래 홈페이지 보면 이렇게 붕 떠있지 않은데, 만든걸 보면 붕 떠있음

 

모든 그림은 4가지를 가진다. 

-> body에 margin : 0; 을 실행

- 항상 사이즈를 같이 붙여야 하지만 (px같은거) '0' 만큼은 0은 0 이기에 사이즈를 붙이지 않아도 됨!

- 여기서 body는 몸통!을 의미하는 body임 (앞에 기호 다른 것만 봐도 알겠지~~)

 

 

* 스터디 소그룹에서 더 이해한 부분

 

 

 

 

green은 늘어나야 함

- 컨텐츠 목록이 늘어나면 늘어날 수 있도록

원래 저기 본문에 작성된 글도 초록이 안으로 들어가게끔 해주는 법은 ↓

높이 빼는 것도 안 됨 (그럼 아예 저 초록색 부분이 사라짐) 

-> min-height

• min-height : 최소일 때는 이 정도 유지했다가 늘어나게끔 하자~ 

 

 

 

*고정 높이, 가변 높이

* 수치, 단위

 

Q. px(픽셀)이란?

- 화면은 작은 전구?로 이루어진 배열. 이 하나하나를 px라고 한다. 

 

cf) in = inch

 

 

header 크기 키워주면 이렇게 

- 폰트가 커지면 영역도 같이 커지길 바람... 

  그런데 우리는 지금 고정 크기로 해놔서... 직접 고쳐야 함.ㅜㅜ 

 

So, 가변 크기 !

폰트 사이즈의 기본은 16px. 

60px로 바꾸면 이렇게 됨

• em : 폰트의 '전체' 높이의 4.5배가 되는 것
• ex : 폰트의 중간? 높이의 4.5배가 되는 것 (위에위에 ppt 보기)

header 에 적용해줬으니 아래도 적용된다는게 요지

 

만약 이렇게 div를 따로 해준다면, 이게 이기고.

 

Q. em 하고 px를 같이 써주면 '쏙' 들어가야 하는거 아닌가...? 

   왜 inner box가 아래 위치하지? (쏙-은 아닌 상태) (100px로 키우면 그 차이가 더 큼) 

• line-height : 글자 쓰는 곳. 이거로

height는 '높이'

line-height는 '글자 쓰는 곳'

 

 

 

* rem

- '전체'를 대상으로 사용 cf) em은 지엽적이었음

- em을 남발하면, 위에서 폰트를 바꾸면 되게 엉망이 될 수 있음.

 

의도적으로 이렇게 사용해줄 수도 있다~

rem, em 섞어서 쓰면 헷갈린다. 

 

em 쓴 얘들은 영향 받고

rem은 위에 html에 영향을 받고

rem은 '전체' -> 그래서 맨 위에 html의 폰트에 영향을 받음

em은 '지엽적' -> 그래서 얘는 위의 폰트 사이즈가 아니라, id 내? 폰트 사이즈 or 그 아래에 써진 폰트 사이즈에 영향을 받음