공부기록

*숫자의 방향까지 생각한 큐브 만들기*

완성

1. HTML구조

2. 기본 속성 넣기

3. 겹치도록 position 주기.

6. 원근감과 3D 객체화 시키기.

(원근감 : 입체적으로 보이게 함, 객체화 : 색이 더 입체적으로 보이게 함 )

* 이 코드에서의 역할. 저게 본래 각자 속성의 역할은 아니다

5. 3차원으로 움직이기

태그는 회전되었을 때 자신의 면 방향을 기준으로 움직인다.

3D 표현하기

transform, perspective, transform-style, transfrom-origin

transform : translateZ() - Z축 이동

transform : translate3D ( , , ) - 세방향 이동

transform : rotateX(deg) -X축 기준 회전

transform : rotateY(deg) -Y축 기준 회전

transform : rotate3D( , , , ) -각 축의 앵글 정해놓고 회전

perspective : px - 원근감 깊이 ( 작을수록 원근감이 크다 )

transform : perspective(px)

transform-origin : top (회전축 설정)

transform-style : preserve-3D (3D 객체화. 자식태그는 자신의 3D 포지션을 나타낸다. )

1. 사용할 태그

2. 기본속성 넣기.

-3D-

3. transform : translate3D

X, Y, Z

- 티가 나진 않지만 앞으로(화면방향, Z방향) 100px 나와있다.  

4. transform : rotateX -Y

X축 방향으로 30도 회전. 정면에서 보면 더 짧아 보이므로 길이가 짧아진것 처럼 보인다.

5. transform : rotate3D( , , , )

소수들은 길이가 아닌 앵글.

글자를 보면 기울어져 있는 것을 확인할 수 있다.

↓ 한번에 나타낼 수 있음.

matrix로도 한번에 나타낼 수 있다.

6. perspective (원근감 ) : px;

원근감을 나타내 준다. 3D 변형을 준 속성보다 앞에 나와야 한다.

* perspecive가 부모에게 붙느냐, 자식에게 붙느냐의 차이 *

↓ HTML 태그와 기본 속성.

- transform : rotateX(40deg) -> 원근감의 효과를 주지 않으면 단순히 짧아진것 같다.

1) 자식태그에게 perspective를 주었을때

* transform의 항목으로 들어갈 수 있다 .

perspective(..px)

각자 원근감이 표현된다.

2) 부모태그에게 perspective를 주었을 때

부모태그 전체 영역을 기준으로 원근감이 생긴다 .

* 3D표현 실습 및 추가적인 속성 *

(animation, transition 사용)

transform-origin, transform-style : preserve-3d

1. 기본HTML 태그

2. 기본 CSS 속성.

* vertical-align: top : 이미지는 태그 안에서 아래쪽에 공간을 남겨놓는 경우가 있다. 그것을 막기 위해 쓰인다

3. transform : rotateY(50deg)

이미지 말고 poster 태그에

원근감이 없어 그냥 좁아진것 처럼 보인다.

4. 원근감을 주기 위해 perspective : 500px를 body에 주기

4. 무한하게 돌아가는 애니메이션 주기

5. 돌아가다가 마우스 올리면 이미지 X축으로 회전하게 하기

* transition 은 해당 태그가 변화되는 과정을 보여주는 속성이다

* transform -origin : 회전축을 바꿔준다.

원근감만 들어갔기 때문에 실제로 입체는 되지 않는다.

6. 태그 3D 객체화 하기.

부모태그와 위치를 비교했을 때 3D 위치를 갖게 한다.

<transform : 변형.> 

transform : 속성값(수치);  

* transform 은 신기능이기 때문에 벤더 프리픽스 등 크로스 브라우징을 위한 처리를 해야한다 * 

* transform은 애니메이션 등 동적기능을 만들때 사용하는 것을 추천한다 * 

*transform은 여러개 썼을 때 누적되어 적용되는 것이 아니라 맨 마지막에 쓴 것이 적용된다. *

<transform의 사용> 

