브라우저 제목

웹폰트 사용

html

<!doctype html>   
<html lang="ko">  
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>webfont</title>
        <link rel="stylesheet" href="css/webfont.css">
       
    </head>
    <body>
        <div class="webfont0">
            <h2>서시</h2>
            <p>
                죽는 날까지 하늘을 우러러<br>
                한 점 부끄럼 없기를<br>
                잎새에 이는 바람에도<br>
                나는 괴로워 했다.<br>
                별을 노래하는 마음으로<br>
                모두 죽어가는 것을 사랑해야지<br>
                그리고 나한테 주어진 길을 걸어가야겠다.<br>
                <br>
                오늘밤에도 별이 바람에 스치운다.
            </p>
            
        </div>
        <div class="webfont1">
            <h2>서시</h2>
            <p>
                죽는 날까지 하늘을 우러러<br>
                한 점 부끄럼 없기를<br>
                잎새에 이는 바람에도<br>
                나는 괴로워 했다.<br>
                별을 노래하는 마음으로<br>
                모두 죽어가는 것을 사랑해야지<br>
                그리고 나한테 주어진 길을 걸어가야겠다.<br>
                <br>
                오늘밤에도 별이 바람에 스치운다.
            </p>
            
        </div>
        <div class="webfont2">
            <h2>서시</h2>
            <p>
                죽는 날까지 하늘을 우러러<br>
                한 점 부끄럼 없기를<br>
                잎새에 이는 바람에도<br>
                나는 괴로워 했다.<br>
                별을 노래하는 마음으로<br>
                모두 죽어가는 것을 사랑해야지<br>
                그리고 나한테 주어진 길을 걸어가야겠다.<br>
                <br>
                오늘밤에도 별이 바람에 스치운다.
            </p>
            
        </div>
        
            
        
    </body>
</html>

 

css

@charset "utf-8";
html,body{
    margin:0;
}
.webfont0,
.webfont1,
.webfont2{
    margin:auto;
    width:50%;
}
@font-face{
    font-family:noto;
    src:url(fonts/NotoSansKR-Medium.woff) format("woff"),
        url(fonts/NotoSansKR-Medium.otf) format("opentype");
}
@font-face{
    font-family:sin;
    src:url(fonts/SingleDay-Regular.woff) format("woff"),
        url(fonts/SingleDay-Regular.ttf) format("truetype");
}
.webfont1{
    font-family:noto;
}
.webfont2{
    font-family:sin;
}

제목 날짜
포트폴리오 샘플 2020.05.21
데스크탑, 모바일 구분 접속 2019.02.11
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
코르도바 를 설정하기 위한 방법 file 2020.04.26
sticky position file 2020.04.22
webfont file 2020.04.21
video file 2020.04.15
audio2 file 2020.04.15
audio 2020.04.11
wheel이벤트3 file 2020.04.11
wheel이벤트2 file 2020.04.11
wheel이벤트1 file 2020.04.11
드레그 앤 드롭 효과 예제 file 2020.04.03
드레그 앤 드롭 효과 원리 file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
태그 목록