HTML 및 CSS를 활용한 텍스트 꾸미기: 웹 페이지에서 글자를 더욱 돋보이게 만들기 -`♥´-

 

안녕하세요, 도아입니다.

 

HTML과 CSS, 너무 어렵게 다가오셨었나요?

그동안의 어려움은 날려버리고, 쉽고 예쁜 웹사이트 텍스트를 꾸미는 방법! 전달드리기 위해 가져왔습니다.

 

웹 페이지나 블로그에서 텍스트는 단순한 정보 전달 수단을 넘어, 시각적인 아름다움과 사용자 경험을 좌우하는 중요한 요소입니다!

 

HTML과 CSS를 활용하면 글자를 단순하게 표시하는 것 이상의 다양한 스타일링을 적용할 수 있더라구요. ('. • ᵕ •. `)

 

이번 글에서는 HTML 및 CSS를 활용하여 텍스트를 멋지게 꾸미는 다양한 방법을 소개드리겠습니다. ( ˶ˆᗜˆ˵ )

---

1. 기본 텍스트 스타일링: 색상과 폰트

텍스트의 색상과 폰트는 사용자가 텍스트를 읽는 첫인상을 결정한답니다!

그리고 CSS를 사용해 원하는 색상과 폰트를 쉽게 적용할 수 있어요. (っ* ॑꒳ ॑*)╮

---

색상과 폰트 설정

 

이 텍스트는 파란색이고 Arial 폰트를 사용하고 있습니다.

 

HTML 코드

<p style="color: #3498db; font-family: 'Arial', sans-serif;">
    이 텍스트는 파란색이고 Arial 폰트를 사용하고 있습니다.
</p>

 

위 코드에서 color 속성으로 글자 색상을 설정하고, font-family 속성으로 글꼴을 설정할 수 있습니다.

 

다만 폰트의 경우 티스토리 블로그에는 따로 설정할 수 있는 폰트만 가능한 점, 참고 부탁드립니다. ՞ ̥_  ̫ _ ̥՞♡

---

다양한 색상 사용

색상은 색상 코드나 이름으로 지정할 수 있습니다.

색상 코드 예: #ff5733, #3498db

색상 이름 예: red, blue, green

 

HTML 코드 

p {
color: #2ecc71; /* 초록색 */
}

---

2. 텍스트 크기와 굵기 조절

글자의 크기와 굵기를 조정하면 중요한 정보나 강조하고 싶은 부분을 더 눈에 띄게 만들 수 있어요!

소위 말해 볼드체, 굵은체라고 하죠? ⚈̤᎑⚈̤

---

엄청 큰 텍스트!

작고 얇은 텍스트

 

HTML 코드  

<h1 style="font-size: 36px; font-weight: bold;">
    엄청 큰 텍스트!
</h1>

<p style="font-size: 18px; font-weight: lighter;">
    작고 얇은 텍스트
</p>

 

font-size: 텍스트 크기를 조절합니다.

font-weight: 텍스트의 굵기를 조절합니다.

bold, normal, lighter 등의 값을 사용할 수 있습니다.

---

3. 텍스트 장식 (Underline, Strike-through 등)

텍스트에 밑줄을 추가하거나 취소선을 그어 다양한 효과를 줄 수 있답니다.

텍스트의 글꼴 변화 없이 강조하고 싶을 때, 무언가 취소 선을 넣어서 취소하고 싶을 때, 등...

다양한 변화가 가능하겠죠? (๓° ˘ °๓)♡

---

 

이 텍스트는 밑줄이 그어져 있습니다.

이 텍스트는 취소선이 그어져 있습니다.

 

HTML 코드

<p style="text-decoration: underline;">
    이 텍스트는 밑줄이 그어져 있습니다.
</p>

<p style="text-decoration: line-through;">
    이 텍스트는 취소선이 그어져 있습니다.
</p>

 

text-decoration: underline, line-through, overline 등의 값을 사용할 수 있습니다.

---

4. 텍스트 그림자 효과

CSS를 사용하여 텍스트에 그림자를 적용하면 더욱 입체적이고 스타일리쉬하게 텍스트에 변화를 줄 수 있어요! ᑦ(⁎◕ ˕ ◕)ᐣ

---

이 텍스트는 그림자 효과가 있습니다!

 

HTML 코드 

<h2 style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
    이 텍스트는 그림자 효과가 있습니다!
</h2>

text-shadow: 첫 번째 값은 가로 그림자,

두 번째 값은 세로 그림자,

세 번째 값은 그림자 흐림 정도,

네 번째는 그림자의 색상을 의미합니다.

---

5. 그라디언트 텍스트

그라디언트 색상은 보통 배경에 많이 사용되지만, CSS를 이용한다면 텍스트에도 적용할 수 있어요!

물론 티스토리는 아직 그게 안되지만... 다른 HTML 내에서 이 CSS를 이용하면 되겠죠? (⑅˃◡˂⑅)

---

HTML 코드

 

<h2 class="gradient-text">그라디언트 텍스트</h2> <style> .gradient-text { background: linear-gradient(to right, #ff7e5f, #feb47b); -webkit-background-clip: text; color: transparent; } </style>

 

위 코드는 linear-gradient를 사용해 텍스트에 그라디언트 효과를 적용한 예입니다.

-webkit-background-clip: text; 속성을 사용해 배경을 글자에만 적용하고,

color: transparent;로 글자 색을 투명하게 만듭니다.

 

---

6. 호버 효과로 생동감 더하기

사용자의 흥미를 이끄는 호버 효과! 마우스를 올리면 텍스트가 변하다니! (˵⚈ε⚈˵)

---

HTML 코드

 

<p class="hover-effect"> 이 텍스트에 마우스를 올려보세요! </p> <style> .hover-effect { color: black; transition: color 0.3s ease; } .hover-effect:hover { color: #e74c3c; } </style>

 

위 코드는 마우스를 올렸을 때 텍스트 색이 검정에서 빨간색으로 부드럽게 변하는 효과를 줍니다.
아쉽게도 현재 이 블로그에서는 적용이 안되지만, 다른 사이트에서 활용해보시는 것을 추천드립니다.

---

7. 커스텀 폰트 사용하기

구글 폰트, 네이버 나눔 폰트와 같은 무료 폰트 라이브러리를 이용하면, 기본적으로 제공되는 폰트 외에 다양한 커스텀 폰트를 사용할 수 있어요! (✿˵•́ᴗ•̀˵)

---

이 같은 경우 티스토리 내에서는 지정된 폰트만 가능하나 다른 웹사이트의 경우 자체적으로 폰트를 다운받아 적용시킬 수 있는 곳들이 있으니 참고 부탁드립니다.

---

마무리

---

 

HTML과 CSS를 사용하면 웹 페이지나 블로그에서 텍스트를 더욱 이쁘게 꾸며볼 수 있답니다.

 

이렇게 따라와보니 어렵지 않으시죠?

 

색상, 폰트, 그림자, 애니메이션 등 다양한 방법으로 텍스트를 꾸미고 표현해보시는 건 어떠실까요?

 

앞으로의 블로그 글이나 웹 페이지 디자인에서 창의적이고 멋진 나만의 텍스트 효과를 뽐내보시죠. 《 ͡꘠ ͜ゝ ͡꘠》

 

텍스트 디자인에 대한 더 많은 팁이나 질문이 있다면 댓글로 남겨주세요! *.☆⸜(⑉˙ᗜ˙⑉)⸝♡.*