공부기록

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

완성

1. HTML구조

2. 기본 속성 넣기

3. 겹치도록 position 주기.

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

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

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

5. 3차원으로 움직이기

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

* 완성 모습 *

< HTML 구조 >

1. 초기화

2. 기본크기, 가운데정렬하기.

3. position : absolute이용하여 두개의 동전 겹치기

( 뒷면이 뒤에서 나오기 때문에 앞으로 온다. )

*4. 뒤집으면 뒷면 나오게 하기*

위의 웹 화면을 옆에서 본다고 생각하고 과장해서 그렸을 때

( 파란색 : back (학그림), 빨간색:front (500) , 회색은 각 태그의 뒷면)

이 상태에서 맨 위를 덮고 있는 back을 뒤집는다

back이 뒷면을 보이고 있을 때 보이지 않게 한다면

-> front가 보인다.

반대로 뒤집혀 있을때도 마찬가지

즉, 맨 위의 back을 뒤집어 놓고 두 태그 모두 뒷면을 보일 때 hidden하게 하면 된다.

( back이 hidden하여 front가 보인다)

5. hover를 사용하여 마우스를 올리면 back이 보이게 하기 ( flip을 뒤집으면 된다)

과정이 보이는 효과를 위해 transition 이용

( flip이 아닌 li에 hover를 준 이유 : li가 너비와 높이가 있기 때문에 동전이 돌아가는 와중에 너미가 좁아져도 버벅되지 않는다)

: 뒤집어도 똑같이 front만 보인다.

-> flip을 3D 객체화

6. flip에 transform-style:preseve-3d, coin에  원근감.

* 동전이 원이라 원근감이 효과를 주진 못하지만 사각형 같은 도형의 경우에는 효과가 있다.

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초안에 두바퀴 돌면서 정사가형이 원으로 변하는 애니메이션. 원으로 변한 다음에는 또다시 돌면서 정사각형으로 변한다. 무한반복 

* checked : 체크되면 이라는 조건이 붙게한다. * 

사용 : 선택자:check {}

(hover와 같은종류)

ex)

1.  radio type input 만들기

2. checked의 기본적인 활용

+) 아코디언 시스템 

*모듈* 

클래스를 이용해 코드를 간결하게 만드는 것. 

(재활용, 재사용)

기존의 방법으로 아래의 레이아웃을 만들기 

모듈 이용하기 

1. 반복적으로 사용할 CSS속성을 임의의 class명으로 .style파일에 미리 만들어 놓는다. 

2. 사용하고 싶은 태그에 해당 class를 넣는다. 

훨신 간결 ! 

< 개발자 도구 > 

웹 화면에서 현재 소스의 구성과 가상으로 소스를 변화시킬수 있게 하는 도구 

↓ 이렇게 생겼다 

* Element와 style만 다룬다*

* 상단의 Element 옆의 Console은 Javascript 

* 개발자 도구를 사용해 보기 위해 다른 색의 box두개를 만들었다 * 

<HTML>

<CSS>

<웹화면>

1. 개발자도구 창 띄우기 

Element (HTML코드)  - style(CSS코드). 

1) F12  : 전체(body)에 대한 개발자도구가 뜬다. 

2) 특정 영역 선택해서 마우스 오른쪽 - 검사 : 해당 영역에 대한 소스가 뜬다. 

2. 개발자도구 위치변경 

3. mobile에 적용할 때 

4. 선택태그 바꾸기 : Element에서 원하는 태그를 클릭하면 그 태그의 속성을 볼 수 있다. 

5. hover등 액션시 속성 보기

6. 속성 바꿔보기 : 시연만 하는것이고 실제 소스가 변하진 않는다. -> F5 누르면 다 사라진다

1) class추가 

2) 그 외에 모든 CSS를 시연해볼 수 있다. 

- 체크해제

- 색 바꾸기

- 너비 바꾸기

- margin -> padding 

7. application 

1) local storage : 내 컴퓨터에 영원히 저장 

2) session storage : 한번 새로고침하면 다 지워짐 

3) cookies : 저장할 수 있는 기간 저장  

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"/>

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

* font awesome 에서 아이콘 이용하기*

< 사용 전> 

1. font awesome 접속 

http://fontawesome.io/

2. get stated

3. Downroad

4. pro & 보통 중 선택하기

5. 다운로드 받아서 압출 풀기

6 해당 폴더 안의 fonts 폴더를 index.html과 같은 폴더로 옮긴다

* less, scss : 전처리기 관련된 것. 사용하지 않는다

7. 또 그 폴더로 가서 그 폴더 안의 css 폴더

8. 사용하는 css폴더 안에 선택하여서 넣어야 한다.

- 위의 font-awesome 파일 : 가독성이 좋게 만들어졌다. 

- 아래의 font-awesome.min: 공백을 없앰으로써 용량을 줄였다 ( -> 트래픽폭발 조금이라도 예방 가능) 

- 원하는 것 선택하여 css 폴더 안에 넣는다.

9. 다 완료 했을 때의 폴더 모습 위의 과정을 다 했다면 font-awesome-4.7.0폴더는 삭제해도 된다. 

10. 다운로드 했던 창에서 조금 더 내려 Using CSS 아래의 내용을 복사한다.

11. index.html 의 head 부분에 복사해서 넣는다. font-awesome.min.css (or font-awesome.css) 의 위치를 잘 적어준다.

< 사용시 >

1. 상단 메뉴에서 icons

2. 원하는 것을 클릭한다. 아래의 코드 복사

3. HTML 파일에 넣는다. (i태그)

↓ 결과

<icon 을 CSS로 꾸밀 수 있다.>

1. id만들어주기 (편의를 위해 만들었다)

2. CSS 적용

3. 결과