HTML과 CSS/CSS

CSS - 텍스트 간격, 정렬, 효과, 설정, 글꼴 선택

큐트아리 2023. 10. 17. 08:25

텍스트와 관련된 CSS에 대해서 알아보겠습니다.

1. 텍스트 간격, 정렬

  • letter-spacing : 텍스트 내에서 글자 사이의 간격을 설정
        예)  안녕하세요. 오늘은 화요일!
         -> 안 녕 하 세 요 .   오 늘 은   화 요 일 ! 

  • word-spacing : 텍스트 내에서 단어 사이의 간격을 설정
        예)  안녕하세요. 오늘은 화요일!
        -> 안녕하세요.  오늘은  화요일!

  • text-align : 텍스트 수평 방향 정렬 설정
    (left, right, center, justify(양쪽으로분할정렬))

이 중 text-align은 굉장히 중요합니다. 일반적으로 p태그와 같은 블록태그에서는 text-align을 사용하여 많이 정렬합니다.

<코드 예시 - spacing>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 텍스트1</title>
    <style>
        .letter {letter-spacing:3px ; color : #d4675f}
        .word {word-spacing:5px ; color : rgb(107, 87, 186)}
    </style>
</head>
<body>
    <h2>CSS 텍스트1</h2>
    <p>letter-spacing</p>
    <p class="letter">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit atque eaque earum iste excepturi! Sapiente veniam harum doloribus repudiandae at sit sint nam delectus explicabo. Incidunt voluptas eligendi corporis dolor?</p>
    <p>word-spacing</p>
    <p class="word">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit atque eaque earum iste excepturi! Sapiente veniam harum doloribus repudiandae at sit sint nam delectus explicabo. Incidunt voluptas eligendi corporis dolor?</p>
</body>
</html>

 

<결과>

<코드 예시 - align>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;}
        p#align-left { text-align: left;}
        p#align-right { text-align: right;}
        p#align-center { text-align: center;}
        p#align-justify { text-align: justify;}
    </style>
</head>
<body>
    <h2>CSS 텍스트2</h2>
    <p id="align-left" class="small-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corporis rem aperiam magni tempora. Amet dicta nemo asperiores neque, rerum at explicabo corporis facilis aliquam cumque perferendis voluptates voluptatibus id!</p>
    <p id="align-right" class="small-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corporis rem aperiam magni tempora. Amet dicta nemo asperiores neque, rerum at explicabo corporis facilis aliquam cumque perferendis voluptates voluptatibus id!</p>
    <p id="align-center" class="small-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corporis rem aperiam magni tempora. Amet dicta nemo asperiores neque, rerum at explicabo corporis facilis aliquam cumque perferendis voluptates voluptatibus id!</p>
    <p id="align-justify" class="small-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus corporis rem aperiam magni tempora. Amet dicta nemo asperiores neque, rerum at explicabo corporis facilis aliquam cumque perferendis voluptates voluptatibus id!</p>
</body>
</html>

<결과>

2. 텍스트 효과

  • text-decoration : 텍스트의 효과를 설정하거나 제거
    • none : 밑줄삭제 
    • underline : 밑줄생성  
    • line-through : 가운데줄        
    • overline : 윗줄
  • font-variant : 소문자를 작은 사이즈 대문자로 변경(small-caps)
    a -> A(인데 높이가 a와 같은 대문자 A)

< 예시 코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 텍스트3</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>아이유<span class="variant">(Lee Ji Eun)</span></h2>
    <p>대한민국의 싱어송라이터이자 배우.</p>
    <p>2008년 9월 18일, 중학교 3학년이던 만 15세의 나이에 가수로 데뷔했다. <span class="through">예명인 '아이유'는 '너와 내가 음악으로 하나가 된다'라는 뜻을 가지고 있다.</span>[53] 매력적인 음색과 뛰어난 작사ㆍ작곡 능력을 바탕으로 아이돌이자 아티스트로서 십수 년째 사랑 받고 있을 뿐 아니라[54] 2012년 이래로 매년 국내 및 아시아의 주요 도시에서 대규모 콘서트를 진행하며 공연자로서도 활발히 활동 중이다.[55]</p>

    <p>가수 활동 외에도 각종 예능 프로그램에 출연했으며,[56] 데뷔 이래 80편이 넘는 광고를 진행했을 정도로 다수의 광고 모델로도 활약 중이다.[57] 2011년에 연기자로 데뷔한 후에는 다양한 드라마와 영화에서 연기 활동도 활발하게 펼치고 있다.[58] 연예계에서는 그야말로 올라운더로 인정 받는 만능 엔터테이너이며, 이 때문에 남녀불문 수많은 아이돌들의 롤모델로 꾸준히 꼽히고 있다.</p>

    <p><a href="https://namu.wiki/w/%EC%95%84%EC%9D%B4%EC%9C%A0">출처 : 나무위키</a></p>

