Web 3일차 1(글꼴관련)

2022. 12. 22. 10:54ㆍ코딩배움일지/Web 구현

font-family 속성

 

웹 문서에서 사용할 글꼴 지정

<body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를
사용하는 요소들에서 사용

지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정.

둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분

<body> 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고
문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨.

 

단위를 사용해 글자 크기 지정하기

폰트 단위

font-size 속성

 

font-style 속성
글자를 이탤릭체로 표시하는 속성

font-style: normal | itelic | oblique

 

font-weight 속성
글자 굵기를 조절하는 속성

'

웹폰트 해보기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text1{
            font-size: 30px;
            font-weight: 600;
        }
        .text2{
            font-size: 16px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="text1">1. 웹 개발 시작하기</div>
    <span class="text2">1-1. 웹 개발 알아보기</span><br>
    <span class="text2">1-2. 웹 개발, 어디서부터 시작할까</span><br>
</body>
</html>

구글 웹폰트 적용

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
            @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap'); 
            @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap');
        .text1{
            font-family: 'Dongle', sans-serif;
            font-size: 50px;
            font-weight: 700;
        }
        .text2{
            font-family: 'Noto Sans KR', sans-serif;
            font-size: 16px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="text1">1. 웹 개발 시작하기</div>
    <span class="text2">1-1. 웹 개발 알아보기</span><br>
    <span class="text2">1-2. 웹 개발, 어디서부터 시작할까</span><br>
</body>
</html>

 

눈누

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
           /* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap'); 
            @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap');*/

            @font-face {
            font-family: 'Tenada';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            }

        *{
            font-family: 'Tenada';
        }

        .text1{
           /* font-family: 'Dongle', sans-serif;*/
            font-size: 50px;
            font-weight: 700;
        }
        .text2{
          /*  font-family: 'Noto Sans KR', sans-serif;*/
            font-size: 16px;
            font-style: italic;
        }
        .text3{
          /*  font-family: 'Dongle', sans-serif;*/
            font-size: 40px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="text1">1. 웹 개발 시작하기</div>
    <span class="text2">1-1. 웹 개발 알아보기</span><br>
    <span class="text2">1-2. 웹 개발, 어디서부터 시작할까</span><br>
    <span class="text3">1-3. 폰트스타일 변경</span><br>
</body>
</html>

 

color 적용

 

글자 색 지정
16진수 값이나 rgb 값, hsl 값, 색상 이름 중에서 사용

.text1{
           /* font-family: 'Dongle', sans-serif;*/
            font-size: 50px;
            font-weight: 700;
            /* color: rgb(red, green, blue); */
            color: rgba(0, 0, 0, 0);
            color: #02F0E8;
        }

 

text-align 속성
텍스트 정렬 방법 지정

 

line-height 속성

문단의 줄 간격 지정
<숫자>와 <백분율>은 부모 요소를 기준으로 몇 배인지 지정
보통 글자 크기의 1.5~2배 정도면 적당
줄 간격은 텍스트를 세로 정렬할 때도 유용함
🡪 line-height의 속성 값을 영역의 height의 값과 똑같이 지정

.text2{
          /*  font-family: 'Noto Sans KR', sans-serif;*/
            font-size: 16px;
            font-style: italic;
            line-height: 32px;
        }

 

text-decoration 속성

텍스트에 밑줄을 긋거나 가로지르는 줄 표시
텍스트 링크의 밑줄을 없앨 때도 사용

.naver-link{
            font-size: 30px;
            color: rgb(25, 206, 96);
            text-decoration: none;
        }

 

<a href="http://www.naver.com" class="naver-link">네이버</a>

 

 

1교시 전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
           /* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;700&display=swap'); 
            @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap');*/

            @font-face {
            font-family: 'Tenada';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            }

        *{
            font-family: 'Tenada';
        }

        .text1{
           /* font-family: 'Dongle', sans-serif;*/
            font-size: 50px;
            font-weight: 700;
            /* color: rgb(red, green, blue); */
            color: rgba(0, 0, 0, 0);
            color: #02F0E8;
        }
        .text2{
          /*  font-family: 'Noto Sans KR', sans-serif;*/
            font-size: 16px;
            font-style: italic;
            line-height: 10px;
        }

        .text3{
          /*  font-family: 'Dongle', sans-serif;*/
            font-size: 40px;
            font-style: italic;
        }
        .naver-link{
            font-size: 30px;
            color: rgb(25, 206, 96);
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="text1">1. 웹 개발 시작하기</div>
    <div class="text2">1-1. 웹 개발 알아보기</div><br>
    <div class="text2">1-2. 웹 개발, 어디서부터 시작할까</div><br>
    <div class="text3">1-3. 폰트스타일 변경</div><br>
    <a href="http://www.naver.com" class="naver-link">네이버</a>
</body>
</html>

'코딩배움일지 > Web 구현' 카테고리의 다른 글

Web 3일차 2(css 블록)  (1) 2022.12.22
Web 3일차 1-1(글꼴관련)  (0) 2022.12.22
Web 2일차 3-1(css)  (0) 2022.12.21
Web 2일차 3(css)  (0) 2022.12.21
Web 2일차 2-1(input 심화)  (1) 2022.12.21

관련글

댓글 0

티스토리툴바