[CSS]230309 Chap 8 #8~13

강의 | Chap 8 CSS 속성

#8. 크기 계산(box-sizing)

box-sizing을 border-box로 지정하면 처음 계획했던 크기보다 커지지 않도록(=크기 상한선이 정해지도록) 만들 수 있다.
➜ 추가적인 계산이 필요치 않아서 편리함!

#9. 넘침 제어(overflow)

overflow-x, overflow-y로 개별 제어도 가능함.

scroll vs auto?

scroll은 요소가 한 쪽만 넘쳐도 양쪽(x, y축)다 스크롤바를 만들 수도 있음. (=불필요!)
그러나 auto는 넘친 쪽만 scroll 축이 생기도록 만듬.

hidden vs auto?

hidden은 넘친 부분을 잘라내고 보여주지는 않아서, 넘친 내용도 보여줘야 한다면(=중요하다면) auto를 쓰는게.

#10. 출력 특성(display)

block : inline 요소에 가로 세로 필요할 때 필요함.
inline-block: 글자긴 한데 상자 요소(div)가 가질 수 있는 특성 몇 개(가로-세로 길이 등)를 더 가지고 있다.
flex : 1차원 레이아웃
grid : 2차원 레이아웃
none : 안보이게 하는 기능. 특정 상황에서 유용하다. (안보였다 보이게 한다던지, vice versa.)

#11. 투명도

0~1 사이의 수로 지정 가능한데, opacity: .5 이런식으로 0을 생략할 수도 있다.

#12. 글꼴

font-weight

• 기본 두께(normal): 400
• 두꺼운 두께(bold): 700
• 100 ~ 900 사이 지정 가능

line-height

• 줄높이와 유사

• 숫자: 글꼴 크기의 배수(가령 1.4라면, 1.4*16(기본값))

• 단위: px, em, rem 등
  

• 픽셀 크기를 사용하기 보다는, 배수를 이용해서 자동으로 추후의 수정사항이 반영되게끔 하는 것을 권장.

font-family

• 서체 지정할 때: 띄어쓰기 등 특수문자를 포함하는 글꼴 이름은 ""로 묶어야 함!
  
  참고로 글꼴 종류는 5가지로 나뉜다.
  보통 잘 쓰는 서체는 sans-serif 계열.
  가독성이 높은 글꼴은 monospace.
  

#13. 문자