본문 바로가기
Web/CSS

[CSS] TEXT 설정 - 1️⃣ 글자 색상, 글자 간격, 띄어쓰기 간격

by coding-choonsik 2023. 3. 30.
728x90
반응형
SMALL

1. color

  • 텍스트의 색상을 설정
  • 기본값은 검정

 

📌 CSS 색상 알아보기⬇⬇⬇ 

https://coding-yesung.tistory.com/89

 

[CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값

1. 색상 이름으로 표현 red, yellow, blue, salmon... 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) ------- ------- ------- RED GREEN BLUE rgba(0~255, 0~255, 0~255, 0~1의 소수) ---------- ALPHA 3. 16진수 색상값으로 표현 #0000FF ->

coding-yesung.tistory.com

 


2. letter-spacing

  • 텍스트 내에서 글자 사이의 간격을 설정

    예) 안녕하세요. 오늘은 화요일입니다.
        안 녕 하 세 요 .  오 늘 은  화 요 일 입 니 다 .

 


3. word-spacing

  • 텍스트 내에서 단어 사이의 간격을 설정    

예) 안녕하세요. 오늘은 화요일입니다.
      안녕하세요.     오늘은     화요일입니다.

 


<!DOCTYPE html>
<html lang="en">
<head>
    <title>css 텍스트1</title>
    <style>
        .letter {letter-spacing: 5px; color: deepskyblue;}
        .word {word-spacing: 8px; color: palevioletred }
    </style>
</head>
<body>
    <h2>css 텍스트1</h2>
    <p>letter-spacing</p>
    <p><span class="letter">CSS의 letter-spacing 속성 테스트</span></p>
    <p>word-spacing</p>
    <p><span class="word">CSS의 word-spacing 속성 테스트</span></p>
</body>
</html>

 

 

728x90
반응형
LIST