Ch 8. CSS 속성- 투명도, 글꼴, 문자

투명도

opacity

  • 1: 불투명(기본값)
  • 0-1: 0부터 1사이 소숫점 숫자 (ex: .5)

글꼴

font-style: 글자 기울기

font-weight: 글자 두께

  • normal, 400: 기본 두께
  • bold, 700: 두껍게
  • 100~900: 100단위 숫자 9개로 두께 조절

line-height: 한 줄의 높이 (행간과 유사)

image

  • 숫자: 요소의 글꼴 크기의 배수
  • 단위: px, em, rem …

font-family: 폰트

font-family: 글꼴1, “글꼴2”, …글꼴계열(필수);

  • 후보와 글꼴 계열을 지정해준다. 브라우저는 제일 먼저 명시돼있는 후보를 우선적으로 가져온다.

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14

h1 {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  font-family: serif;
}

p {
  width: 350px;
  padding: 10px;
  border: 1px solid;
  box-sizing: border-box;
  line-height: 1.4;
}

문자

image

text-align: 문자 정렬방식

text-decoration: 문자 장식(선)

  • underline: 밑줄
  • line-through: 중앙 선

text-indent: 들여쓰기/내어쓰기

  • 양수: 들여쓰기
  • 음수: 내어쓰기
1

<a href="https://google.com">Google</a>

1
2
3
4
5
6
7
8
9
10

a {
  background-color: orange;
  width: 200px;
  height: 100px;
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
  line-height: 100px;
}