티스토리 꾸미기 | 다양한 밑줄과 HTML 속성으로 텍스트 강조하기

▸티스토리 이야기/•티스토리 꾸미기

티스토리 꾸미기 | 다양한 밑줄과 HTML 속성으로 텍스트 강조하기

Galam. 2024. 4. 21. 14:31

다양한 밑줄 관련 text 태그의 종류 알아보기

오늘은 다양한 종류의 밑줄을 CSS 수정이 아닌 본문에서  태그를 이용해 HTML로 직접 넣어 주는 방법에 대해서 알아보겠습니다.

다소 복잡하고 난해한 설명이라 이런 게 있다는 정도만 알아두어도 블로그 작성에 도움이 될 수 있습니다.

기존의 획일적인 밑줄이 아니라 조금 더 강조하거나 특별하게 꾸미고 싶은 부분에 사용해 보세요.

참고한 블로그: 코딩에브리바디 (codingeverybody.kr)

다양한 HTML과 CSS, JavaScript까지 자세히 설명되어 있으니, 코드에 관심이 있으시면 꼭 한번 방문해 보시기 바랍니다.

텍스트 강조하기

폰트 크기 및 굵기로 강조하기

폰트의 크기와 굵기를 변경해 간단하게 텍스트를 강조할 수 있습니다.

font-size:1em;	폰트-크기: em, px;
font-weight: bold;	폰트-굵기: bold, 400, 600, 800;
color: #ff0000;	폰트 색상

폰트 크기 HTML

1. 폰트 강조 하기

2. 폰트 강조 하기

적용 예제

1. 폰트 강조 하기

2. 폰트 강조 하기

폰트 굵기 HTML

1. 폰트 강조 하기

2. 폰트 강조 하기

적용 예제

1. 폰트 강조 하기

2. 폰트 강조 하기

폰트 크기와 굵기를 모두 적용

1. 폰트 강조 하기

적용 예제

1. 폰트 강조 하기

<span style="font-weight: bold; font-size: 1.3em;">강조</span>

글색은 에디터의 글자색을 이용해 변경하면 됩니다.

적용 예제

1. 폰트 강조 하기

text-decoration: 태그 밑줄

text-decoration: 태그를 이용해 밑줄의 위치를 상, 중, 하로 지정해 줄 수 있습니다.

underline	텍스트 하단 밑줄
overline	텍스트 상단 밑줄
line-through	텍스트 중앙 취소선
none	밑줄 없음

밑줄 위치 HTML

1. 텍스트 하단 밑줄 만들기

2. 텍스트 상단 밑줄 만들기

3. 텍스트 중앙 취소선 만들기

4. 텍스트 밑줄 없음

적용 예제

1. 텍스트 하단 밑줄 만들기

2. 텍스트 상단 밑줄 만들기

3. 텍스트 중앙 취소선 만들기

4. 텍스트 밑줄 없음

position: under; 태그 기본 밑줄 간격

여기서 위의 적용 예제를 잘 보시면 밑줄이 텍스트에 바짝 붙어있어 가독성이 떨어집니다. 이때는 text-underline-position: under; 코드를 추가해서 밑줄을 살짝 띄어줄 수 있습니다.

text-underline-position: under;

기본 밑줄 간격

기본 밑줄 HTML

1. 텍스트 기본 밑줄 간격 적용 전

2. 텍스트 기본 밑줄 간격 적용 후

적용 예제

1. 텍스트 text-underline-position: under; 적용 전

2. 텍스트 text-underline-position: under; 적용 후

<span style="text-underline-position: under; text-decoration: underline solid;">하단 실선</span>

<span style="text-underline-position: under; text-decoration: overline solid;">상단 실선</span>

offset: 태그 밑줄 간격 조정

text-underline-position: under;는 밑줄이 고정되지만 text-underline-offset: 1px;를 이용하면 밑줄의 간격을 조정할 수 있습니다.

1px의 숫자가 높아질수록 하단 넓어지며 -(마이너스)를 적용하면 상단으로 올라갑니다.

text-underline-offset: 1px;	하단 밑줄 간격
text-underline-offset: 10px;	하단 밑줄 간격
text-underline-offset: -5px;	-를 이용한 상단 밑줄
text-underline-offset: -20px;	-를 이용한 상단 밑줄

밑줄 간격 조정 HTML

1. 텍스트 밑줄 간격 조정

2. 텍스트 밑줄 간격 조정

적용 예제

1. 텍스트 밑줄 간격 조정

2. 텍스트 밑줄 간격 조정

<span style="text-underline-offset: 10px; text-decoration: underline solid;">밑줄 간격</span>

text-decoration: 태그 밑줄 두께 조정하기

text-decoration: underline 태그의 밑줄 종류 뒤에 px를 이용해 밑줄의 두께를 조정합니다.

text-decoration: underline solid 2px;	밑줄 두께
text-decoration: underline solid 10px;	밑줄 두께

밑줄 두께 조정하기

