본문 바로가기
개발/HTML,CSS

2023.03.28 CSS의 컬러, 텍스트

by 상달군 2023. 3. 28.
728x90

목차

1. CSS의 컬러

  • 색상 이름으로 표현하기
  • RGB 색상값으로 표현하기
  • 16진수 색상값으로 표현하기

2. CSS의 텍스트

  • color (글자 색상)
  • letter-spacing (글자 사이 간격)
  • word-spacing (단어 사이 간격)
  • text-align (수평 방향 정렬)
  • text-indent (단락 첫 줄 들여쓰기)
  • line-height(줄 높이)
  • text-decoration(텍스트의 효과)
  • text-transform(대소문자)
  • font-variant(소문자를 작은대문자)
  • text-shadow(텍스트 그림자)
  • white-space 
  • text-overflow
  • overflow
  • font-size
  • font-family
  • font-weight

1. CSS의 컬러

1-1.색상 이름으로 표현하기

        red, yellow, blue, salmon, ....

1-2.RGB 색상값으로 표현하기

        rgb(0~255, 0~255, 0~255)
            RED, GREEN, BLUE
        rgba(0~255, 0~255, 0~255, 0~1의 소수)
            RED, GREEN, BLUE, ALPHA(투명도)

1-3.16진수 색상값으로 표현하기

        #0000FF -> 파랑색
         00 00 FF -> #00F로도 표현 가능  
         R  G  B 

 

2. CSS의 텍스트

2-1.color (글자 색상)

 

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

2-2.letter-spacing (글자 사이 간격)

 

- 텍스트 내에서 글자 사아의 간격을 설정
    예) 안녕하세요. 오늘은 화요일... 아직도?
          안 녕 하 세 요 . 오 늘 은 화 요 일 . . . . 아 직 도 ?

2-3.word-spacing (단어 사이 간격)

- 텍스트 내에서 단어 사이의 간격을 설정 
    예) 안녕하세요. 오늘은 화요일... 아직도?
          안녕하세요.  오늘은  화요일...  아직도?

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 예제 1</title>
    <style>
        .letter {letter-spacing: 5px; color: deepskyblue;}
        .word {word-spacing: 7px; color: deeppink;}
    </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>

2-4.text-align (수평 방향 정렬)

  - 텍스트 수평 방향 정렬을 설정(left, right, center, justify)

2-5.text-indent (단락 첫 줄 들여쓰기)

 - 단락의 첫 줄의 들여쓰기를 설정

2-6.line-height(줄 높이)

  - 줄 높이를 정하는 속성
    예) 글자크기가 40px일 때


        line-height: 1.5                          -> 줄 높이는 40px의 1.5배인 60px을 나타낸다.


        위와 아래에 각각 10px의 여백이 생김 -> 

        ✔ 만약 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css텍스트 2</title>
    <style>
        p {border: 3px solid red; padding: 10px; margin: 20px;}
        /*text-align (수평 방향 정렬)*/
        #align-left {text-align: left;}
        #align-right {text-align: right;}
        #align-center {text-align: center;}
        #align-justify {text-align: justify;}
        /*text-indent (단락 첫 줄 들여쓰기)*/
        #indent1 {text-indent: 20px;}
        #indent2 {text-indent: 5%;}/*유동적이다. 화면의 크기에 따라 달라진다.*/
        /*line-height(줄 높이)*/
        .small-line {line-height: 0.7;}
        .big-line {line-height: 3;}
        .px-line {line-height: 30px;}
        .per-line {line-height: 50%;}
    </style>
