[10DEC, 2020] CSS Font & Box

FONT :

CSS에서 폰트는 font property를 통해 설정할 수 있다.

color는 hex color로 설정하며 기본적인 white, black, blue 등은 영어입력으로도 나온다!

글꼴은 font-family로 설정하며 구글폰트에서 다양한글꼴 이용가능하다.

 

 

💡 Today's Check Point

 

font에서 내가 어렵다고 느낀건 크기를 설정하는 단위이다.

절대단위 : px, pt 등
상대단위: %, em, rem, ch, vw, vh 등

 

*px: 

화면크기가 절대적인 경우 (ex.출력용)에 유리하다.

px는 CSS를 통해 글씨크기가 고정되기에 사용자가 브라우저 글꼴크기를 키워도 적용이 안되어서 불편함이 있을 수 있으며

모바일에서도 뚜렷하지 못한 형태로 출력될 수 있다.

 

*rem: 

보통의 경우는 rem을 추천한다고 한다. rem 단위를 쓰면  변환된 픽셀 크기는 페이지 최상위(root) 요소, 그러니까 html 요소의 폰트 크기가 기준이 된다. 이 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 바로 마지막 변환된 값이라고 한다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다.

 

*em: 

em은 상위 엘리먼트(부모 엘리먼트)에 따라 상대적으로 크기가 변경되어서 계산이 어렵다. 그래서 em단위를 가지고 작업을 하면 복잡한 상황에 부딪힐 수 있다고 한다. (반면 rem은 root의 글자 크기에 따라서만 상대적으로 변한다는 것 기억하기!)

 

---

BOX :

모든 콘텐츠는 각자의 영역을 가지고 있으며 보통 엘리먼트로 묶이는 콘텐츠가 하나의 박스가 된다. 박스는 항상 사각형이고, 그 너비(width)와 높이(height)가 있어서 CSS로 크기를 지정해줄 수 있다. 박스의 종류는 Block box, Inline box, Inline-block로 구분할 수 있다.

 

 

💡 Today's Check Point

 

 

*Block box / Inline box / Inline-block box 의 차이점: 

block box는 줄바꿈이 되고 기본적으로 100%의 너비를 가지며, width, height 지정가능하다.

하지만 inline box는 줄바꿈이 되지 않고 글자가 차지하는 만큼의 너비만을 가지며 width, height 지정 불가능하다.

inline-block box는 두 가지 박스의 특징이 합쳐진 박스로 글자가 차지하는 만큼의 너비를 가지고 줄바꿈이 되지 않지만 width, height는 지정가능하다.

 

 

*박스모델: 

Border(테두리), Padding (안쪽 여백), Margin (바깥 여백- margin은 음수값도 지정가능)

개발자 도구에서 범위를 확인할 수 있다.

 

 

*박스크기: 

박스의 크기는 우리가 생각하는 것처럼 여백을 포함한 것이 아닌 콘텐츠 영역에만 적용되어 있다. 그래서 레이아웃을 어렵게 하기에 여백과 테두리 두께를 포함해 계산하기 위해서는 아래 스타일을 추가해주면 된다.

* {
  box-sizing: border-box;
}

box-sizing은 페이지 일부분에 적용할 필요가 없기에 전체로 적용해준다.