-HTML-

-CSS- 

1. translate(거리)

 : 태그를 이동시킨다. 

* 원래 사용했던 position : relative 로 이동시키기. translate로 같은 효과를 줄 수 있다. 

...

1) transform : translate (x방향 , y방향)  

↓ 오른쪽으로 100px 이동

...

2) transform : translateX();

오른쪽으로 100px 이동

...

3) transform : translateY(); 

아래로 100px 이동

4) 거리를 %로 표시할때 : 이동시키는 태그의 크기의 해당 % 만큼 이동한다. 

아래의 내용은 100% 이므로 오른쪽으로 200px (태그의 width는 200px 이다) 이동했다. 

2. rotate(각도) 

단위로 각도 (deg) 이용. 

+면 시계방향으로 돌고 -면 반시계 방향으로 돈다. 

360도가 넘어도 상관없음

3. scale ()

1이 본래 크기. 배수로 크기가 변한다. 

장점 : 가운데를 기준으로 크기가 변함. 

* 원래 width -height등을 변화시키면 왼쪽위 모서리를 기준으로 크기가 변한다. 

4. skewX or Y(각도) 

: 각도만큼 기울여 평행사변형 만들기

( 평행사변형이 짤려서 margin을 30px에서 50px으로 바꿨다 )

* 여러개를 다 적용할 때는 사이에 띄어쓰기하여 한꺼번에 쓴다. 

* rotate와 translate 순서의 중요성. rotate 됐을때의 translate 방향

위의 예시와 rotate, translate의 순서가 바꼈다. 아래 그림이 결과. -> 위치가 위의 결과와 다르다 

translate의 기준은 해당 태그의 사방의 면. translate x 축은 오른쪽-왼쪽면을 기준으로 움직이고 . translate y 축은 위 아래 면을 기준으로 움직인다. 

rotate가 되면 면의 방향이 바뀌므로 translate의 결과가 달라진다. 

( 아래 그림의 별이 translate하기 전의 대충의 위치)

* transform : none; 

: 아무것도 나타나지 않는다.

*** 속성값과 수치 사이에 띄어쓰기가 있으면 안된다.  

애니메이션 : frame을 이용해 동영상과 비슷한 시각효과를 주는것. 

시작 상태와 결과상태를 정하고 변화는 과정을 보여준다.

* 중요 특성 *

1. 웹 페이지 세로고침과 동시에 시작한다.

2. 동작이 끝나면 원래 상태로 돌아간다. 

* transform 은 신기능이기 때문에 벤더 프리픽스 등 크로스 브라우징을 위한 처리를 해야한다 * 

<animation 만들기> 

- HTML-

1. .html에 div .box 만들기 

-CSS-

2. 기본 속성주기

3. @keyframes : 애니메이션의 동작을 만든다. 

기본 구조 

@keyframes 이름 {

from {애니메이션 시작 상태}

to {애니메이션 끝날때 상태}

}

4. from과 to 작성하기 

아래의 예시는 X축으로 200px 간 정사각형에서 X축 400px을 가기 위한 것이다. 

-애니메이션 속성-

5. keyframe을 사용할 태그에 애니메이션 이름 알려주기

animation-name : ;

6. 실행할 시간 정하기 

animation-duration: ; 

( animation-name와 animation-duration 이 애니메이션 실행의 기본요소이다. 둘다 있어야 애니메이션이 작동한다)

7. 애니메이션 기타 속성 

1) animation-timing-function : ;  애니메이션 진행의 속도 함수. linear은 기본적인 1차함수 (y=x) 모양이다. ( linear말고 ease 등 다양한 함수가 있다) 

2) animation-delay : ; 애니메이션 시작 전에 대기시간. from의 상태에 들어가기 전의 상태로 대기한다

3) animation-iteration-count : ; 애니메이션 반복 횟수 

*대기시간을 제외한 from-to 의 횟수이다. *

8. 애니메이션 기타 속성-animation-direction : ; 