</head>
<body>
    <h2>css 텍스트 2</h2>
    <p id="align-left" class="small-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, est nostrum. Quasi optio molestiae ut ipsam veniam beatae hic laborum, facilis mollitia aliquam, eaque et ducimus, labore non deserunt quod!</p>
    <p id="align-right" class="big-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, est nostrum. Quasi optio molestiae ut ipsam veniam beatae hic laborum, facilis mollitia aliquam, eaque et ducimus, labore non deserunt quod!</p>
    <p id="align-center" class="px-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, est nostrum. Quasi optio molestiae ut ipsam veniam beatae hic laborum, facilis mollitia aliquam, eaque et ducimus, labore non deserunt quod!</p>
    <p id="align-justify" class="per-line">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, est nostrum. Quasi optio molestiae ut ipsam veniam beatae hic laborum, facilis mollitia aliquam, eaque et ducimus, labore non deserunt quod!</p>
    <p id="indent1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, est nostrum. Quasi optio molestiae ut ipsam veniam beatae hic laborum, facilis mollitia aliquam, eaque et ducimus, labore non deserunt quod!</p>
    <p id="indent2">Lorem ipsum dolor sit amet consectetur, 
</body>

2-7.text-decoration(텍스트의 효과)

  - 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용합니다. 
   (none, underline, line-through, overline)

 

2-8.text-transform(대소문자)

  - 텍스트에 포함된 영문자에 대한 대소문자를 설정(lowercase, uppercase, capitalize)

 

2-9.font-variant(소문자를 작은대문자)

  - 소문자를 작은 대문자로 변경 (small-caps)

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>파이썬 창시자</title>
    <style>
        /*text-decoration(텍스트의 효과)*/
        a:link {text-decoration: none;}
        a:visited {text-decoration: none;}
        a:hover {text-decoration: underline;}
        a:active {text-decoration: underline;}

        h2 {font-size: 50px;}
        .through {text-decoration: line-through;}
        /*font-variant(소문자를 작은대문자)*/
        .variant {font-variant: small-caps;}
    </style>
</head>
<body>
    <h2>ㅍㅏ이썬 창시자</h2>
    <p>귀도 반 로섬(네덜란드어: <span class="variant">Guido van Rossum</span>, 1956년 1월 31일 ~)은 네덜란드 출신의 소프트웨어 엔지니어이다. 프로그래밍 언어인 파이썬을 개발한 것으로 유명하다. 2005년부터 2012년까지 구글에서 일했으며, 2013년부터 2019년 10월까지 드롭박스에서 일하고 있었다. <span class="through">은퇴[3]하였다가</span> 2020년 11월 13일 MS에 다시 입사하였다.[4] <a href="https://ko.wikipedia.org/wiki/%EA%B7%80%EB%8F%84_%EB%B0%98_%EB%A1%9C%EC%84%AC">출처: 위키백과</a></p>
</body>

노랑색 부분에 효과가 들어갔습니다.

