WEB/CSS

[CSS] ch02-01. font (폰트)

밍글링글링 2017. 8. 23.
728x90

Band.eot
다운로드

- 클릭

Band.otf
다운로드

- 클릭

Band.woff
다운로드

- 클릭

초록색 원 사진링크 :https://t1.daumcdn.net/cfile/tistory/99EBF833599CD57604

 

초록색 원 사진은 링크를 클릭하여 [이미지를 다른 이름으로 저장]하세요.

 

초록색 원 사진명: bullet.png

 

CSS 강의에 앞서 파일 4개를 다운받아주세요.

그 후 WebContent아래 css, html, img 폴더 생성 후

파일은 img폴더에 html > html폴더에 css > css폴더에 생성하여 코딩해주세요.

 

01_font.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
    @import "../css/01_font.css";
</style>
</head>

<body>
 <h1>Joandora</h1>
</body>
</html>

 

01_font.css

@CHARSET "UTF-8";
body{
    background-color: #09280B;
    background-image: url('../img/bullet.png');
}
@font-face{
    font-family:'myBand';
    src:url('../img/Band.eot');
    src:url('../img/Band.otf') format('opentype');
    src:url('../img/Band.woff') format('woff');
}
h1{
    font-family:myBand;
    font-size:3em;
    color:yellow;    
}

728x90

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

[CSS] ch02-03. shadow  (0) 2017.08.23
[CSS] ch02-02. align (정렬)  (0) 2017.08.23
[CSS] ch01-11. navigation  (0) 2017.08.23
[CSS] ch01-10. pseudo  (0) 2017.08.23
[CSS] ch01-09. attr  (0) 2017.08.22

댓글