(CSS) 텍스트

CSS의 컬러

1. 색상 이름으로 표현

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

2. RGB 색상값으로 표현

• rgb(0255, 0255, 0~255) -> (0, 0, 255)
• rgba(0255, 0255, 0255, 01의 소수)

3. 16진수 생상값으로 표현

• #0000FF -> 파랑
• 00 00 FF -> #00F

CSS의 텍스트

color

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

letter-spacing

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

예)
안녕하세요. 오늘은 화요일.. 아직도?
안 녕 하 세 요 .   오 늘 은   화 요 일 . .   아 직 도 ?

word-spacing

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

예)
안녕하세요. 오늘은 화요일.. 아직도?
안녕하세요.  오늘은  화요일..  아직도?

CSS
    <style>
        .letter { letter-spacing: 5px; color: deepskyblue;}
        .word { word-spacing: 7px; color: deeppink;}
    </style>

HTML
    <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>

 

text-align

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

text-indent

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

line-height

• 줄 높이를 정하는 속성

예)
글자크기가 40px 일 때
    line-height: 1.5 ->
    줄 높이는 40px의 1.5배인 60px ->
    글자 크기는 40px이므로 글자 위와 아래에 각각 10px의 여백이 생김 ->
    만약 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침

 

CSS
    <style>
        p { border: 3px solid red; padding: 10px; margin: 20px;}

        #align-left{text-align: left;}
        #align-right{text-align: right;}
        #align-center{text-align: center;}
        #align-justify{text-align: justify;}

        #indent1 {text-indent: 20px;}
        #indent2 {text-indent: 5%;}

        .small-line {line-height: 0.7;}
        .big-line {line-height: 3;}
        .px-line {line-height: 30px;}
        .per-line {line-height: 50%;}
    </style>

HTML
    <h2>css 텍스트2</h2>
    <p id="align-left" class="small-line">Lorem ...</p>
    <p id="align-right" class="big-line">Lorem ...</p>
    <p id="align-center" class="px-line">Lorem ...</p>
    <p id="align-justify" class="per-line">Lorem ...</p>
    <p id="indent1">Lorem ...</p>
    <p id="indent2">Lorem ...</p>

text-decoration

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

text-transform

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

font-variant

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

 

CSS
    <style>
        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;}
        .variant { font-variant: small-caps;}
    </style>

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

text-shadow

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

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

CSS
    <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: 0px 0px 5px #000;}
    </style>

HTML
    <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>

white-space

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

text-overflow

• 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성
• clip, ellipsis

overflow

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

 

CSS
    <style>
        p { display: inline-block; width: 200px; border: 1px solid black;}
        .tof1{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .tof2{white-space: nowrap; overflow: hidden; text-overflow: clip;}
        .of1{height: 150px; overflow: scroll;}
        .of2{height: 150px; overflow-x: hidden; overflow-y: scroll;}
        .content{
            border: 3px dotted deeppink;
            width: 300px;
            padding: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .content:hover{
            overflow: visible;
        }
    </style>

HTML
    <h2>css 텍스트5</h2>
    <p class="tof1">Lorem ...</p>
    <p class="tof2">Lorem ...</p>
    <p class="of1">Lorem ...</p>
    <p class="of2">Lorem ...</p>
    <p class="content">Lorem ...</p>

font-size

• 텍스트 크기를 설정
• px, %, em, rem

font-family

• 텍스트의 글꼴을 설정

✅글꼴을 선택하는 방법

• 누구나 설치되어 있는 기본 글꼴을 사용
• 이미지로 처리
• 클라이언트에 글꼴을 다운로드 시켜 사용
• 웹 폰트를 사용

font-weight

• 텍스트의 굵기를 설정
• 기본 굻기: 400 (범위 100 ~ 900)
• 구글 폰트(https://fonts.google.com/)
• 눈누(https://noonnu.cc/)

 

CSS
    <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'; font-weight: 300;
        }
    </style>

HTML
    <h2>css 텍스트</h2>

    <p>모든 사람은 ...</p>
    <p class="sunflower1">모든 사람은 ...</p>
    <p class="sunflower2">모든 사람은 ...</p>
    <p class="sunflower3">모든 사람은 ...</p>
    <p class="budaejjigae">모든 사람은 ...</p>