1. 텍스트 밑줄 두께 조정

2. 텍스트 밑줄 두께 조정

박스 인용구 1

1. 텍스트 밑줄 두께 조정

2. 텍스트 밑줄 두께 조정

text-decoration: 태그 밑줄에 색상 넣어주기

text-decoration: underline 태그의 밑줄 두께 px 뒤에 색상 코드를 넣어 밑줄의 색상을 조정합니다.

text-decoration: underline solid 2px #ff0000;	밑줄 색상
text-decoration: underline solid 10px #ff0000;	밑줄 색상

밑줄 두께 조정하기

1. 텍스트 밑줄 색상 조정

2. 텍스트 밑줄 색상 조정

박스 인용구 1

1. 텍스트 밑줄 색상 조정

2. 텍스트 밑줄 색상 조정

text-decoration: 태그 밑줄 스타일

text-decoration: underline(하단)또는 text-decoration: overline(상단) 뒤에 아래 태그를 붙여 밑줄의 종류를 변경할 수 있습니다.

solid	한 줄 실선 밑줄
double	두 줄 실선 밑줄
dotted	둥근 점선 밑줄
dashed	사각 점선 밑줄
wavy	왜이브 물결 밑줄

밑줄 종류 HTML

1. 텍스트 한 줄 실선 만들기

2. 텍스트 두 줄 실선 만들기

3. 텍스트 둥근 점선 만들기

4. 텍스트 사각 점선 만들기

5. 텍스트 웨이브 물결 만들기

적용 예제

1. 텍스트 한 줄 실선 만들기

2. 텍스트 두 줄 실선 만들기

3. 텍스트 둥근 점선 만들기

4. 텍스트 사각 점선 만들기

5. 텍스트 웨이브 물결 만들기

<span style="text-underline-position: under; text-decoration: underline solid 2px #ff0000;">1. 한 줄 실선</span>

<span style="text-underline-position: under; text-decoration: underline double 2px #ff0000;">2. 두 줄 실선</span>

<span style="text-underline-position: under; text-decoration: underline dotted 2px #ff0000;">3. 둥근 점선</span>

<span style="text-underline-position: under; text-decoration: underline dashed 2px #ff0000;">4. 사각 점선</span>

<span style="text-underline-position: under; text-decoration: underline wavy 2px #ff0000;">5. 웨이브 물결</span>

밑줄 꾸미기

1.

2. 밑줄의 종류, 두께, 색상, 위치 등 을 변경 하시면 다양한 스타일의 밑줄을 만들 수 있습니다.

728x90

box-shadow: 태그를 이용한 백그라운드 밑줄

box-shadow: 태그를 사용하면 텍스트의 배경(백그라운드)에 색상을 넣어주고 두께를 조절해 밑줄을 만들어 줄 수 있습니다. 밑줄의 두께는 -10px를 변경하여 조절할 수 있습니다.

box-shadow:inset 0 -10px #94FEFF

백그라운드 밑줄

박스 인용구 4

1. 텍스트 백그라운드 밑줄 만들기

2. 텍스트 백그라운드 밑줄 만들기

2. 텍스트 백그라운드 밑줄 만들기

박스 인용구 4

1. 텍스트 백그라운드 밑줄 만들기(-20px)

2. 텍스트 백그라운드 밑줄 만들기(-10px)

2. 텍스트 백그라운드 밑줄 만들기(-5px)

<span style="box-shadow:inset 0 -10px #FFC5FD;">백그라운드 밑줄</span>

text-emphasis 속성으로 텍스트 강조하기

text-emphasis: 속성을 이용하면 텍스트 상단에 도트나 문자 또는 특수문자를 표시할 수 있습니다.

text-emphasis: dot	상단 토트 강조
text-emphasis: '특수문자'	상단 특수문자 강조

텍스트 강조하기 HTML

1. 텍스트 강조 만들기

2. 텍스트 강조 만들기

3. 텍스트 강조 만들기

적용 예제

1. 텍스트 강조 만들기

2. 텍스트 강조 만들기(특수문자)

3. 텍스트 강조 만들기(한글이나 영문 문자)

<span style="font-size: 1.1em; font-weight: bold; text-emphasis: dot #ee2323;">텍스트 강조</span>

<span style="font-size: 1.1em; font-weight: bold; text-emphasis: '◆' #ee2323;">텍스트 강조</span>

텍스트 강조 꾸미기

1.

2. 강조의 종류, 글꼴 크기, 굵기, 색상, 등 을 변경 하시면 다양한 스타일을 만들 수 있습니다.

마무리

폰트 속성과 밑줄, 텍스트강조 등 을 조합하면 다양한 방법으로 텍스트를 강조할 수 있습니다.

처음 밑줄 관련 글을 적으려 시작하고 구굴링을 하면서 추가하다 보니 두서없이 글만 길어지고, 몇 번을 썼다 지웠다를 반복하다 결국은 저도 알아보기 힘든 글만 남았네요. ㅎㅎㅎ