정리하고 기록하며 성장하는

텍스트 관련 속성 본문

프론트/CSS

텍스트 관련 속성

개발하는묭이 2021. 12. 22. 11:59

글자를 꾸며보자

 

함께 공부해 볼 텍스트 관련 속성

  • font-family : 글꼴을 정의한다
  • font-size : 글자 크기를 정의한다
  • text-align : 정렬 방식을 정의한다
  • color : 글자 색상을 정의한다

font-family

  • 요소를 구성하는 텍스트의 글꼴을 정의한다
  • 글꼴명을 속성값으로 지정한다
  • 여러개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다

사용 예

Times 폰트가 없으면 monospace 폰트를 쓰고 monospace 폰트를 쓸수 없으면 serif 폰트를 쓰겠다

*{
  font-family: Times, monospace, serif;
}

즉 , Times를 우선 지정하되 지원되지 안흥ㄹ 경우 monospace를 지정하겠다

 

font-family 사용 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        * {
            font-family: serif;
        }
    </style>
</head>
<body>
    <h1>아무 내용</h1>
    <p>하하 반가워요~!</p>
</body>
</html>

모든 요소에 대해서 serif 폰트를 적용하겠다

 

font-family 여러개 지정 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        * {
            font-family: serif  , monospace;
        }
    </style>
</head>
<body>
    <h1>아무 내용</h1>
    <p>하하 반가워요~!</p>
</body>
</html>

우선 적으로 serif 폰트를 지정하겠지만 없는 경우 monospace 폰트를 지정하겠다

 

 

font-size

  • 수치와 단위를 지정해 글자의 크기를 정의할 수 있다
단위 의미
px 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem <html> 태그의 font-size에 대응하는 상대적인 크기
em 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기

 

사용 예)

 

px

  • span 태그의 글자 크기를 절대적으로 16px로 지정하겠다
  • 즉 , 폰트 크기를 절대값으로 지정할 수 있다
span { font-size: 16px;}

 

px 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        h1 { font-size: 16px;}
        p { font-size: 32px;}
    </style>
</head>
<body>
    <h1>아무 내용</h1>
    <p>하하 반가워요~!</p>
</body>
</html>

 

rem

  • html 문서 최상단의 <html> 태그에 font-size가 지정되 있는 경우
  • <html> 태그의 font-size 곱하기 2배가 span 태그의 글자 크기가 된다
span { font-size: 2rem; }

rem 전체 실습 코드

 

  • html 태그의 폰트 크기를 18px로 지정해 줬다
  • h1 태그는 2rem 이므로 , html 태그의 폰트 크기의 두배가 된다 (18 * 2)
  • p 태그는 1rem 이므로 html 태그의 폰트 크기의 1배가 된다 (18 * 1)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        html { font-size: 18px;}
        h1 { font-size: 2rem;}
        p { font-size: 1rem;}
    </style>
</head>
<body>
    <h1>아무 내용</h1>
    <p>하하 반가워요~!</p>
</body>
</html>

 

 

em

  • span 태그를 감싸고 있는 상위 태그의 font-size에 대응하는 상대적인 크기가 span 태그의 글자 크기가 된다
span { font-size: 1.5em; }

 

em 전체 실습 코드

  • span 태그의 상위태그인 p 태그의 font-size가 16px이다
  • span 태그의 font-size 속성값을 5em으로 설정해 뒀다
  • 따라서 span 태그의 크기는 16 * 5 즉 , 80이 된다
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <style>
        html { font-size: 18px;}
        h1 { font-size: 2rem;}
        p { font-size: 16px;}
        span{ font-size: 5em;}
    </style>
</head>
<body>
    <h1>아무 내용</h1>
    <p>하하 반가워요~! <span>호호</span></p>
</body>
</html>

 

text-align

  • 블록 내에서 텍스트의 정렬 방식을 정의한다
  • 미리 정의된 키워드 값을 사용하여 지정한다
속성값 의미
left/right 왼쪽 또는 오른쪽 정렬한다
center 가운데 정렬한다
justify 양끝 정렬한다 (마지막 줄 제외) (양쪽 모두를 가지런하게 맞추기 위해 띄어쓰기 간격이 조금씩 달라진다)

https://www.codingfactory.net/10692

 

사용 예

  • p태그의 텍스트를 오른쪽 정렬한다
p {
  text-align: right;
}

 

