[코드잇 - 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을 사용
