HTML5 & CSS3 배워보자 (9화 : 텍스트 스타일)

9화에서는 텍스트 스타일에 대해 알아보겠습니다. 폰트와 텍스트 스타일은 비슷하지만 약간 다른 개념입니다. 폰트는 우리가 보는 글꼴을 가리키고, 텍스트 스타일은 글자와 단어들, 그리고 문단에서 사용되는 스타일을 말합니다.  

 

텍스트 스타일에는 여러 가지가 있습니다. 예를 들면, 글자의 크기를 조절할 수 있고, 굵기를 바꿀 수도 있습니다. 또한, 글자를 기울일 수도 있고, 특정 부분을 색깔로 강조할 수도 있게됩니다. 

 

이런 스타일들은 텍스트를 보다 명확하게 만들어주고, 더욱 읽기 쉽게 만들어 줍니다. 그래서 이번 9화에서는 특히 글자와 단어에 적용되는 스타일을 살펴보겠습니다. 이를 통해 텍스트가 보다 매력적으로 보이고, 사용자들이 내용을 더 쉽게 이해하고 읽을 수 있게 도와줄 수 있습니다.  

 

 

1.Color 속성 - 글자 색 지정하기

글자 색을 변경하는 방법에 대해 알아보겠습니다. 웹 문서에서 텍스트의 색상을 변경하려면 color 속성을 사용합니다. 이 속성은 문단이나 제목 등의 텍스트에 사용되는 글자 색을 지정합니다. color 속성에는 여러 가지 색상 값을 사용할 수 있습니다. 주로 사용되는 값으로는 다음과 같은 것들이 있습니다.

 

  ■ 16진수 색상 코드 : #RRGGBB 형식으로 표기되며, 빨강(RR), 초록(GG), 파랑(BB)의 색상 값을 표현합니다. 각 색상은 00부터 FF까지의 값을 가질 수 있어요. 예를 들어, #FF0000은 빨간색을 나타냅니다.

  ■ RGB 또는 RGBA : Red, Green, Blue의 색상 값을 0부터 255까지의 정수로 지정합니다. 또한, RGBA는 RGB 값에 투명도(Alpha) 값을 추가하여 투명한 색을 만들어냅니다. 예를 들어, rgb(255, 0, 0)은 빨간색을 나타내며, rgba(255, 0, 0, 0.5)는 반투명한 빨간색을 나타냅니다.

  ■ HSL 또는 HSLA : Hue(색상), Saturation(채도), Lightness(명도) 값을 사용하여 색상을 지정합니다. HSLA는 HSL 값에 투명도(Alpha) 값을 추가합니다. 예를 들어, hsl(0, 100%, 50%)은 빨간색을 나타내며, hsla(0, 100%, 50%, 0.5)는 반투명한 빨간색을 나타냅니다.

 

이렇게 color 속성을 사용하여 다양한 색상 값을 지정할 수 있어요. 이러한 색상 값을 통해 텍스트의 색상을 원하는 대로 바꿀 수 있습니다. 

 

<기본형>

color : "색상";

 

<예제>

