※폰트
*폰트 저작권 조심할 것
*폰트가 지원하는 언어도 확인
*무료폰트사이트 : 눈누, 구글폰트
- 내 폰트: 서비스가 올라가 있는 서버에 업로드해 놓은 폰트
사용자의 기기에 폰트 존재여부와 상관없이 서버에서 폰트 파일을 (임시로) 다운로드해서 화면에 나타나도록 하는 방식
- 필수
@font-face : 내가 사용할 웹 폰트명을 지정하고,
해당 웹폰트의 파일을 연결한다.
- 파일 확장자
- eot: 익스플로러 옛날버전 (6~8) -요즘에 거의 안 쓴다.
- ttf: 크롬, 파폭, 사파리, 에지
- woff: 익스(9~)
ttf를 압축한 거라서 파일 크기가 작다.
그래서 다른 서체보다 빠르게 다운로드되고 적용된다.
다만 안드로이드에서 지원하지 않는 버전도 있다.
format: 브라우저에 맞는 폰트만 골라서 다운
- 웹폰트: 남의 서버에 있는 폰트를 끌어다 쓰는 거(CDN 방식)
장점: 여러 폰트들을 사용할 수 있다.
단점: 로딩이 느리다
폰트를 가지고 있는 서버에 문제가 생기면 내 사이트에도 문제가 생김
FOUT: 웹폰트가 로드될 때까지 기본폰트로 그려졌다가, 다 로드되면 그때 폰트가 변환되면서 깜빡이는 현상
(크롬, 사파리, 에지)
FOIT: 웹폰트가 로드될 때까지 안 보여주다가, 다 로드되면 그때 웹페이지를 로드
*보통 웹폰트 보다 무료사이트에서 다운로드하여서 내 폴더에 보관해서 쓰는 게 더 좋다.
*보통 2~3개 넘어가는 폰트를 쓰지는 않는다 (그 이상 넘어가면 너무 더러워 보인다)
#폰트를 지정할 때
-@font-face {} 안에 지정해 주고 font-family에 폰트 이름(대부분 폰트 파일 이름을 쓴다)을 쓴다.
-src(url) 부분은 https// 로 갖고 온 거는 외부 폰트 경로로 가져온 것이고, fonts/ 로가져온다는것은
내가 만든 fonts 폴더에 font 파일들을 다운로드하여서 갖고 온 경로이다.
-font-weight, font-style 은 폰트 파일들을 다운로드할 때 거기서 제공하는 폰트 크기나 스타일들이 있을 건데
폰트 각가의 파일마다 다르기 때문에 적는 건 그때마다 다른데 보통 normal로 폰트 파일이 제공하는 크기나
스타일 대로 쓰는 편이다.
※접두사
-브라우저 접두사 (prefix)
구버전 브라우저들에서도 최신 방식 css를 이해할 수 있게 한다.(번역기 같은 거)
같은 CSS 명령어 지만, 브라우저마다 다르게 해석하거나, 지원하는 방법이 틀린 것들이 존재한다.
이는 CSS3의 웹표준이 아직 정해지지 않았기 때문이다.
따라서, 개발자들은 크로스 브라우징을 구현해야 한다.
방법은 브라우저 접두사를 사용하여 다양한 브라우저에 같은 결과를 내게끔 코딩한다.
-webkit- : 크롬, 사파리 새 버전의 오페라 브라우저에 대한 접두어이다. iOS 환경에서의 거의 모든 브라우저에 대해서도 해당한다.
-moz- : 모질라, 파이어폭스
-ms- : 익스 마이크로소프트의 브라우저에 쓰이는 접두어이다. 인터넷 익스플로러나 오래된 버전의 에지 브라우저에 해당한다
-o- : 오페라
- 사용방법 -
1) 속성명 앞에 붙인다.
2) @ 가 들어갈 땐 @-webkit-keyframes 이런 식으로 사용
3) prefix 사용 시 4개를 세트로 사용할 것(요즘 거는 맨 아래)
※선형 그라디언트
선형 그라디언트: 직선 방향으로 점점 색이 바뀌는 것
background-image 속성값임
linear-gradient(방향, 시작색,.... , 끝색)
방향: 1) 사방값
-webkit- 는 시작방향
나머지는 끝나는 방향(최신 방식은 to 붙이기)
| to top | 아래 → 위로 그라데이션 만듬 |
| to left | 오른쪽 → 왼쪽으로 그라데이션 만듬 |
| to right | 왼쪽 → 오른쪽으로 그라데이션 만듬 |
| to bottom | 위 → 아래로 그라데이션 만듬 |
2) deg - 각도
deg를 써서 각도로 방향을 지정해 줄 수도 있음
12시를 0도를 기준으로 시계방향으로 90 , 180 , 270 도로 설정해서 사용할 수 있음
색 위치: linear-gradient(방향, 시작색 [위치],.... , 끝색 [위치])
linear-gradient(to right, red 0%, green 50%, blue 100%);
단위 - px, %
1. box 1번은 우선 다른 웹브라우저에서도 사용할 수 있게 접두사를 선언해 준 것이고, 마지막에 요새 쓰는 속성명을 입력해 준다.( 선형 그라디언트는 linear-gradient를 사용하며 (방향, 시작색,...., 끝색을 사용한다. ))
-왼쪽에서 오른쪽으로 끝나고 , red ~blue로 색이 시작하고 끝날 것이다.
2. box 2번은 왼쪽에서 오른쪽으로 끝나는 건 같고, 중간에 green에 50px 가직 혀 있는데 이건 왼쪽에서부터 50px 떨어진 상태라 보면 되겠다( % 로도 가능하다.)
3. box 3번은 repeating-linear-gradient 라 적혀있는데 이건 선형그라디언트를 반복해서 나타내준다는 말을 뜻한다.
마지막 blue 에다 10%를 적용하므로 반복되는 현상이 만들어진다.
-반복 그라디언트 크기는 맨 마지막에 위치한 색상점 위치와 동일하다.
※원형 그라디언트
radial-gradient(색,..., 색);
radial-gradient(모양, 색,..., 색);
모양 - 타원(ellipse, 기본값)
원형(circle)
기준점 이동 - radial-gradient(모양 at 위치값, 색,..., 색);
반지름 지정 - radial-gradient(모양 [반지름] [at 위치값], 색,.., 색);
1) closest-side: 기준점에서 가장 가까운 면까지의 거리
2) closest-corner: 기준점에서 가장 가까운 꼭짓점까지의 거리
3) farthest-side: 기준점에서 가장 먼 면까지의 거리
4) farthest-corner: 기준점에서 가장 먼 꼭짓점까지의 거리
※Transform 2d
transform - 요소의 위치, 크기, 각도, 모양 '임시로' 바꾸는 것
자기 자신 대비
*hover랑 궁합이 좋다.
*transform 속성의 순서에 따라서 같은 값을 주더라도 결과가 다르게 나온다.
-속성값-
**1) 위치- translate
단위: px, %
translateX: 가로방향
translateY: 세로방향
translateZ: 깊이 (2d에서는 소용없음)
translate: (x축, y축)
*z축값 넣으면 동작 안 함
translate3 d: (x축, y축, z 축)
*z축값 안 넣으면 동작 안 함
**2) 크기 - scale(배수)
단위: 0 이상의 실수
scaleX(): 가로방향
scaleY(): 세로방향
scale()
scale(x, y)
**3) 각도 - rotate(각도)
단위: deg
rotateX(): 3d 없이 사용하면 찌부되듯 나온다
rotateY(): 3d 없이 사용하면 찌부되듯 나온다
rotateZ(): rotate() 랑 같다
rotate() : rotateZ() 랑 같다
rotate3 d(x, y, z)
4) 모양 - skew(각도)
* 기준점 바꾸는 속성
transform-origin
단위: 사방값, %, px
1.red box는 translate의 기준점은 왼쪽 모소리이고 , css를 (50px ,100px ) 왕같이 x축, y축 방향으로 각각 이동한 모습이다.( -50px ,-100px )를 준다고 하면 지금 있는 위치에 반대로 위치할 것이다.
2.green box는 transform-origin으로 기준점을 가로 x축 방향, 세로 y축 방향으로 이동해준상태에다 크기를 정해주는 속성인 scale을 이용해 원래 크기에 2배 크기로 커진 상태이다.(원래 scale의 기준점은 상자 중앙에 위치한상태이다.)
3.blue box는 rotate(45 deg)으로 원래 위치에서 모형을 45도 정도 돌려준 것이다.
※transition
transition - 애니메이션처럼 요소의 변화를 일정시간 동안 움직이게 하는 것
hover와 transform과 궁합이 좋다.
*display, background-image 와는 같이 사용 못함
*1) transition-property: 트랜지션을 적용할 속성명
- all: 기본값,
해당 요소에 있는 모든 속성
- 특정속성: 해당 속성에만 시간 적용
여러 개 줄 때는 , 로 구분
- none: 트랜지션 없애기
*2) transition-duration: 진행시간
단위 - 초(s)
여러 개 줄 때는 property 순서에 맞춰서 , 로 구분
3) transition-timing-function: 속도
ease
ease-in
ease-out
ease-in-out
**linear
4) transition-delay: 지연
단위 - 초(s)
*한방
transition: property duration timing-function delay
*property가 여러 개인 경우 한방씩 통째로 , 로 구분
ex) transition: property duration timing-function delay,
property duration timing-function delay,
property duration timing-function delay
transition: width 1s linear 3s,
height 2s linear 3s,
background 3s linear 3s;
*transition을 사용할 때 hover에다가 주면 마우스 갖다 대면 적용돼서 움직이긴 하는데 마우스해당영역에서 나오는 순간 시간이나 크기 적용이 안 돼서 바로 처음 상태로 돌아올 것이다.
그래서 hover 말고 원래 해당 클래스 박스에 transition을적용해야지 해당영역에서 마우스를 떼도 천천히 돌아오게끔 된다.
※transform3 D
1.transform3d 쓸 때는 보통 rotatex, y 주로 같이 쓰고
여기에서 부모 박스를 뜻하는 outer 에다가 perspective의 원근감을 주는 속성을 써준다 px가 클수록 멀리 떨어져 보이는데 (보통 300~500px 사이로 많이 쓴다. 이 사이가 차이가 그나마 뚜렷하게 보이는 구간이다)
2.blue 박스를 호버 하면 transform rotateX(80 deg): 가로방향으로 80 도정도 각도를 준다 2d에서 했으면 그냥 박스가 좁아지는 현상만 일어날 텐데 3d를 사용하면 이렇게 원금감이 적용된 박스가 돌아가는 효과를 줄 수 있다.
'국비교육' 카테고리의 다른 글
| 국비지원 20일차 (0) | 2023.08.12 |
|---|---|
| 국비지원 19일차 (transform, transition, hover을 활용실습) (0) | 2023.08.10 |
| 국비지원 17일차 web2(선택자~가상클래스~가상요소) (0) | 2023.08.08 |
| 국비지원 16일차 (0) | 2023.08.08 |
| 국비지원 15일차 (0) | 2023.08.04 |