[HTML/CSS] 텍스트 이탤릭체, 밑줄, 취소선 적용하기
- Web/HTML, CSS
- 2023. 1. 15.
웹 문서를 만들다 보면 이탤릭체, 밑줄, 취소선등을 통해 텍스트 스타일을 바꿔주고 싶을 때가 있습니다. 이렇게 문장 일부분의 스타일을 바꿔주면 다른 문장과 대비되어 강조되는 효과를 줄 수 있는데요. 글자 기울기는 font-style로 설정할 수 있고 밑줄과 취소선은 text-decoration 속성을 통해 설정할 수 있습니다. 이번 포스팅에서는 텍스트 스타일을 바꿔주는 방법에 대해 알아보도록 하겠습니다.
이탤릭체(font-style) 사용하기
See the Pen 이탤릭체1 by wjdxo513 (@wjdxo513) on CodePen.
style 속성 값
- normal : 기본값
- italic : 이탤릭체 글꼴로 디자인된 폰트 사용
- oblique : normal 상태 글씨를 그냥 기울여 씀
- initial : 이 속성의 기본값 사용.
- inherit : 부모 요소의 스타일을 상속
※ HTML 태그는 <body>, <h1>, <div>, <span>, <p>, <li> 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다.
italic과 oblique의 차이점
style에서 사용할 수 있는 italic, oblique 속성은 둘 다 이탤릭체를 사용한다는 공통점이 있습니다. 다만 italic은 기울어진 글꼴이 처음부터 디자인 되어 있는 반면에 oblique는 원래 글꼴을 단지 기울어지게 표시할 뿐입니다. 대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있기 때문에 웹 문서에서는 주로 italic을 사용합니다.
CSS 처리
See the Pen 이탤릭체2 by wjdxo513 (@wjdxo513) on CodePen.
CSS처리하면 위와 같이 됩니다.
밑줄, 취소선(text-decoration) 사용하기
See the Pen 밑줄1 by wjdxo513 (@wjdxo513) on CodePen.
text-decoration 속성 값
- none : 걸려있는 속성을 무효화합니다.
- underline : 텍스트에 밑줄을 표시합니다.
- overline : 텍스트에 윗줄을 표시합니다.
- line-through : 텍스트에 취소선을 표시합니다.
※ HTML 태그는 <body>, <h1>, <div>, <span>, <p>, <li> 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다.
CSS 처리
See the Pen 밑줄2 by wjdxo513 (@wjdxo513) on CodePen.
CSS처리하면 위와 같이 됩니다.
'Web > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 작은 대문자로 표시하기 (font-variant) (1) | 2023.01.17 |
|---|---|
| [HTML/CSS] 대/소문자 변경하기 (text-transform) (1) | 2023.01.16 |
| [HTML/CSS] 글자 굵기 변경하기 (font-weight) (1) | 2023.01.14 |
| [HTML/CSS] 글자색 변경하기 (font-color) (1) | 2023.01.13 |