<style>
    h1 {color : rgb(0,100,0);}      /* rgb값 사용 */
    h2 {color : red;}               /* 색상이름 사용 */
    .text1 {color : #ff6622;}       /* 16진수 사용 */
</style>

    <h1>세계 10대 골프장</h1>
    <img src="golfclub.jpg" alt="베트남골프장">
    <h2>추천골프장</h2><p>베트남 호치민 인근 1시간 거리에 위치하고 있는 골프장으로</p>
    <p>많은 <span class="text1">한국인들</span>이 찾는 골프장입니다.</p>

 

<예제화면>

 

 

 

2.Text-decoration 속성 - 텍스트에 줄 표시하기/없애기

text-decoration 속성을 사용하면 텍스트에 밑줄을 긋거나 취소선을 표시할 수 있어요. 이 속성은 텍스트의 장식을 변경하는 데 사용됩니다.  text-decoration 속성에는 다양한 값들이 있는데, 가장 일반적으로 사용되는 값으로는 다음과 같습니다.

 

• none : 텍스트에 장식을 표시하지 않습니다. 이 값은 텍스트에 밑줄이나 취소선이 없음을 나타냅니다.
• underline : 텍스트에 밑줄을 긋습니다.
• overline : 텍스트 위에 선을 그립니다.
• line-through : 텍스트 중앙에 취소선을 그립니다.
• underline overline : 텍스트에 밑줄과 위에 선을 동시에 그립니다.
• inherit : 부모 요소의 속성 값을 상속합니다.

<기본형>

text-decoration : none | underline | overline | line-through..;

 

 

 

3.Text-transform 속성 - 텍스트 대/소문자 변환하기

text-transform 속성을 사용하면 텍스트(영문자)의 대문자를 소문자로, 소문자를 대문자로 바꾸거나 전각 문자로 변환할 수 있습니다. text-transform 속성에는 다음과 같은 값들이 있습니다.

 

• none : 텍스트에 어떠한 변환도 적용하지 않습니다.
• capitalize : 각 단어의 첫 글자를 대문자로 변환합니다.
• uppercase : 텍스트를 모두 대문자로 변환합니다.
• lowercase : 텍스트를 모두 소문자로 변환합니다.
• full-width : 텍스트를 전각 문자로 변환합니다.

<기본형>

text-transform : none | capitalize | uppercase | lowercase | full-width ;

 

 

4.Text-shadow 속성 - 텍스트에 그림자 효과 주기

텍스트에 그림자 효과를 추가하는 것은 웹 디자인에서 매우 효과적인 기술 중 하나입니다. 이를 통해 텍스트가 화면에서 더욱 두꺼워 보이고, 입체적으로 떠 보일 수 있습니다. 그림자 효과는 특히 사이트 제목이나 중요한 메시지를 강조할 때 유용하게 사용됩니다. 

이를 가능하게 하는 것이 text-shadow 속성입니다. 이 속성을 사용하면 텍스트 주변에 그림자를 만들어 텍스트를 눈에 띄게 만들 수 있습니다. 속성 값으로는 'none'을 사용하여 그림자 효과를 없앨 수도 있고, 그림자의 세부적인 설정을 위해 그림자 값을 사용할 수 있습니다. 그림자 값은 쉼표로 구분되어 여러 개를 지정할 수도 있습니다. 

text-shadow 속성에는 다음과 같은 값들이 있습니다.

 

• h-shadow : 그림자의 수평 위치를 나타내는 값입니다. 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 이동합니다.
• v-shadow : 그림자의 수직 위치를 나타내는 값입니다. 양수 값은 아래로, 음수 값은 위로 이동합니다.
• blur-radius : 그림자의 흐림 정도를 나타내는 값입니다. 값이 클수록 더 흐린 그림자가 생성됩니다.
• color : 그림자의 색상을 나타내는 값입니다.

<기본형>

text-shadow : none | h-shadow v-shadow blur-radius color;

 

 

 

5.White-space 속성 - 공백 처리하기

텍스트에는 글자 뿐만 아니라 공백도 있습니다. 이러한 공백은 문서를 보기 좋게 만드는 데 영향을 미칩니다. 때로는 텍스트 사이에 여러 개의 연속된 공백이 있으면 문서가 지저분하게 보일 수 있기 때문에, 이런 경우를 처리하기 위해 white-space 속성을 사용하게 됩니다. 

white-space 속성은 텍스트 요소에서 공백 문자(스페이스, 탭, 줄 바꿈)를 어떻게 처리할지를 지정합니다. 이 속성은 다음과 같은 값들을 가질 수 있습니다.

 

• normal : 기본값으로, 연속된 공백을 하나의 공백으로 처리하고 줄 바꿈 문자는 줄 바꿈으로 처리합니다.
• nowrap : 연속된 공백을 하나의 공백으로 처리하지만, 줄 바꿈 문자는 무시합니다.
• pre : 연속된 공백을 그대로 유지하고 줄 바꿈 문자도 그대로 유지합니다.
• pre-line : 연속된 공백은 하나의 공백으로 처리하고 줄 바꿈 문자는 줄 바꿈으로 처리합니다.
• pre-wrap : 연속된 공백은 하나의 공백으로 처리하고 줄 바꿈 문자는 그대로 유지합니다.

<기본형>

white-space : normal | nowrap | pre | pre-line | pre-wrap ;

 

 

 

6.Letter-spacing과 Word-spacing 속성 - 텍스트 간격 조절

텍스트의 자간(글자 사이 간격)을 조절하는 것은 텍스트를 더욱 읽기 쉽게 만드는 중요한 디자인 기술 중 하나입니다. 특히 크고 강조된 텍스트나 제목에서는 글자 사이 간격을 넓혀주면 텍스트가 더욱 돋보이고 읽기 쉬워집니다. 

이를 위해 letter-spacing 속성을 사용합니다. 이 속성을 사용하면 각 글자 사이의 간격을 조절할 수 있습니다. 양수 값을 사용하면 간격이 넓어지고, 음수 값을 사용하면 간격이 좁아지게 됩니다. 이렇게 함으로써 텍스트의 모양을 조절할 수 있게 됩니다. 

한편, word-spacing 속성은 단어와 단어 사이의 간격을 조절하는 데 사용됩니다. 주로 문장 전체의 단어 사이 간격을 일관되게 조정하는 데 활용되며, 글자 간격을 조절하는 letter-spacing과는 달리 단어 간의 간격을 조절합니다. 

이렇게 letter-spacing과 word-spacing 속성을 사용하여 텍스트의 간격을 조절하면 텍스트를 더욱 읽기 쉽게 만들 수 있습니다. 

 

<기본형>

letter-spacing : normal | 사이즈 ;
word-spacing : normal | 사이즈 ;

 

 

이상으로 9화에서는 텍스트 스타일에 대해 알아보았습니다.

 

 

 

※ 다음화에서는 "CSS3 문단 스타일"에 대해서 알아보겠습니다!!

https://zzangdis.tistory.com/41

HTML5 & CSS3 배워보자 (10화 : 문단 스타일)