[CSS] 서체와 웹폰트, verticl-align 속성

1. font-family 속성

👉 MDN에서 font-family 관련 상세 정보 보기

body {

    font-family: A,B,C,D,sans-serif 

}

 

A가 없으면 B CD가 보임.

 

※ sans-serif , serif, cursive

CSS 폰트의 한계

• 사용자의 컴퓨터에 있는 폰트만 실질 적용 가능
• 맥 사용자, 윈도우 사용자간 탑재 폰트 차이
• 일관성 유지 어려움

 

2. 웹 폰트

서버에 저장된 서체를 사용자의 컴퓨터에서 사용할 수 있도록 함

ex)

@font-face {
  font-family: "MyNotoSans";
  src: url(./fonts/NotoSansKR-Regular.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 100;
  src: url(./fonts/NotoSansKR-Thin.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 300;
  src: url(./fonts/NotoSansKR-Light.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 500;
  src: url(./fonts/NotoSansKR-Medium.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 700;
  src: url(./fonts/NotoSansKR-Bold.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 900;
  src: url(./fonts/NotoSansKR-Black.otf);
}

• 👉 구글 폰트
• 👉 눈누 (상업용 무료 한글폰트)

단, 라이선스 요약표 참고하기

 

눈누 사용방법 :

구글 폰트 사용 방법 ) 

1. link 복사

2. font-family 다운 후 루트 폴더안에 font 폴더를 생성해서 삽입

 

3. vertical-align 속성

1. inline 요소 안에서의 사용

인라인 텍스트와 함께 나열된 인풋 요소, 이미지 등의 세로 배치에 유용합니다.
👉 MDN 문서 보기

2. table-cell 요소 안에서의 사용

테이블 셀 안의 텍스트 세로 배치에도 사용됩니다.
👉 MDN 문서 보기

3. white-space 속성

👉 MDN 문서 보기

4. text-overflow 속성

텍스트가 상자의 너비를 넘어갈 때 어떻게 표시될지를 지정합니다.

overflow는 hidden 또는 scroll로, white-space는 nowrap으로 지정해야 합니다.