03-01. 글꼴

1. 글자크기

①font-size: 속성으로 글자 크기를 조절할수 있다.

②html에서 h1태그의 기본크기는 32px이며, p태그의 기본 크기는 16px 이다.

<!DOCTYPE html>
<html>
    <head>
        <title>loui3</title>
        <style>
            .a {font-size: 32px; }
            .b {font-size: 2em;}
            .c {font-size: large;}
            .d {font-size: small;}
        </style>
    </head>
    <body>
        <h1>loui3 html</h1>
        <p class="a">css3 script html</p>
        <p class="b">css3 script html</p>
        <p class="c">css3 script html</p>
        <p class="d">css3 script html</p>
    </body>
</html>

2. 글꼴

① font-family: 속성으로 글자 글꼴을 바꿀 수 있다.

② 글꼴 변경시 한단어는 따옴표를 사용 안해도 되지만, 두 단어 이상일 경우 따옴표 사용을 하는게 좋다.

③ 모서리가 뾰족한 글자를 Serif 글꼴, 모서리가 네모진 글자를 Sans-serif 글꼴이라고 한다.

④ 웹페이지를 사용하는 사용자가 글꼴이 없을 수도 있으므로 여러개를 지정하여 쓸수 있다.

<!DOCTYPE html>
<html>
    <head>
        <title>loui3</title>
        <style>
            .font1 { font-family:Arial;}
            .font2 { font-family:'Times New Roman', Arial;}
        </style>
    </head>

    <body>
        <h1 class="font1">html css3 script</h1>
        <p class="font2">html css3 script</p>
    </body>
</html>

3. 글자 스타일과 두께

① font-style: 속성으로 스타일을 지정할 수 있다.

② font-weight: 속성으로 글자 두께를 지정할 수 있다.

③ text-align 속성으로 글자 정렬을 지정 할수 있다.(span태그는 인라인 형태라 적용이 안된다)

<!DOCTYPE html>
<html>
    <head>
        <title>loui3</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">loui3</p>
        <p class="font_bold font_right">2022-12-16</p>
        <p>html css3 script~~~~~~~~~~~~~~~~~~~~~~~~~</p>
    </body>
</html>

④ 간단한 버튼 만들어보기

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

            .button {
                width: 150px;
                height: 70px;
                background-color: aqua;
                border: 10px solid #ffff;
                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_itaclic font_bold font_center">click</a>
        </div>
    </body>
</html>

⑤ a태그에 herf속성 링크의 밑줄 제거 하는법

text-decoration 속성으로 제거 한다.

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

            .button {
                width: 150px;
                height: 70px;
                background-color: aqua;
                border: 10px solid #ffff;
                border-radius: 30px;
                box-shadow:5px 5px 5px #a9a9a9;
            }

            .button > a {
                display: block;
                line-height: 70px;
                text-decoration: none; /*밑줄 제거*/
            }
        </Style>
    </head>
    <body>
        <div class="button">
            <a href="#" class="font_big font_itaclic font_bold font_center">click</a>
        </div>
    </body>
</html>

'WEB > CSS3' 카테고리의 다른 글

04-01. 레이아웃 (0)	2022.12.19
03-02. 위치 속성 (0)	2022.12.18
02-01. CSS 속성들과 배경 (0)	2022.12.15
01-02. 다양한 선택자들 (0)	2022.12.14
01-01. CSS 선택자 (0)	2022.12.12