[CSS] 반응형 웹, 웹 폰트, Typography

반응형 웹

📍반응형 웹을 만들기 위해 필요한 2가지

• meta tag 선언하기
  ▪️ meta tag : 웹 페이지의 메타 데이터를 정의하고, 검색엔진최적화(SEO)를 위해 검색엔진에게 메타 데이터를 전달하는데 사용된다.

<meta name="viewport" content="width=device-width", initial-scale=1.0" />

• css에 media query 적용하기
  ▪️ @media : 미디어 유형에 따라 다른 스타일을 적용하는데 사용된다.

@media screen and (min-width: 576px){
  /* css 선언 */
}

✔️ 반응형 웹 제작할 땐 모바일 -> 데스크탑 순서로 작업하는 것이 좋다

---

Webfont

📍 웹 폰트 사용하는 방법

1. 가져다 쓰기 -> 사이트에서 복사 + html, css에 붙여넣기
   • 구글 폰트
   • 눈누 폰트
     
     
2. 직접 제공하기 -> 폰트 다운로드 + fonts.css 파일 활용

• @font-face 코드 양식 활용하기

/*fonts.css*/
@font-face{
  font-family: 'kimbug';   /* 이름 지정 */
  font-style: normal;
  font-weight: 300;
  src: url('./assets/fonts/NanumSquareRoundL.eot'); 
  src: url('./assets/fonts/NanumSquareRoundL.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/NanumSquareRoundL.woff2') format('woff2'), 
        url('./assets/fonts/NanumSquareRoundL.woff') format('woff'),
        url('./assets/fonts/NanumSquareRoundL.ttf')  format('truetype');
}

• style.css에 fonts.css 파일 import 하기

/* style.css */
@import url('./fonts.css')

• 폰트 사용하기

body{
  font-family: kimbug, sans-serif;
}

---

Typography

• em : 상대단위, 요소에 적용된 폰트 사이즈가 1em이 된다.
• rem : 상대단위, 최상위 요소인 html에 적용된 폰트 사이즈가 1rem이 된다.
• line-heignt : em 단위 사용할 경우, 생략하여 작성한다.
• 색상 표현 단위 : hex (#0066aa), rgb(0, 102, 255), rgba(0, 102, 255,1)
  ▪️ a : alpha, 투명도 (1이 불투명, 0이 투명)
• text-indent : 들여쓰기(음수도 사용 가능)
• text-transform : none, capitalize (앞글자만 대문자), uppercase (모두 대문자), lowercase
• dummy text 생성 : lorem글자수

---

참고 사이트

• 2.19 CSS3 반응형 레이아웃
• 2.3 CSS 프로퍼티 값의 단위
• 2.7 CSS3 폰트와 텍스트