코드 그라데이션

4. 텍스트 스타일 본문

Front/Mega-CSS

4. 텍스트 스타일

완벽한 장면 2023. 5. 13. 09:33

font-family

  • 글꼴 지정 속성
  • 텍스트 사용 요소에서 주로 사용한다.

기본형

font-family: "글꼴 이름" | 대체글꼴이름, 대체글꼴이름

 

기본형 기호 이해하기

 

font-size

  • 글자 크기의 단위는 px（픽셀）이나 pt（포인트） 등으로 지정할 수 있고 백분율을 사용

t설명

 

# 글자 크기 설정 방식

1) 키워드 사용

2) 단위 사용

3) 백분율 사용

  • 부모의 글꼴 크기가 단위로 설정되어 있어야 한다.

font-style : 이텔릭체로 글자 표현

  • 이텔릭체로 글자를 바꾸는 속성값은 italic과 oblique 가 있는데, 웹에서는 주로 italic을 사용한다.
  • italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면
  • oblique는 원래 글꼴을 단지 기울어지게 표시합니다. 대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있음.

기본형

font-weight : 글자 굵기 지정

기본형

 

전체 예제

예제 1

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>자바</title>
  <style>    
    body {
      font-size:80px;  /* 전체 글자 크기 */
    }
    h1 { 
      font-family: 바탕;  /* 글꼴 */
      font-size:3em;  /* 글자 크기 */
    } 
    .accent {
      font-size:larger;  /* 글자 크기 */
      font-weight: 900;  /* 글자 굵기 */
    }
    .italic {
      font-style: italic;  /* 글자 스타일 */
    }
  </style>
</head>
<body>
    <h1>자바</h1>
    <p>안녕하세요. <span class="accent">CSS</span>이라 불린다.</p>
    <p>백엔드공부는 너무 쉬워요.</p>
    <p class="italic">HTML+CSS+JavaScript공부 쉬워요.</p>    
  </body>
</html>

실행 결과

로컬 폰트 사용하기 / 웹 폰트 사용하기

웹 폰트 사용법

로컬 폰트 사용하기 예제

<!DOCTYPE html>

<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>로컬 폰트 사용하기</title>
  <style>
    @font-face {
      font-family:'아줌마 자유';
      src:local('아줌마 자유'),
           url('fonts/나눔손글씨\ 아줌마\ 자유.ttf') format('truetype');
    }
    .lfont{
        font-family: '아줌마 자유',sans-serif;
    }
    p{
        font-size: 30px;
    }
</style>
<body>
    <p>일반 글꼴입니다.</p>
    <p class="lfont">나눔손글씨 아줌마 자유</p>
</body>
</html>

실행 결과

 

웹 폰트 사용하기 예제

<!DOCTYPE html>

<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>웹 폰트 사용하기</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
    .webfont{
        font-family: 'Gugi', cursive;
    }
    p{
        font-size: 30px;
    }
</style>
<body>
    <p>일반 글꼴입니다.</p>
    <p class="webfont">웹 폰트 구글 구기</p>
</body>
</html>

실행 결과

 