2-10.text-shadow(텍스트 그림자)

  - 텍스트에 그림자 효과를 설정


    사용법

        선택자 { text-shadow: 가로길이 세로길이 번짐정도 색상;}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 텍스트 4</title>
    <style>
        h1 {font-size: 100px;}
        .shadow1 {color: deeppink; text-shadow: 10px 10px;}
        .shadow2 {color: deeppink; text-shadow: 10px 10px 5px;}
        .shadow3 {text-shadow: 10px 10px 5px red;}
        .shadow4 {color:#fff; text-shadow: 10px -10px 5px #000;}
        .shadow5 {color: #fff; text-shadow: 0 0 8px #000;}

    </style>
</head>
<body>
    <h2>css 텍스트 4</h2>
    <h1 class="shadow1">CSS text-shadow 속성1</h1>
    <h1 class="shadow2">CSS text-shadow 속성2</h1>
    <h1 class="shadow3">CSS text-shadow 속성3</h1>
    <h1 class="shadow4">CSS text-shadow 속성4</h1>
    <h1 class="shadow5">CSS text-shadow 속성5</h1>

</body>

2-11.white-space 

  - 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리 할지 결정하는 속성(nowrap, pre, pre-wrap, pre-line)

2-12.text-overflow

  - 텍스트를 줄바꿈하지 않았을때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성 (clip, ellipsis(생략해주세요.....))

2-13.overflow

  - 요소내의 컨텐츠가 너무 커서 모두 보여주기 힘들때 어떻게 보여줄지 결정하는 속성 (visible, hidden, scroll, auto)

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 텍스트 5</title>
    <style>
        p {display: inline-block; width: 200px; border: 1px solid red;}
        /*white-space, text-overflow*/
        .tof1 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .tof2 {white-space: nowrap; overflow: hidden; text-overflow: clip;}
        /*overflow*/
        .of1 {height: 150px; overflow: scroll;}
        .of2 {height: 150px; overflow-x: hidden; overflow-y: scroll;}
        .content { border: 3px dotted deeppink; width: 400px; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .content:hover {overflow: visible;}
    </style>
</head>
<body>
    <h2>css 텍스트 5</h2>
    <p class="tof1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius illo corrupti pariatur facilis at sint iste asperiores, soluta repellendus in earum? Necessitatibus quas quod culpa accusantium tempore! Aliquam, ipsam error?</p>
    <p class="tof2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius illo corrupti pariatur facilis at sint iste asperiores, soluta repellendus in earum? Necessitatibus quas quod culpa accusantium tempore! Aliquam, ipsam error?</p>
    <p class="of1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius illo corrupti pariatur facilis at sint iste asperiores, soluta repellendus in earum? Necessitatibus quas quod culpa accusantium tempore! Aliquam, ipsam error?</p>
    <p class="of2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius illo corrupti pariatur facilis at sint iste asperiores, soluta repellendus in earum? Necessitatibus quas quod culpa accusantium tempore! Aliquam, ipsam error?</p>
    <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius illo corrupti pariatur facilis at sint iste asperiores, soluta repellendus in earum? Necessitatibus quas quod culpa accusantium tempore! Aliquam, ipsam error?</p>
</body>

✔구글 폰트 : https://fonts.google.com/
✔눈누 폰트(한글 엄청많음): https://noonnu.cc/
✔무료 이미지: https://pixabay.com/ko/

2-14. font-size 

  • 텍스트 크기를 설정 한다.
  • px, %, em, rem
    • em : 1em 디폴트값 = PC:16px mobile:12px
    • rem : <html> 맨윗단에서 설정한다. 

2-15.font-family

  • 텍스트의 글꼴을 설정한다.

 ✔ 글꼴을 선택하는 방법 

  • 누구나 설치되어 있는 기본 글꼴을 사용하는 방법
  • 이미지로 처리하는 방법
  • 클라이언트에 글꼴을 다운로드 시켜 사용하는 방법
  • 웹 폰트를 사용하는 방법 👍 현재 가장 많이 사용하는방법!

2-16.font-weight

  • 텍스트의 굵기를 설정
  • 기본 굵기: 400 (범위 100~900) 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 텍스트 </title>

    <!--구글 폰트 불러오기-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap" rel="stylesheet">

    <style>
        p {font-size: 24px;}
        
        /*구글 폰트 적용법*/
        .sunflower1 {font-family: 'Sunflower', sans-serif; font-weight: 300; }
        .sunflower2 {font-family: 'Sunflower', sans-serif; font-weight: 500; }
        .sunflower3 {font-family: 'Sunflower', sans-serif; font-weight: 700; }

        /*눈누 폰트 적용법*/
        @font-face {
            font-family: 'TTTtangsbudaejjigaeB';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeB.woff2') format('woff2');
            font-weight: 300;
            font-style: normal;
        }
        .budaejjigae {font-family: 'TTTtangsbudaejjigaeB';}

    </style>
</head>
<body>
    <h2>css 텍스트 웹 폰트 적용법</h2>
    <p>모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
    <p class="sunflower1">모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
    <p class="sunflower2">모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
    <p class="sunflower3">모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
    <p class="budaejjigae">모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
</body>

 

728x90

'개발 > HTML,CSS' 카테고리의 다른 글

2023.03.29 CSS의 포지션, Z-index, float, clear  (3) 2023.03.29
2023.03.29 CSS의 배경, 박스모델, 박스사이징, 디스플레이,폼  (0) 2023.03.29
2023.03.28 CSS의 적용방법, 선택자  (0) 2023.03.28
2023.03.27 HTML 디스플레이  (0) 2023.03.27
23.03.24 HTML의 호스팅, 닷홈, FTP  (0) 2023.03.24

관련글

댓글

티스토리툴바