CSS 03_font

[기본적인 글꼴 관련 속성]

---

• font-family : 글꼴 종류를 지정한다. 
  • 기본값은 웹브라우저 기본 글꼴
  • ex) font-family : 'Noto Serif KR', serif;   #Noto Serif KR 글꼴로 바꾸되, 만약 브라우저에 없는 글꼴이라면 serif 글꼴을 적용한다.
  • <웹 폰트> : 사용자의 컴퓨터에 설치된 폰트와 상관없이 온라인의 특정 서버에 위치한 폰트파일을 다운로드하여 화면에 보여주는 폰트를 웹 폰트라고 한다.
    • Google Fonts 사이트에 방문하여 <link> 또는 @import 문을 사용하여 웹 폰트를 적용할 수 있다.

<style>
/* Noto Sans KR 폰트 다운로드 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap');
/*
	h1 태그에 'Noto Sans KR' 폰트 적용,
	만약 다운로드 실패하면 '바탕'글꼴 적용
*/
h1 {
	font-family: 'Noto Sans KR', 바탕;
}
</style>

• font-size : 글자 크기를 지정한다.
• font-style : 글자를 이탤릭체로 표시할지 지정한다.
• font-weight : 글자 굵기를 지정한다.
• font-variant : 소문자를 작은 대문자로 바꾼다.
  • ex) font-variant : small-caps;

 

[단위]

---

• px : 픽셀 단위
• rem : 최상위 엘리먼트의 몇 배로 지정할 것인지
  • html에서 최상위 엘리먼트는 html태그이다. 예를 들어 style 태그의 html 선택자에서 font-size:18px로 지정했다면 글꼴사이즈를 지정하지 않은 다른 태그들의 font size는 18px이 된다.

html {
        font-size: 16px;
      }
.subtitle-rem {
        font-size: 2rem;
        /* 최상위요소는 html태그인데, html 태그에서 16px로 글꼴 크기를 지정했으므로 2*16=32px */
      }

 

• em : 현재 자기 자신 엘리먼트의 몇 배로 지정할 것인지
  • 부모 요소를 그대로 상속받아 자기 자신 엘리먼트의 font size가 10px일 때, 2em을 적용시켜주면 실질적으로 해당 d엘리먼트의 font size는 20px이 된다.
• vw : viewport(웹 브라우저 창) 너비의 1% 
  • 100vw : viewport 너비의 100%
• vh : viewport 높이의 1%
  • 100vh : viewport 너비의 100%
  •  

      .rectangle.width {
        width: 50vw;
        height: 100px;
        background-color: yellow;
      }
      .rectangle.height {
        height: 20vh;
        width: 100px;
        background-color: blue;
      }

 

[색상 키워드]

---

1. 색상 이름

ex) blue, red, green 

2. RGB / RGBA 표기법

- 마지막 인자는 투명도를 나타낸다.

ex) rgb(0,0,0) , rgb(0,0,0,0)

3. 16진수 표기

- # 다음16진수를 작성해 색을 표시할 수 있다. 선택사항으로 마지막 두자리는 투명도를 나타낼 수 있다.

 

[그 외 글자 관련 속성]

---

• text-align : 블록 요소나 테이블 셀 박스 안에서 글자를 정렬하는 데 사용한다.
  • ex) text-align : start , end, left, right, center, justify

• line-height : 줄 간격을 설정한다. default는 1.25 (1.5이상 줘야 글을 읽기 용이)
• letter-spacing : 글자 사이의 간격
• word-spacing : 단어 사이의 간격 (px이나 em으로 조정)
• text-indent : 들여쓰기
• text-transform : 대문자(text-transform: uppercase) 또는 소문자(text-transform: lowercase)로 바꾸는 속성
• text-decoratioin : 글자를 꾸미는 데 사용한다. <a> 태그에서 밑줄을 없앨 때 많이 사용한다.
  • ex) text-decoration: none; ⇒ a 태그의 밑줄이 없어진다.
  • underline, dotted, overline(텍스트 위에 밑줄), none, linethrough(취소선) 과 같은 값이 올 수 있다.
• text-shadow : 글자의 그림자를 넣을 수 있다. (가로, 세로, 번짐의 정도, 색상)
• list-style : 리스트 스타일을 변경할 수 있다. (list-style : none; ⇒ ul>li 태그에서 까만 동그라미(글머리 기호) 제거)
  • circle, square, upper-alpha, none 와 같은 값을 사용할 수 있다.

 

짐코딩 강의를 참고하였습니다.