: 애니메이션의 방향 (from과 to의 실행 순서)

1) reverse : from과 to가 바뀐다. to가 시작상태, from이 끝났을때 상태

2) alternate : from-to-to-from

9. animation-play-state : ; 

running or paused : 재생 or 정지

- 응용 

10. 위 속성들을 한번에 나타낼 수 있다. 

+) 2초안에 두바퀴 돌면서 정사가형이 원으로 변하는 애니메이션. 원으로 변한 다음에는 또다시 돌면서 정사각형으로 변한다. 무한반복 

1. 크로스 브라우징 : 멀티브라우저 지원 ( 익스플로러, 크롬, 파이어폭스, 사파리, 오페라, 웨일 .. ) 

1) 크로스 브라우징의 목적 : 여러 브라우저에서 같은 화면과 같은 서비스를 제곰함에 있어서 사용자에게 차이를 보이지 않게 하기 

2) internet explorer의 버전 : 

- window xp : internet explorer 8 

- window 7 : internet explorer 11

- window 8 : - 

- window 10 : internet explorer edge

3) w3school 홈페이지에 들어가면 HTML5, CSS3의 코드 등 나온지 얼마 안된 코드들의 지원현황을 볼 수 있다. 

(w3school : https://www.w3schools.com/)

ex) CSS3에서 새로 등장한 border-radius

검색 -> w3School에 접속

border-radius 에 대한 설명을 볼 수 있다. 

Browser Support에서 브라우저별 사용할 수 있는 버전 나와있음 

< 크로스 브라우징 방법> 

1. 벤더프리픽스 

 - 위의 예시의 Browser Support을 보면 -webkit- , -moz- 와 같은 것들을 볼 수 있다. 이것을 사용하는 것이 벤더 프리픽스

- 코드를 작성할 때 기입해주면 사용할수 있는 버전보다 하위버전에서도 사용할 수 있게 함 

-브라우저별 벤터프리픽스 

1) 크롬 : -webkit-

2) 사파리 : -webkit-

3) 파이어폭스 : moz- (mozila 라는 단체가 파이어폭스를 만들었기 때문에)

4) 오페라 : -o-, -webkit-

5) 익스플로러 : -ms- 

- 사용방법 : 사용하는 속성이나 태그 앞에 달아준다. 

ex) 

border-radius : 10px의 경우 

-webkit-border-radius : 10px;

-moz-border-radius : 10px; 

-o-border-radius : 10px;

보통 모든 브라우저의 벤터프리픽스를 다 작성한다 

2. 초기화 (CSS의 RESET)

: HTML5의 태그를 인식하지 못하는 브라우저가 있다. 해당 태그의 기본 CSS를 초기화로 기입해 주는것. 

- 웹상에 크로스 브라우징을 위한 리셋파일들이 많다. 

ex) normalize :  검색해서 다운 - reser.css 파일 만들기 -> 헤더에 연결하기 

- 초기방법. 코딩하면서 계속 확인해 줘야함. 

3. 버전에 따라 CSS파일을 만들기 

( 인터넷 익스플로러) 

ex) internet explorer7일때 ie7.css 실행하기. 

ie7.css CSS 파일을 만들고 header에 

<!--[if IE 7]>

<link rel="stylesheet" href="css/ie7.css" />

<![endif]-->

{

4. CSS에 약간의 편법 쓰기 

.ex {

color : red;

*color : green; (<- IE7에서 인식하는 코드. 인식 못하면 그냥 지나감)

_color : blue; (-<-IE6에서 인식하는 코드) 

( IE6 에서 _  가 언제 지원이 안될지 모르기 때문에 약간은 불안정하다 )

5. meta를 이용한 익스플로러 버전 정하기. 

만든 사이트가 상위버전으로 업그레이드를 하고 나니 정상동작이 안될 경우에 html 파일의 head 부분에 

<meta http-equryv="X-UA-Compatible" content="  iE=edge"/>

: 가장 최종버전으로 맞추겠다는 뜻