[코드잇 - HTML/CSS 시작하기] 5. 텍스트 스타일링

01.  텍스트 색 지정하기

# CSS에서 색을 표현하는 방식

1. 색 이름 지정하기

h1 {
  color: blue;
}

2. RGB 값

h1 {
  color: rgb(83, 237, 65);

3. HEX 값 (16진법) 

h1 {
  color: #53ED41;
}

---

02. 폰트 굵기 설정 

# font-weiight 

- 사용 가능한 값은 100,200,300...900 까지 100 단위로 

- font-weight : normal; 은 font-weight :400; 과 같음 

- font-weight : bold; 은 font-weight :700; 과 같음

- 폰트나 브라우저에 따라 지원하는 폰트 굵기 값이 다름

font-weight: 900;

---

03. 텍스트정렬

# text_align 

- text-align: center; : 가운데 정렬

- text-align: right; : 오른쪽 정렬

- text-align: left; : 왼쪽 정렬

---

04. 텍스트 꾸미기 

# text-decoration

- text-decoration: underline; : 밑줄 그어짐 

- text-decoration: overline; : 글 위에 줄 그어짐 

- text-decoration: underline; : 줄이 글을 관통

- text-decoration: none; : 아무 줄도 없음, 기본 값 

   -> <a> 태그는 기본적으로 밑줄이 그어져있는데, 이걸 없애기 위해서 많이 사용

---

05. 텍스트 크기

#  font-size

- 절대적(Absolute) 방법 : px, pt 

    - pt가 px의 약 1.33배 크기 

    - pt는 웹 사이트 만들 때 잘 안쓰임 

- 상대적(Relative) 방법 : em, % 

   - %로 폰트 크기를 계산할 때는 부모 요소의 크기로 결정됨 

   - 1em = 100% , 2em = 200% 

---

06. 폰트 설정 

Serif 폰트 : Times New Roman, 궁서체 등

- 끝이 구부러진 특징 

Sans-Serif : Arial, 굴림체 등 

- 끝이 구부러져 있지 않아 깔끔한 디자인 가능 

Monospace : Courier, Courier New 등

- 모든 글자 폭이 같아 코딩용으로도 많이 쓰임

Cursive : Comic Sans Ms, Monotype Corsiva 등 

- 필기체 

Fantasy : Impact, Haettenschweiler등 

- 지저분해 보일 수 있어 긴 글에는 쓰이지 않고, 머리말 등에 잘 쓰임 

 

# font-family 

font-family: "Times New Roman", Times, serif;

- 사용자의 컴퓨터에 Times New Roman 폰트가 있다면 나타내고, 없다면 Time 폰트로 나타내며, 그것 또한 없다면 serif 폰트들 중 하나로 대체 

 

# 구글 폰트 

- 구글 폰트 사이트 : https://fonts.google.com/

- 원하는 폰트와 스타일 선택 후 select 

- selected familes에서 link 태그 복사 해 head 안에 넣기 

- 맨아래 CSS 코드로 스타일하기

- 참고한 사이트 : https://imweb.me/faq?mode=view&category=29&category2=38&idx=71290 

 

# 폰트 파일 사용하기 

- @font-face 안에 폰트파일의 경로와 해당 폰트의 이름을 지정

@font-face {
    font-family: "BMdohyeon";
    src: url("../fonts/BMDOHYEON_ttf.ttf");
}

h3{
    font-family: 'Dohyeon';
}

---

07. span 태그 

- span 태그와 div태그의 공통점은 요소들을 그룹화 해주는 것 

- div 태그는 글을 새로운 줄에 놓지만, span 태그는 원래 줄에 글을 놓음 

- 특정 부분만 스타일을 적용해주고 싶을 때 span을 사용 

div 태그로 일부만 red 컬러 설정 시 : 줄이 끊어짐

span 태그로 일부만 red 컬러 설정 시 : 줄이 끊어지지 않고 이어짐