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

2017. 8. 23. 10:07·WEB/CSS
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
'WEB/CSS' 카테고리의 다른 글
  • [CSS] ch02-03. shadow
  • [CSS] ch02-02. align (정렬)
  • [CSS] ch01-11. navigation
  • [CSS] ch01-10. pseudo
밍글링글링
밍글링글링
mingling - 밍글링, 밍글밍글링. 코드와 어우러지다. IT/ 프로그래밍/소스
    반응형
    250x250
  • 밍글링글링
    mingling
    밍글링글링
  • 전체
    오늘
    어제
    • 밍글링글링 (407) N
      • Flutter (2)
      • 일상생활 (8)
        • 리뷰 (1)
        • 생활정보 (4)
        • 맛집 (0)
        • 여행 (0)
        • 모든정보 (3)
      • JAVA (126)
        • 개념 (6)
        • 예제 (115)
        • Exception (2)
      • C (1)
        • C (1)
        • C++ (0)
        • C# (0)
      • JS (29)
        • JavaScript (18)
        • JQuery (5)
        • AJax (0)
        • NODE.JS (6)
        • Angular.JS 2.0 (0)
      • WEB (87)
        • HTML (6)
        • CSS (61)
        • JSP (20)
        • JSTL (0)
      • FrameWork (8)
        • Spring (8)
        • BootStrap (0)
        • MyBATIS (0)
        • JUnit (0)
      • 외부 라이브러리 (5)
      • 공유 소스 관리 (5)
        • Git (5)
        • SVN (0)
      • 빅데이터 프로그래밍 (37)
        • Python (37)
        • R Programming (0)
      • DB (7)
        • ORACLE (0)
        • MySql (6)
      • Development Tools (7)
        • StarUML (0)
        • eXERD (0)
        • Eclipse (4)
      • SKILL (6)
        • Migration (0)
        • Security (6)
      • MicroSoft (0)
        • Excel (0)
        • Word (0)
      • Android (0)
      • Server (21)
        • Ubuntu (5)
        • Linux (15)
      • IOS (0)
      • XML (0)
      • 미디어 (0)
      • 공지사항 (3)
      • NETWORK (1)
      • 게임 (4)
        • 피파 (1)
        • 리니지M (0)
        • 배틀그라운드 (1)
        • 듀랑고 (2)
      • 세상 이슈 (6)
      • 일렉트론 (0)
      • 대회 소식 (4)
      • 업무 (2)
      • Express, Vue (6)
      • docker (11)
      • svelte (3)
      • 블록체인 (1)
      • IT (10) N
      • Rust (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    vue cli
    css perspective
    티스토리 자동화
    브라우저 자동화
    proxy pass
    css list
    클론코딩
    css transition
    자바 생성자
    AI 코딩 에이전트
    VS Code 팁
    css table
    docker
    Rust lang
    자바 클래스
    spring java
    SSL 인증서
    nginx ssl 설정
    vscode
    css tb
    css block
    css float
    jsp include
    jsp parameter
    React Compiler
    gitlab 설치
    자바 객체 지향
    nginx
    mysql db
    java casting
    프런트엔드
    rust linux
    ssl 인증서 발급
    오류
    리눅스 설치
    자바 for문
    러스트
    ubuntu
    Extension Bisect
    자바 배열
    vue 설치
    nginx ssl 적용
    자바 exception
    svelte
    API 설계
    lang rust
    servlet class
    Java Array
    Node
    에디터 팁
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
밍글링글링
[CSS] ch02-01. font (폰트)
상단으로

티스토리툴바