color : 글자 색 자정하는 속성

  • 16진수 표현법
  • hsl, hsla 표현법
  • 영문법 표현법
  • rgb, rgba 표현법
  • rgb값을 표시할 때는 불투명도의 값도 함께 지정할 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>자바</title>
  <style>
    h1 { 
      color: #0000ff;   /* 16진수 표기법 */
    } 
    p {
      color: green;  /* 색상 이름 */
    }
    .accent {
      color: hsl(0, 100%, 50%);  /* hsl 표기법 */
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>자바</h1>
  <p>ㅁㅁㅁㅁㅁㅁㅁ <span class="accent">ㅊㅊㅊㅊㅊ</span>ㅅㅅㅅㅅㅅㅅㅅ.</p>
  <p>ㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹ</p>
  <p>ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</p>    
</body>
</html>

실행 결과

 

예제 2

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    body {
      background:url('images/안녕.jpg') no-repeat fixed;
      background-size:cover;
      text-align:center;
    }
    h1 {
      font-size:160px;
      font-family:Verdana, Geneva, Tahoma, sans-serif;
    }
    .color1 {
      color: rgb(255,255,255);  /* 흰색 */
    }
    .color2 {
      color: rgba(255, 255, 255, 0.5); /* 반투명한 흰색 */
    }
  </style>
</head>
<body>
  <h1 class="color1">Java</h1>
  <h1 class="color2">JavaScript</h1>
</body>
</html>

실행 결과

 

Text-align (중요)

: 텍스트를 정렬하는 기준

 

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
    p {
      width:600px;
      border:1px solid #222;
      padding:10px;
      margin:10px;
    }
    .center {
      text-align: center;
    }
    .justify {
      text-align: justify;
    }
  </style>
</head>
<body>    
  <p>dddddddddd <b><big>ddddddddd</big>fffffffff</b>ffffffffffffffffffffff. 
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
  <p class="center">dddddddddd <b><big>ddddddddd</big>fffffffff</b>ffffffffffffffffffffff. 
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
  <p class="justify">dddddddddd <b><big>ddddddddd</big>fffffffff</b>ffffffffffffffffffffff. 
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
</body>
</html>

실행 결과

line-height : 줄 간격 조정

  • 정확한 단위로 크깃값을 지정하거나 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정하곤 한다.
  • 줄 간격은 텍스트를 세로 정렬할 때도 유용하다.
  • 그렇게 하려면 line-height의 속성값을 추가하여 
  • 영역의 높이를 지정하는 height의 속성값과 똑같이 지정하면 된다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
    p {
      width:600px;
      border:1px solid #222;
      padding:10px;
      margin:10px;
    }
    .small-line {
        line-height:0.1;
      }
      .big-line {
        line-height:2.5;
      }
  </style>
</head>
<body>    
  <p>dddddddddd <b><big>ddddddddd</big>fffffffff</b>ffffffffffffffffffffff. 
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
  <p class="small-line">dddddddddd <b><big>ddddddddd</big>fffffffff</b>ffffffffffffffffffffff. 
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
  <p class="big-line">dddddddddd <b><big>ddddddddd</big>fffffffff</b>ffffffffffffffffffffff. 
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
</body>
</html>

실행 결과

text-decoration : 텍스트의 줄을 표시하거나 없애줌.

  • 텍스트에 및출을 긋거나 취소선을 표시
  • 특히 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데, 이 속성을 사용하면 없앨 수 있음.

예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
  </head>
  <body>
    <h1>text-decoration 속성</h1>
    <p style="text-decoration:none">안녕하세요.</p>
    <p style="text-decoration:underline">안녕하세요.</p>
    <p style="text-decoration:overline">안녕하세요.</p>
    <p style="text-decoration:line-through">안녕하세요.</p>
  </body>
</html>

실행 결과

text-shadow : 그림자 효과 추가

<text-shadow 의 속성값>

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>text-shadow</title>
  <style>    
    h1 { 
      font-size:60px;
    } 
    .shadow1 {
      color:red;
      text-shadow:2px 2px black;
    }
    .shadow2 {
      text-shadow:4px 4px 3px #ffa500;
    }
    .shadow3 {
      color:#fff;
      text-shadow:7px -6px 20px #000;
    }
  </style>
</head>
<body>
  <h1 class="shadow1">Java</h1> 
  <h1 class="shadow2">CSS</h1>
  <h1 class="shadow3">자바스크립트</h1>
</body>
</html>

실행 결과

text-transform : 대소문자 변환 속성

  • 한글에는 영향을 미치지 않으며, 영문자에만 적용이 된다.

속성값

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>text-transform</title>
  <style>    
    .transa {
      text-transform: capitalize;
    }
    .transb {
      text-transform: uppercase;
    }
    .transc {
      text-transform: lowercase;
    }
  </style>
</head>
<body>
  <p class="transa">java</p> 
  <p class="transb">css</p>
  <p class="transc">javascript</p>
</body>
</html>

실행 결과

letter-spacing, word-spacing : 글자 간격 조절

  • 전자는 글자와 글자 사이의 간격 조절
  • 후자는 단어와 단어 사이 조절
  • CSS에서는 주로 전자를 사용하여 자간을 조절
  • px, em과 같은 단위나 %로 크깃값을 조절한다.

예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>문자 간격</title>
    <style>  
      p {
        font-size:80px;
        text-shadow:3px 3px 1px blue;  /* 오른쪽 아래로 파란색 그림자 */
      }
      .spacing1 {
        letter-spacing:0.2em;  /* 글자 간격 0.2em */
      }
      .spacing2 {
        letter-spacing:0.5em;  /* 글자 간격 0.5em */
      }      
    </style>
  </head>
  <body>
    <p>CSS</p> 
    <p class="spacing1">Java</p>
    <p class="spacing2">Java</p>
  </body>
</html>

실행 결과

수직 정렬 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS</title>
  <style>
    h1 {
      font-size:60px;  /* 글자 크기 */
      font-family:Verdana, Geneva, Tahoma, sans-serif;  /* 글꼴 */
    }
    .heading {
      width:100%;  /* 영역 너비 */
      height:100px;  /* 높이 */
      background:#222;  /* 배경 색 */
      color:red;  /* 글자 색 */
      text-align: center; /* 가로 정렬 - 가운데 */
      line-height: 100px;   /* 세로 정렬 - 가운데. line-height 값과 height 값을 같게 */
    }
  </style>
</head>
<body>
  <h1 class="heading">CSS</h1>
</body>
</html>

실행 결과

728x90

'Front > Mega-CSS' 카테고리의 다른 글

6. 박스 모델 (1) 블록 레벨 요소, 인라인 레벨 요소  (0) 2023.05.13
5. 목록 스타일, 표 스타일  (1) 2023.05.13
3. CSS 기본 퀴즈  (0) 2023.05.13
2. 기본 선택자  (0) 2023.05.13
1. 스타일과 스타일 시트  (0) 2023.05.13
'Front/Mega-CSS' Related Articles more
Comments