CSS

2. 텍스트(Text)

HJ76 2023. 3. 29. 21:30
CSS의 텍스트
color
  • 텍스트의 색상을 설정
  • 기본값은 검정색
선택자 {color : 색깔;}
letter-spacing
  • 텍스트 내에서 글자 사이의 간격을 설정

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

 

word-spacing

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

<!DOCTYPE html>
<html lang="en">
<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 텍스트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>
</html>

text-align
  • 텍스트 수평 방향 정렬을 설정(left, right, center, justify)
text-indent
  • 단락의 첫 줄의 들여쓰기를 설정
line-height
  • 줄 높이를 정하는 속성

예)

글자크기가 40px일 때

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

<!DOCTYPE html>
<html lang="en">
<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;}

        #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>
</head>
<body>
    <h2>css 텍스트2</h2>
    <p id="align-left" class="small-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p id="align-right" class="big-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p id="align-center" class="px-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p id="align-justify" class="per-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p id="indent1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p id="indent2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, non! A consequatur deleniti unde ducimus beatae possimus iste! Neque perferendis dolorum, aperiam officiis quas soluta similique sapiente quidem exercitationem reprehenderit.</p>
</body>
</html>

text-decoration
  • 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용(none, underline, line-through, overline)
text-transform
  • 텍스트에 포함된 영문자에 대한 대소문자를 설정(lowercase, uppercase, capitalize)
font-variant
  • 소문자를 작은 대문자로 변경(small-caps) 
<!DOCTYPE html>
<html lang="en">
<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>
        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>
</head>
<body>
    <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>
    <p><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>
</html>

text-shadow
  • 텍스트에 그림자 효과를 설정 
선택자 {text-shadow: 가로갈이 세로길이 번짐정도 색상;}
<!DOCTYPE html>
<html lang="en">
<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 black;}
        .shadow5 {color: #fff; text-shadow: 0 0 8px black;}
    </style>
</head>
<body>s
    <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</h2>
</body>
</html>

white-space
  • 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성(nowrap, pre, pre-wrap, pre-line)
text-overflow
  • 텍스트를 줄바꿈 하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성(clip, ellipsis)
overflow
  • 요소내의 컨텐츠가 너무 커서 모두 보여주기 힘들때 어떻게 보여줄지 결정하는 속성(visible, hidden, scroll, auto)
<!DOCTYPE html>
<html lang="en">
<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;}
        .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 pink;
            width: 400pxs;
            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. Harum nostrum sed, quas laborum omnis commodi atque facere optio. Ut facere officiis culpa eligendi aperiam fugiat est similique consequuntur, quidem impedit.</p>
    <p class="tof2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum nostrum sed, quas laborum omnis commodi atque facere optio. Ut facere officiis culpa eligendi aperiam fugiat est similique consequuntur, quidem impedit.</p>
    <p class="of1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum nostrum sed, quas laborum omnis commodi atque facere optio. Ut facere officiis culpa eligendi aperiam fugiat est similique consequuntur, quidem impedit.</p>
    <p class="of2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum nostrum sed, quas laborum omnis commodi atque facere optio. Ut facere officiis culpa eligendi aperiam fugiat est similique consequuntur, quidem impedit.</p>
    <p class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum nostrum sed, quas laborum omnis commodi atque facere optio. Ut facere officiis culpa eligendi aperiam fugiat est similique consequuntur, quidem impedit.</p>
</body>
</html>

 

font-size
  • 텍스트 크기를 설정
  • px, %, em, rem
font-family
  • 텍스트의 글꼴을 설정
글꼴을 선택하는 방법
  • 누구나 설치되어 있는 기본 글꼴을 사용
  • 이미지로 처리
  • 클라이언트의 글꼴을 다운로드 시켜 사용
  • 웹 폰트
구글폰트

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

구글 폰트 적용하기
  • 사이트 접속 후, 원하는 폰트 들어가기

  • Select Light 300 클릭

  • 우측 상단 클릭

  • 복사하기

  • 붙여넣기

  • 확인결과 적용이 잘 됨

눈누

https://noonnu.cc/

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

  • 사이트 접속 후, 원하는 폰트 들어가기

  • 복사하기

  • style 태그 안에 붙여넣고, font-family에 폰트이름 적기

  • 확인결과 잘 적용됨

font-weight
  • 텍스트의 굵기를 설정
  • 기본 굵기 : 400 (범위 100 ~ 900)
<!DOCTYPE html>
<html lang="en">
<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: 20px;}
        .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>
</head>
<body>
    <h2>css 텍스트</h2>
    <p>모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
    <p class="sunflower1">모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
    <p class="sunflower2">모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
    <p class="sunflower3">모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
    <p class="budaejjigae">모든 사람은 인종, 피부색, 성, 언어, 종교, 정치적 또는 기타의 견해, 민족적 또는 사회적 출신, 재산, 출생 또는 기타의 신분과 같은 어떠한 종류의 차별이 없이, 이 선언에 규정된 모든 권리와 자유를 향유할 자격이 있다.</p>
</body>
</html>