</body>
</html>

 

  • text-shadow : 텍스트에 그림자 효과 
    생성자 {text-shadow: 가로길이 세로길이 번짐정도 색상;}​
    <예시코드> 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 텍스트4</title>
    <style>
        h1 { font-size: 100px;}
        .shadow1 { text-shadow: 10px 10px;} /*가로로 세로로 10px씩 이동해서 그림자 생성*/
        .shadow2 { text-shadow: 10px 10px 5px;} /*가로로 세로로 10px씩 번짐정도는 5px 그림자 생성*/
        .shadow3 { text-shadow: 10px 10px 5px red;} /*가로로 세로로 10px씩 번짐정도는 5px 그림자 생성*/
        .shadow4 {color: #fff ; text-shadow: 10px -10px 5px #000;}
        /*가로로 10px 위로 10px 5px번짐정도 검은색 그림자*/
        .shadow5 { color: #fff ;text-shadow: 0px 0px 8px #000;} /*위치는 그대로인데 번짐 정도 때문에 보임*/
    
    </style>
</head>
<body>
    <h2>CSS 텍스트4</h2>
    <!--h1.shadow${css text-shadow 속성$}*5 쓰면 자동완성 에밋씀 $는 자동으로 숫자증가-->
    <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>
</html>​
    <결과>

 

  • white-space : 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성
    • nowrap: 모든 공백을 무시하고 텍스트를 한 줄로 표시
    • pre: 공백과 줄 바꿈을 그대로 유지하고 텍스트 표시
    • pre-wrap: 공백은 유지하되, 텍스트가 너비를 넘어갈 때 줄 바꿈 추가
    • pre-line: 공백은 유지하되, 연속된 공백을 하나로 축약하고 텍스트가 너비를 넘어갈 때 줄 바꿈 추가.
  • text-overflow : nowrap(텍스트를 줄바꿈X)했을 때 넘치는 텍스트를 어떻게 처리할지 결정
    • clip: 텍스트 자르고 생략 기호 표시 안 함
    • ellipsis: 텍스트 자르고 생략 기호("...") 표시 
  • overflow : 요소내의 컨텐츠가 너무 커서 모두 보여주기 힘들때 어떻게 보여줄지 결정
    • visible : 모두표시
    • hidden : 숨김
    • scroll : 내부스크롤생성
    • auto : 자동 생성

<예시코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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;}
        /*display: inline-block은 전체화면일때만 우측으로 나열 그보다 작은화면은 줄바꿈됨*/
        .txt1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .txt2 { white-space: nowrap; overflow: hidden; text-overflow: clip;}
        .txt3 {  height: 150px; overflow: scroll;}
        .txt4 {  height: 150px; overflow-x: hidden;overflow-y: scroll;} /*가로 스크롤 없이 세로 스크롤만 출력*/
        .txt5 {border: 3px dotted deeppink; width: 400px; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .txt5:hover {overflow: visible;}
    </style>
</head>
<body>
    <h2>CSS 텍스트5</h2>
    <p class="txt1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique exercitationem, aliquid cumque impedit commodi earum et unde aut fugit amet mollitia odit tempore debitis quia minima doloribus saepe facere voluptates?</p>
    <p class="txt2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique exercitationem, aliquid cumque impedit commodi earum et unde aut fugit amet mollitia odit tempore debitis quia minima doloribus saepe facere voluptates?</p>
    <p class="txt3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique exercitationem, aliquid cumque impedit commodi earum et unde aut fugit amet mollitia odit tempore debitis quia minima doloribus saepe facere voluptates?</p>
    <p class="txt4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique exercitationem, aliquid cumque impedit commodi earum et unde aut fugit amet mollitia odit tempore debitis quia minima doloribus saepe facere voluptates?</p>
    <p class="txt5">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique exercitationem, aliquid cumque impedit commodi earum et unde aut fugit amet mollitia odit tempore debitis quia minima doloribus saepe facere voluptates?</p>
</body>
</html>

<결과>

3. 폰트 변경

3.1. 글꼴을 선택하는 방법

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

3.2. 웹 폰트 사이트 추천

4. 폰트 설정

  • font-size: 텍스트 크기를 설정 (px, %, em, rem, ....)
        - em: 부모 요소의 폰트 크기에 영향을 받음.
        - rem: 루트 요소(HTML)의 폰트 크기에 영향을 받음.
  • font-family : 텍스트의 글꼴 설정, 기본 글꼴이나 웹폰트를 사용해야 다른 사용자에게도 적용됨
  • font-weight : 텍스트의 굵기를 설정(100~900 default:400), 글꼴 자체마다 굵기 종류가 다름으로 굵기 호환성 체크 필요

< 예시 코드 -  구글 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 텍스트6</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=Hahmlet:wght@100;400;700&display=swap" rel="stylesheet">
    <style>
       .ibm {font-family: 'Hahmlet', serif;}
       .light {font-weight: 100;}
       .bold {font-weight: 700;}
    </style>
</head>
<body>
    <h2>CSS 텍스트6 -구글 폰트 사용</h2>
    <p>이아리는 우리집 바보고양이</p>
    <p class="ibm light">이아리는 우리집 바보고양이</p>
    <p class="ibm">이아리는 우리집 바보고양이</p>
    <p class="ibm bold">이아리는 우리집 바보고양이</p>
</body>
</html>

< 결과 >

< 예시 코드 - 눈누 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 텍스트7</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <h2>CSS 텍스트7</h2>
    <p>일 안하고 잠만 자고 싶다</p>
    <p class="Gangwon">일 안하고 잠만 자고 싶다</p>
</body>
</html>

 

<결과>