02. 글자 꾸미기

프론트엔드/CSS

02. 글자 꾸미기

짱구를왜말려? 2020. 9. 2. 01:11

SMALL

# What?

font-size : 폰트크기(14px, 16px..)

font-weight : 폰트굵기(medium, bold...)

font-family : 글씨체

line-height : 줄간격

# How? 어떻게 꾸미는데?

@ index.html

<!DOCTYPE html> <!-- 이 문서가 HTML5 문서라는 뜻 -->
<html lang="ko"> <!-- 웹 문서의 시작 --> 
<head> <!-- 웹 문서에 대한 정보를 담는 태그 -->
    <meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 하라는 뜻 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 초기엔 1배율로 페이지를 보여주라는 뜻 -->
    <title>Document</title> <!-- 문서 제목 -->
    <link rel="stylesheet" href="./style.css"> <!-- css를 연결하는 태그 -->
    <script src="./common.js"></script> <!-- js를 연결하는 태그 -->
</head>
<body>
    <p class="text01">폰트 사이즈</p>
    <p class="text02">폰트 굵기</p>
    <p class="text03">글씨체</p>
    
    <br/><br/>
    <p>
        줄간격이 뭘가?
        <br/>차이점이 뭘가?
    </p>
    <p class="text04">
        줄간격이 뭘가?
        <br/>차이점이 뭘가?
    </p>
</body>
</html>

@ style.css

.text01 {font-size:40px;}
.text02 {font-weight:bold;}
.text03 {font-family:monospace;}
.text04 {line-height:30px;}

@ Practice 문제

화면에 다음과 같은 글씨 띄우기

이것은 48px 굵은 글씨

이것은 24px

LIST