[HTML] font 예제

예제 1

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Font Property</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">2013.12.09</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>

* text-align 속성

- 글자 정렬하기

예제 2

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Font Property</title>
    <style>
        .font_center { text-align: center; }
    </style>
</head>
<body>
    <span class="font_center">Lorem ipsum dolor amet</span>
    <p class="font_center">Lorem ipsum dolor amet</p>
</body>
</html>

* text-align 속성

- span 태그는 인라인 형태이므로 너비가 존재하지 않기 때문에 '중앙' 이라는 개념 자체가 존재하지 않는다. 때문에 text-align 속성을 적용하여 center로 세팅을 하더라도 적용되지 않는다.

예제 3

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Font Property</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;
        }
    </style>
</head>
<body>
    <div class="button">
        <a href="#" class="font_big font_italic font_bold font_center">Click</a>
    </div>
</body>
</html>

- box-shadow : 5px 5px 5px #A9A9A9; 는 순서대로 offset-x, offset-y, blur-radius, color 를 나타낸다.

- offset-x : 가로 위치. 양수면 오른쪽과 음수면 왼쪽에 그림자가 만들어진다.

- offset-y : 세로 위치. 양수면 아래쪽과 음수면 위쪽에 그림자가 만들어진다.

- blur-radius : 그림자를 흐릿하게 한다. 값이 클수록 더 흐리다.

- color : 그림자 색을 지정한다.

예제 4

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Font Property</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>

* line-height 속성

- 글자의 높이를 지정한다. HTML 페이지는 문서보다 애플리케이션 형태로 많이 사용되기 때문에 글자 높이 지정보다는 글자를 수직 중앙 정렬할 때에 사용한다.

- 글자를 감싸는 박스의 높이와 같은 크기인 70px을 line-height 속성으로 지정하면 글자가 수직으로 중앙 정렬된다.

예제 5

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

* text-decoration 속성

- a 태그에 href 속성을 지정하면 글자에 밑줄이 생기고 파란색으로 변경된다. 하지만 일반 웹 페이지에는 링크에 밑줄이 없다. text-decoration 속성을 적용하여 밑줄을 제거했기 때문이다.

'HTML > Day40' 카테고리의 다른 글

[HTML] position 예제 (0)	2022.02.01
[HTML] 예제 (0)	2022.01.02