티스토리 뷰

Web/CSS

[Web/CSS] CSS- 텍스트 관련 스타일

poopooreum 2024. 4. 22. 13:31
반응형

✏️ 글자색을 지정하는 color 속성

16진수로 표현하기
-총 6자리를 쓰며 #RRGGBB로 표시하며 #000000(검은색)부터 #ffffff(흰색)까지 사용가능

rgb로 표현하기
- rgb는 red, green, blue의 줄임말로 앞에서부터 차례대로 빨간색, 초록색, 파란색이 들어 있는 값을 나타내고, 
  하나도 섞이지 않으면 0, 가득 섞여있을 때는 255로 표현하며 그 사이의 값으로 표현함

rgba로 표현하기
- rgba는 rgb에서 볼투명도(alpha)를 붙인 것으로 1은 완전히 불투명한 것이고 0은 완전히 투명한 것

hsl로 표현하기
- h는 hue(색상), s는 saturation(채도), l은 lightness(명도)의 줄임말로 색상과 채도 명도를 이용해 표현

hsla로 표현하기
- hsl에서 볼투명도(alpha)를 붙인 것으로 1은 완전히 불투명한 것이고 0은 완전히 투명한 것

영문명으로 표현하기
- 우리가 흔히 아는 red, green, blue 이런 식으로 표현

h1{
  color: #000000;
  color : rgb(0,0,0);
  color: rgba(0,0,0,0);
  color: hsl(0,100%,50%);
  color: hsla(0,100,50%,0);
  color: blue;
}

 

✏️ 텍스트를 정렬하는 text-align 속성

text-align: start | end | left | right | center | justify | match-parent;

start : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
end :  현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬
left : 왼쪽에 맟추어서 문단을 정렬
right : 오른쪽에 맞추어서 문단을 정렬
center : 가운데에 맞추어서 문단을 정렬
justify : 양쪽에 맞추어 문단을 정렬
match-parent : 부모 요소를 따라서 문단을 정렬

 

 

✏️ 줄 간격을 조절하는 line-height 속성

한 문단이 두 줄을 넘으면 간격이 생기는데, 줄 간격이 너무 넓거나 좁으면 글의 가독성이 떨어지게 됨

이럴 때 line-height 속성으로 줄 간격을 조절

/*줄 간격을 24px로 지정하기*/
font-size:12px; line-break: 12px;
font-size:12px; line-height: 2.0;
font-size:12px; line-height:200%;
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>상품 소개 페이지</title>
    <style>
      h1 {
        font-size: 60px; /* 글자 크기 */
        font-family: Verdana, Geneva, Tahoma, sans-serif; /* 글꼴 */
      }
      .heading {
        width: 100%; /* 영역 너비 */
        height: 100px; /* 높이 */
        background: #222; /* 배경 색 */
        color: rgb(255, 255, 255); /* 글자 색 */
        text-align: center; /* 가로 정렬 - 가운데 */
        line-height: 100px; /* 세로 정렬 - 가운데. line-height 값과 height 값을 같게 */
      }
    </style>
  </head>
  <body>
    <h1 class="heading">HTML</h1>
  </body>
</html>

✏️ 텍스트의 줄을 표시하거나 없애주는 text-decoration 속성

text-decoration: none; /*아무것도 생기지 않음*/
text-decoration: underline; /*글자 아래에 줄이 생김*/
text-decoration: overline; /* 글자 위에 줄이 생김*/
text-decoration: line-through; /* 글자 중간에 줄이 생김 */
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
  </head>
  <body>
    <h1>text-decoration 속성</h1>
    <p style="text-decoration:none">none</p>
    <p style="text-decoration:underline">underline</p>
    <p style="text-decoration:overline">overline</p>
    <p style="text-decoration:line-through">line through</p>
  </body>
</html>

✏️ 텍스트에 그림자 효과를 추가하는 text-shadow 속성

text-shadow: none | <가로 거리> <세로 거리> < 번짐 정도> <색상>

<가로 거리> : 텍스트부터 그림자까지의 가로 거리로 필수 속성 / 양숫값은 글자의 오른쪽이고 음숫값은 글자의 왼쪽
<세로 거리> : 텍스트부터 그림자까지의 세로 거리로 필수 속성 / 양숫값은 글자의 아래쪽이고 음숫값은 글자의 위쪽
<번짐 정도> : 그림자가 번지는 정도 / 양숫값을 사용하면 그림자가 퍼져 나가고 음숫값읃 사용하면 그림자가 수축됨
<색상> : 그림자 색상을 지정 / 한 가지만 지정할 수도 있고 여러 색상을 지정할 수도 있음
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>text-shadow</title>
    <style>
      h1 {
        font-size: 60px;
      }
      .shadow1 {
        color: red;
      }
      .shadow2 {
        text-shadow: 5px 5px 3px #ffa500;
      }
      .shadow3 {
        color: #fff;
        text-shadow: 7px -7px 20px #000;
      }
    </style>
  </head>
  <body>
    <h1 class="shadow1">HTML</h1>
    <h1 class="shadow2">CSS</h1>
    <h1 class="shadow3">자바스크립트</h1>
  </body>
</html>

✏️ 텍스트의 대소 문자를 변환하는 text-transform 속성

.trans1 {
   text-transform: capitalize;
}
.trans2 {
   text-transform: uppercase;
}
.trans3 {
   text-transform: lowercase;
}

이 속성들은 텍스트를 대소 문자 또는 전각 문자로 변환하는데 영어만 적용되고 한글에는 적용되지 않음
capitalize : 첫 번째 글자를 대문자로 변환
uppercase : 모든 글자를 대문자로 변환
lowercase : 모든 글자를 소문자로 변환
full-width : 가능한 한 모든 글자를 전각 문자로 변환

✏️ 글자 간격을 조절하는 letter-spacing, word-spacing 속성

letter-spacing 속성은 글자 사이의 간격을 조절하고, word-spacing 속성은 단어 사이의 간격을 조절

css에서는 주로 letter-spacing 속성을 사용해 자간을 조절하고 px나 em같은 단위로 크깃값을 조절

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>텍스트 스타일</title>
    <style>  
      p {
        font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size:80px;
        text-shadow:3px 3px 1px #ccc;  /* 오른쪽 아래로 파란색 그림자 */
      }
      .spacing1 {
        letter-spacing:0.2em;  /* 글자 간격 0.2em */
      }
      .spacing2 {
        letter-spacing:0.5em;  /* 글자 간격 0.5em */
      }      
    </style>
  </head>
  <body>
    <p>CSS</p> 
    <p class="spacing1">CSS</p>
    <p class="spacing2">CSS</p>
  </body>
</html>

 

반응형
저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[Web/CSS] CSS - 표 스타일  (0) 2024.04.22
[Web/CSS] CSS - 목록 스타일  (0) 2024.04.22
[Web/CSS] CSS - 웹 폰트 사용하기  (0) 2024.04.22
[Web/CSS] CSS - 글꼴 관련 스타일  (0) 2024.04.22
[Web/CSS] CSS - 복습1  (0) 2024.04.22
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함