웹프로그래밍/CSS

[CSS] 텍스트에 관한 모든 것

유노brain 2023. 9. 11. 20:09
반응형

CSS Text - color, align

CSS text-color, align의 경우 아래의 내용을 참고하자

https://youknow301.tistory.com/71

 

HTML Styles 속성(텍스트, 배경색, 폰트, 폰트크기)

Styles 기본 구성 -> 기본적으로 HTML의 구성은 property(속성):value(가치)가 온다. 배경색(Backgroun Color) This is a heading This is a paragraph. -> 위의 예시코드는 배경을 파란색으로 바꾸는 예시코드이다. -> CSS

youknow301.tistory.com

 

Text Decoration

Text decoration에는 다음과 같은 특성들을 가진다.

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

 

text-decoration-line

text-decoration-line 텍스트에 장식선을 추가하고 싶을 때 사용한다.

팁: 윗줄, 밑줄등 두개 이상의 값을 결합하여 텍스트 위와 아래에 줄을 표시할 수 있다.

예시코드

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

p.ex {
  text-decoration: overline underline;
}
</style>
</head>
<body>

<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>

<p><strong>주의:</strong>링크가 아닌 텍스트에 밑줄을 긋는 것은 독자에게 혼란을 일으킬수 있으므로
추천하지 않는다.</p>

</body>
</html>

결과

다음 아래 코드는 decoration-style, decoration-thickness를 적용한 코드다.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration: underline;
  text-decoration-style:dotted ;
  text-decoration-thickness: 10px;
}

p.ex {
  text-decoration: overline underline;
  text-decoration-style:dashed ;
  text-decoration-thickness: 70%;
  text-decoration-color:brown;
}
</style>
</head>
<body>

<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>

<p><strong>주의:</strong>링크가 아닌 텍스트에 밑줄을 긋는 것은 독자에게 혼란을 일으킬수 있으므로
추천하지 않는다.</p>

</body>
</html>

https://bit.ly/48a3YgD

 

개발자 필요할 땐? 필요할 때 필요한 만큼 쓰는 프리랜서 개발자 채용으로

 

deg.kr

Shorthand 특성

아래코드와 같이 간단하게 표현할 수 있다.

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            text-decoration: underline red;
        }

        h2 {
            text-decoration: line-through blue dotted;

        }

        h3 {
            text-decoration: underline double green;
        }

        p.ex {
            text-decoration: underline lightgray 5px double;
        }
    </style>
</head>

<body>

    <h1>Overline text decoration</h1>
    <h2>Line-through text decoration</h2>
    <h3>Underline text decoration</h3>
    <p class="ex">Overline and underline text decoration.</p>

    <p><strong>주의:</strong>링크가 아닌 텍스트에 밑줄을 긋는 것은 독자에게 혼란을 일으킬수 있으므로
        추천하지 않는다.</p>

</body>

</html>

Text Transformation

text-transformation의 특징은 텍스트를 대문자 또는 소문자로 표현이 가능하다.

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<h1>Using the text-transform property</h1>

<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>

</body>
</html>

Text Spacing

text spacing은 다음과 같은 특성을 가진다.

text-indent
letter-spacing
line-hight
word-spacing
white-space
<!DOCTYPE html>
<html>
<head>
<style>
p.indent {
  text-indent:50px;
}

p.letter1 {
  letter-spacing: 5px;
}

p.letter2 {
  letter-spacing: -2px;
}
p.height1{
    line-height: 10px;
    
}
p.height2{
    line-height: -2px;
}
p.word1{
    word-spacing: 10px;
}
p.word2{
    word-spacing: -2px;
}
p.white{
    white-space:nowrap;
}

</style>
</head>
<body>

<h1>Using the text-transform property</h1>

<p class="indent">앞의 칸을 뛰어서 작성된다.</p>
<p class="letter1">글자사이의 공간이 5px만큼 커진다</p>
<p class="letter2">글자사이의 공간이 -2px만큼 작아진다.</p>
<p class="height1">문장간의 높이가 0.8만큼 된다.</p>
<p class="height2">문장간의 높이가 1.5만큼 된다.</p>
<p class="word1">단어간의 간격이 10px만큼 커진다.</p>
<p class="word2">단어간의 간격이 -2px만큼 작아진다.</p>
<p class="white">white-space는 요소 내부의 공백을 처리합니다.</p>
</body>
</html>

 

Text shadow

text-shadow는 텍스트에 그림자를 추가하는 것이다.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

반응형