[css] 폰트 굵기설정(font-weight) / 텍스트 꾸미기(text-decoration)

font-weight

/* css */
#p1 {
  font-weight: 400;
}

#p2 {
  font-weight: 700;
}

#p3 {
  font-weight: normal;
}

#p4 {
  font-weight: bold;
}

<!-- html -->
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<p id="p3">Hello World!</p>
<p id="p4">Hello World!</p>

Hello World!

Hello World!

Hello World!

Hello World!

• font-weight는 폰트의 굵기를 설정해주는 속성이다.
• 사용가능한 범위는 100~900까지로 100단위별로 사용할 수 있으며, 100이 가장 얇고, 900이 가장 굵다.
• font-weight: normal;은 font-weight: 400;과 같고, font-weight: bold;는 font-weight: 700;과 같다.
• 100단위로 사용하지 않는다면, 기본값이 출력된다.

 

text-decoration

텍스트에 줄을 그어주는 속성이다.

 

Underline

/* css */
h5 {
  text-decoration: underline;
}

<!-- html -->
<h5>Hello World!</h5>

Hello World!

 

밑줄이 생성된다.

 

 

Overline

/* css */
h3 {
  text-decoration: overline;
}

<!-- html -->
<h3>Hello World!</h3>

Hello World!

 

글 위에 줄이 그어진다.

 

 

Line-through

<!-- html -->
<h6>Hello World!</h6>

/* css */
h6 {
  text-decoration: line-through;
}

Hello World!

 

줄이 글 중앙선에 그어진다.

 

 

원래 있던 줄을 없애기 위해서는 아래와 같은 코드를 사용한다.

text-decoration: none;