웹폰트(TTF, OTF, WOFF, SVG, EOT) / transition
Web fonts<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>01_web font</title> <link href="https://fonts.googleapis.com/css?family=Butcherman |JUA&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Butcherman |IBM+Plex+Serif:100,100i,300,400,500,600|Jua&display=swap" rel="stylesheet"> <style> @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap'); @font-face { font-family: 'NanumSquare_ac'; src: url('fonts/NanumSquare_acB.eot'); src: url('fonts/NanumSquare_acB.eot?#iefix') format('embedded-opentype'), url('fonts/NanumSquare_acB.woff2') format('woff2'), url('fonts/NanumSquare_acB.woff') format('woff'), url('fonts/NanumSquare_acB.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face{ font-family: seji; src:url(fonts/QuadUltra-Heavy.otf), url(fonts/QuadUltra-Heavy.ttf), url(fonts/QuadUltra-Heavy.woff), url(fonts/QuadUltra-Heavy.eot), url(fonts/QuadUltra-Heavy.woff2); } h2{ font-family: 'NanumSquare_ac'; } h2 span{ font-weight: 100; } h1{ font-family: "adobe arabic";; } p{ font-family: seji} h3{ font-family: 'Butcherman', cursive; color: #1974B5; } h3 span{ font-family: 'Jua', sans-serif; color: #D86918; } h4{ font-family: 'IBM Plex Serif', serif; font-weight: 100; font-style: italic; } </style> </head> <body> <h1>웹폰트란?</h1> <h2><span>디자인글꼴</span>을 다운받아서 디자이너의 컴퓨터에 설치하고 설치한 글꼴을 사용자의 컴퓨터에도 사용자가 <strong>웹페이지에 접속하는 순간 자동으로 다운을 받아 설치하여 해당 폰트가 구현되도록 하는 것 </strong></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet non consequatur iusto minima pariatur, laboriosam modi, asperiores possimus maiores rerum distinctio ducimus esse ad veniam deserunt cum mollitia. Quibusdam, vitae.</p> <h3><span>디자인글꼴을 다운받아서 디자이너의 컴퓨터에 설치하고 설치한 글꼴을 사용자의 컴퓨터에도 사용자가 웹페이지에 접속하는 순간 자동으로 다운을 받아 설치하여 해당 폰트가 구현되도록 하는 것</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi vitae tempore suscipit aut. Nihil tempora, dolore! Quo ea, quia architecto at modi distinctio iure non. Fuga atque, tempore delectus sunt.</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus unde eveniet, blanditiis harum perferendis velit tempore laudantium cum molestias! unde?</h4> </body> </html>
:웹디자이너가 사용한 글꼴을 다른 사용자의 컴퓨터에 설치되어 있지 않아도 보여질 수 있도록 구현.
- 인터넷만 연결되어 있다면, 다양한 폰트를 웹사이트 방문자에게 제공할 수 있도록 고안된 폰트가 웹폰트이다.
- 웹사이트를 방문하는 순간, 웹폰트를 다운받아 웹사이트를 구성한다.
폰트에도 확장자가 다 있다.
TrueType Fonts (TTF)
트루 타입 폰트
- 트루 타입은 애플과 마이크로 소프트에 의해, 1980 년대 후반에 개발 된 글꼴의 표준이다.
- 트루 타입은 맥 OS 및 Microsoft Windows 운영 체제 모두에 대한 가장 일반적인 폰트 형식!
OpenType Fonts (OTF)
오픈 타입 글꼴
- 오픈 타입은 확장 가능한 컴퓨터 글꼴 형식이다.
- 트루 타입을 기반으로, 마이크로 소프트의 등록 상표가 되었다.
- 오픈 타입 글꼴은 주요 컴퓨터 플랫폼에서 현재 일반적으로 사용됨!
The Web Open Font Format (WOFF)
웹 오픈 폰트 포맷
- WOFF는 웹 페이지에 사용되는 글꼴 형식이다. 2009 년에 개발, 현재 W3C 권고안이 되었다.
- WOFF는 기본적으로 압축 및 추가 메타 데이터와 오픈 타입 또는 트루 타입!+_+
- 목표는 대역폭 제약과 네트워크를 통해 서버로부터 클라이언트에 배포 폰트를 지원하는 것이다<<
>>w3c에서는 이거 가벼우니까 많이 쓰라고 무료배포 지원하고 있다.<<
SVG Fonts/Shapes
SVG 폰트/모양
- SVG 글꼴은 텍스트를 표시 할 때 SVG가 문자로 사용할 수 있다.
- SVG 1.1 사양은 SVG 문서에 있는 글꼴을 만들 수 있는 글꼴 모듈을 정의한다.
- 또한 SVG 문서에 CSS를 적용 할 수 있고, @font-face 규칙은 SVG 문서의 텍스트에 적용될 수있다.
- SVG는 scalable vector graphic. 벡터공식으로 이미지를 만드는 방법이다.
- 어떻게 BMP나 JPG로 이미지를 안만들고 벡터방식으로 이미지를 구현할 수 있을까...? -> 코딩으로 구현하는 것이다!+_+
- 좌표를 찍어서 만든 폰트이기 때문에, 깨지지 않는 점이 특징이다. SVG 폰트..!!
- 사실, SVG로 만들어보고싶으면,, 할 순 있지만. 일러에서 디자인을 만드면 SVG로 내보내기도 할 수 있다.
Embedded OpenType Fonts (EOT)
임베디드 오픈 타입 폰트
- EOT 글꼴을 웹 페이지에 포함 된 글꼴로 사용하기 위한 것이며, 마이크로 소프트에 의해 디자인 된 오픈 타입 글꼴 컴팩트의 한 형태다.
***브라우저마다 지원하거나 하지 않는 폰트가 있다.
OTF는 고해상도 출력에 보다 적합한 폰트 포맷이다.
Webfont로 검색
http://www.fontsquirrel.com/fonts/list/find_fonts
http://www.cssfontstack.com/Web-Fonts
네이버 폰트
디자인글꼴을 다양한 포맷으로 변환시켜주는 사이트.
or
Webfont converter 로 구글검색
@font-face Rule
@font-face 규칙을 추가하여 나만의 폰트를 웹 서버에 포함 시켜 놓으면 사용자가 자동으로 폰트를 다운로드하여 문서에 포함 시킬 수 있다.
그러면 어떻게 쓰나?
<style>
@font-face {
font-family : myFirstFont;
src : url(fonts/sansation_light.otf);
}
div {font-family : myFirstFont;}
</style>
Web fonts의 굵은 폰트를 사용하려면, 굵은 텍스트에 대한 설명을 포함하는 @font-face 규칙을 추가할 것!
[ CSS transition ]
css로 오면서 추가된 기능: transform, transition, animation
html 태그 요소의 속성(형태, 색상 등등...)이 변경될 때, css 변현 속성을 적용하여 변화하는 단계에 움직임(애니메이션)을 적용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_css3 transition</title>
<style>
*{
margin: 0;
padding: 0;
}
div.rec{
width: 100px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
transition: 1s linear 1s;
}
div.rec:hover{
width: 200px;
background-color: green;
}
div.rec:active{
background-color: pink;
height: 50px;
}
div.ani{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 200px;
left: 100px;
animation: ball 1s infinite;
-webkit-animation: ball 1s infinite;
-moz-animation: ball 1s infinite;
-ms-animation: ball 1s infinite;
-o-animation: ball 1s infinite;
}
@keyframes ball{
from{left: 300px;
background-color: blue}
to{left: 300px;
top: 400px;
background-color: aqua}
}
</style>
</head>
<body>
<h1>transition은 css속성이 변하는 중간과정을 애니메이션으로 보여준다. 기본적으로 변하고 싶은 속성을
transition-property로 지정하고 변하는 시간을 transition-duration으로 지정한다. 속기법을 사용해서
transition:(속성) 시간을 줄 수 있다.
-->단, 속성을 생각하면 모든 속성이 변형된다. <br>
transition:속성 시간 속도 대기시간(성 시 속 대);
--->성시경도 속대~!(시간은 꼭 필요하다!!)
</h1>
<div class="rec">사각형</div>
<div class="ani">원</div>
</body>
</html>transition은 css속성이 변하는 중간과정을 애니메이션으로 보여준다.
기본적으로 변하고 싶은 속성을 transition-porperty로 지정하고 변하는 시간을 transition-duration으로 지정한다.
속기법을 사용해서 transition: (속성) 시간 을 줄 수 있다.
--> 단, 속성을 생략하면 모든 속성이 변형된다.
transition: 속성 시간 속도 대기시간(성 시 속 대);
---> 성시경도 속대~!(시간은 꼭 필요하다!!)암기이이+_+
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_transition과 animation의 활용</title>
<style>
*{
margin: 0;
padding: 0;
}
.btn{
width:50px;
height:50px;
background-color: pink;
margin-left: 100px;
color: white;
line-height: 50px;
border-radius: 10px;
padding-left: 10px;
transition: all .5s linear .1s;
}
.btn span{
position: relative;
left: 0px;
background-color: grey;
padding: 5px;
border-radius: 10px;
transition-duration: 1s;
}
.btn:hover{
width: 100px;
background-color: lightblue;
border-radius: 30px;
}
.btn:hover span{
left: 50px;
border-radius: 30px;
}
.btn:active{
background-color: orange;
}
.btn:active span{
background-color: white;
color: orange;
}
</style>
</head>
<body>
<p>
기본적으로 transition-timing-function 속도의 같은 ease가 설정되어 있다. ease 값은 점점
빠르다가 점점 느려진다. <br> cubic-beizer.com사이트에서 확인하면서 공부할 것.!
<br>
ease-in : 처음에는 느리다 점점 빨라짐
ease-out : 처음에는 빠르다가 점점 느려짐
ease-in-out : 처음에는 느리다가 멈추다가 빨라짐
linear : 등속도
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus veniam autem nesciunt commodi
illum ratione laudantium excepturi ullam tempora ut magnam earum incidunt, doloribus,
et aliquid velit maiores neque porro!</p>
<div class="btn"><span>클릭</span></div>
</body>
</html>*원하는 속성 값만 주고 싶을 때 transition-property를 따로 넣어준다.
*같이 넣고 싶으면 콤마(,)를 써서 넣어준다. 만약 property를 안 주면, 모든 속성이 적용된다. 즉 transition-property:all 이 생략되어 있다고 보면 된다(:
기본적으로 transition-timing-function 속도의 값은 ease가 설정되어 있다.
cubic-bezier.cm사이트에서 확인하면서 공부할 것~!
ease-in : 처음에는 느리다 점점 빨라짐
ease-out : 처음에는 빠르다가 점점 느려짐
ease-in-out : 처음에는 느리다가 멈추다가 빨라짐
linear : 등속도
'IT' 카테고리의 다른 글
| animation fill mode 연습 (0) | 2022.07.09 |
|---|---|
| 2D transform / animation 속성 활용 (0) | 2022.07.07 |
| gnb 연습 / navigation bar (0) | 2022.07.05 |
| Sprite 속성 / Sprite animation 연습 (0) | 2022.07.02 |
| position : absolute / fixed / relative / static / z-index (0) | 2022.06.30 |