CSS3 폰트 속성

미어캣의 개발일지·2022년 11월 26일

CSS

목록 보기

7/13

📖CSS 폰트 속성

글자와 관련된 스타일 속성

📃font-size

h1 태그의 기본 크기는 32픽셀
p 태그의 기본 크기는 16픽셀

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .a { font-size: 32px; }
        .b { font-size: 2em; }
        .c { font-size: large; }
        .d { font-size: small; }
    </style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <h1 class="a">Lorem ipsum</h1>
    <h1 class="b">Lorem ipsum</h1>
    <h1 class="c">Lorem ipsum</h1>
    <h1 class="d">Lorem ipsum</h1>
</body>
</html>

출력

📃font-family

폰트를 지정하는 스타일 속성

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .font_arial { font-family: Arial; }
        .font_roman { font-family: 'Times New Roman';}
    </style>
</head>
<body>
    <h1 class="font_arial">Lorem ipsum</h1>
    <p class="font_roman">Lorem ipsum</p>
</body>
</html>

출력

📃font-size 속성과 font-weight 속성

폰트의 기울기 또는 두께를 조정하는 스타일 속성

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .font_big { font-size: 2em; }
        .font_italic { font-style: italic; }
        .font_bold { font-weight: bold; }
    </style>
</head>
<body>
    <p class="font_big font_italic font_bold">Lorem ipsum dolor amet</p>
</body>
</html>

출력

📃line-height 속성

글자의 높이를 지정
CSS block 형식을 가지는 태그를 수직 정렬할 수 있는 스타일 속성이 없다

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .font_big { font-size: 2em; }
        .font_italic { font-style: italic; }
        .font_bold { font-weight: bold; }
        .font_center { text-align: center; }

        .button {
            width: 150px;
            height: 70px;
            background-color: #FF6A00;
            border: 10px solid #FFFFFF;
            border-radius: 30px;
            box-shadow: 5px 5px 5px #A9A9A9;
        }

        .button > a {
            display: block;
            line-height: 70px;
        }
    </style>
</head>
<body>
    <div class="button">
        <a href="#" class="font_big font_italic font_bold font_center">Click</a>
    </div>
</body>
</html>

출력

📃text-align 속성

글자 정렬 관련된 속성

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .font_big { font-size: 2em; }
        .font_italic { font-style: italic; }
        .font_bold { font-weight: bold; }
        .font_center { text-align: center; }
        .font_right { text-align: right; }
    </style>
</head>
<body>
    <p class="font_big font_italic font_bold font_center">Lorem ipsum dolor amet</p>
    <p class="font_bold font_right">2022-11-26</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>

출력

📃text-decoration 속성

a 태그에 href 속성을 사용할때 밑줄이나 color등을 설정 가능

예시

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        a { text-decoration: none; }
    </style>
</head>
<body>
    <h1>
        <a href="#">Lorem ipsum dolor amet</a>
    </h1>
</body>
</html>