06. 글꼴 관련 스타일

 

 

1. 폰트 지정하는 방법

 - 브라우저 기본 글꼴을 사용하는 것이 일반적
  - pc상에서(개인마다 다름) 있는 글꼴을 가져오는 것과 외부 혹은 서버에서 제공하는 방법이 있음
 - 구글 폰트 사이트 추천 https://fonts.google.com/?subset=korean 

Google Fonts

    <style>
        .font1 {
            font-family: "궁서체";
        }
        
        .font2 {
            font-family: "나눔고딕";
        }
        
        .font3 {
            font-family: "모르는 글꼴";
        }
        
        .font4 {
            /* 외부 폰트 : 사용시 head에 사이트링크 걸어줌 */
            font-family: 'Nanum Pen Script', cursive;
        }
        
        .font5 {
            /* 외부 폰트 : 사용시 head에 사이트링크 걸어줌 */
            font-family: 'Gugi', cursive;
        }
    </style>

    <div class="font1"> 1.진지한 궁서체입니다.</div>
    <div class="font2"> 2. 네이버 나눔고딕입니다. 프리라이선스로 무료이며 저작권문제도 없습니다.</div>
    <div class="font3"> 3. 모르는 글꼴입니다. 이건 아마 브라우저 기본글꼴로 설정됩니다.</div>
    <div class="font4"> 4. 외부(서버)에서 가져오는 나눔펜 폰트입니다.</div>
    <div class="font5"> 5. 연습용 글꼴 입니다.</div>

1.진지한 궁서체입니다.

2. 네이버 나눔고딕입니다. 프리라이선스로 무료이며 저작권문제도 없습니다.

3. 모르는 글꼴입니다. 이건 아마 브라우저 기본글꼴로 설정됩니다.

4. 외부(서버)에서 가져오는 나눔펜 폰트입니다.

5. 연습용 글꼴 입니다.

 

2. 폰트 사이즈 조절

    <style>
        .font_size1 {
            font-size: 32pt;
        }
        
        .font_size2 {
            font-size: 200%;
        }
        
        .font_size3 {
            font-size: larger;
        }
    </style>

    <div class="font_size1">font-size 1입니다. 32pt</div>
    <div class="font_size2">font-size 2입니다. 200%</div>
    <div class="font_size3">font-size 3입니다. larger</div>

 

font-size 1입니다. 32pt

font-size 2입니다. 200%

font-size 3입니다. larger

 

3. 폰트굵기조절

<style>
        .font_weight1 {
            font-weight: bold;
        }
        
        .font_weight2 {
            font-weight: 1000;
        }
        
        .font_weight3 {
            font-weight: lighter;
        }
    </style>

    <div class="font_weight1">1.일반 굵기입니다. </div>
    <div class="font_weight2">2.1000굵기입니다. </div>
    <div class="font_weight3">3.얇은 옵션입니다. </div>

 

1.일반 굵기입니다.

2.1000굵기입니다.

3.얇은 옵션입니다.

 

4. 폰트 기타속성 (영문 앞글자대문자, 이텔릭체)

variant : 영문일 경우, 대소문자 또는 앞글자만 대문자로 변경
style : 이텔릭체(기울어진) 글씨 사용

    <style>
        .font_variant {
            font-variant: small-caps;
        }
        
        .font_style {
            font-style: italic;
        }
    </style>
    <div class="font_variant">1. i am a student.(전체 소문자) </div>
    <div class="font_variant">2. I AM A STUDENT.(전체 대문자) </div>
    <div class="font_variant">3. I Am A Student.(앞글자만 대문자) </div>
    <div class="font_style"> 이텔릭체 글씨입니다. </div>

1. i am a student.(전체 소문자)

2. I AM A STUDENT.(전체 대문자)

3. I Am A Student.(앞글자만 대문자)

이텔릭체 글씨입니다.

 

5. 폰트 복합사용 ★ ★ ★ ★ ★ ★ (속성 나열하는 법)

    <style>
        /* 방법1. 속성을 한줄로 나열하는 방법 ⭐ */
        
        .font_composite1 {
            font-family: "궁서체";
            font-weight: bold;
            font-size: 50px;
            color: darkviolet;
        }
        /* 방법2 > font 활용하는 방법 */
        
        .font_composite2 {
            font: 30px lighter, '궁서체', ;
            color: green;
        }
    </style>
    <div class="font_composite1">복합사용 예시1 입니다.</div>
    <div class="font_composite2">복합사용 예시2 입니다.</div>

 

복합사용 예시1 입니다.

복합사용 예시2 입니다.

 

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."