text-align 실습 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            p {
                text-align: right;
            }
        </style>
    </head>
    <body>
        <p>
            우리네 삶이란 참으로 이상한 것이
            즐거웠던 일보다는 쓰리고 아팠던 시간이
            오히려 깊이 뿌리는 내리는 법

            슬픔도 모으면 힘이 된다
            울음도 삭이면 희망이 된다

            정말이지 소금 같은 이야기 몇 줌
            가슴에 묻고 살게나
            세월이 지나고
            인생이
            허무해지면
            그것도 다 노리갯감이 된다네
        </p>
    </body>
</html>

 

text-align : justify 속성값 실습 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            p {
                text-align: justify;
            }
        </style>
    </head>
    <body>
        <p>
            우리네 삶이란 참으로 이상한 것이
            즐거웠던 일보다는 쓰리고 아팠던 시간이
            오히려 깊이 뿌리는 내리는 법

            슬픔도 모으면 힘이 된다
            울음도 삭이면 희망이 된다

            정말이지 소금 같은 이야기 몇 줌
            가슴에 묻고 살게나
            세월이 지나고
            인생이
            허무해지면
            그것도 다 노리갯감이 된다네
        </p>
    </body>
</html>

 

 

color

  • 텍스트의 색상을 정의한다
  • 다양한 방법으로 색상을 지정할 수 있다
속성값 유형 유형
키워드 미리 정의된 색상별 키워드를 사용한다 (ex. red , blue)
RGB 색상 코드 # + 여섯자리 16진수 값 형태로 지정한다 (red , green , blue의 기준을 맞춰주는 방식)
RGB 함수 Red , Green , Blue의 수준을 각각 정의해 지정한다

 

 

사용 예

span { color: red; }
span { color: #FF0000; }
span { color: rgb(100% , 0% , 0%); }

 

color 실습 코드

  • p 태그에 color 키워드를 사용하여 속성값으로 red를 줬다
  • 즉 p 태그의 폰트 색갈이 red가 된다

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            우리네 삶이란 참으로 이상한 것이
            즐거웠던 일보다는 쓰리고 아팠던 시간이
            오히려 깊이 뿌리는 내리는 법

            슬픔도 모으면 힘이 된다
            울음도 삭이면 희망이 된다

            정말이지 소금 같은 이야기 몇 줌
            가슴에 묻고 살게나
            세월이 지나고
            인생이
            허무해지면
            그것도 다 노리갯감이 된다네
        </p>
    </body>
</html>

 

RGB 색상 코드 실습

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            p {
                color: #000000;
            }
        </style>
    </head>
    <body>
        <p>
            우리네 삶이란 참으로 이상한 것이
            즐거웠던 일보다는 쓰리고 아팠던 시간이
            오히려 깊이 뿌리는 내리는 법

            슬픔도 모으면 힘이 된다
            울음도 삭이면 희망이 된다

            정말이지 소금 같은 이야기 몇 줌
            가슴에 묻고 살게나
            세월이 지나고
            인생이
            허무해지면
            그것도 다 노리갯감이 된다네
        </p>
    </body>
</html>

 

RGB , 그게 뭔데!?

  • RGB 색상은 빛의 삼원색(Red , Green , Blue)를 혼합하여 색을 정의하는 방식이다
  • 모든 수치가 가장 높을 때 흰색이 된다

R: 00 , G: 00 , B: 00

 

span {
	color: rgb(70% , 10% , 20%);
}

 

RGB 함수 실습 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML 문서</title>
        <style>
            p {
                color: rgb(80% ,20% , 30%);
            }
        </style>
    </head>
    <body>
        <p>
            우리네 삶이란 참으로 이상한 것이
            즐거웠던 일보다는 쓰리고 아팠던 시간이
            오히려 깊이 뿌리는 내리는 법

            슬픔도 모으면 힘이 된다
            울음도 삭이면 희망이 된다

            정말이지 소금 같은 이야기 몇 줌
            가슴에 묻고 살게나
            세월이 지나고
            인생이
            허무해지면
            그것도 다 노리갯감이 된다네
        </p>
    </body>
</html>

 

 

내용 정리

  • font-family는 글꼴을 지정하는 속성이며 , 여러 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다
  • font-size는 글자 크기를 지정하는 속성이며 , px , rem , em 등의 단위를 사용할 수 있다
  • text-align은 블록 내에서 텍스트의 정렬 방식을 정의한다
  • color는 다양한 방법으로 텍스트의 색상을 정의한다

'프론트 > CSS' 카테고리의 다른 글

박스모델 1편  (0) 2021.12.23
인라인이냐 블록이냐  (1) 2021.12.23
선택자 1편  (0) 2021.12.21
CSS 기본 문법 및 사용 방법  (0) 2021.12.20
CSS란 무엇인가  (0) 2021.12.20
'프론트/CSS' Related Articles more