[css] 트랜스폼 속성, 스프라이트 이미지 , 모바일 웹의 이해

[css] 트랜스폼 속성

HTML에서 축 중심에 따라 요소의 위치를 이동시키거나 사이즈 조절 및 회전을 시킬 수 있는 속성

2D 혹은 3D변형 가능

 

2차원 변환함수 속성

 

1. translate(translateX, translateY) : 특정 크기만큼 이동합니다.

2. translateX(translateX) : X축으로 특정 크기만큼 이동합니다.

3. translateY(translateY): Y축으로 특정 크기만큼 이동합니다.

4. scale(scaleX, scaleY): 특정 크기만큼 확대 및 축소합니다.

5. scaleX(scaleX): X축으로 특정 크기만큼 확대 및 축소합니다.

6. scaleY(scaleY): Y축으로 특정 크기만큼 확대 및 축소합니다.

7. skew(angleX, angleY): 특정 각도만큼 기울입니다.

8. skewX(angleX): X축으로 특정 각도만큼 기울입니다.

9. skewY(angleY): Y축으로 특정 각도만큼 기울입니다.

10. rotate(angleZ): 특정 각도만큼 회전합니다.

 

각 변환 함수값에 가로축(x축)/세로축(y축)의 개별적인 변형을 원할 시에는 뒤에 붙여 사용

skewX, skewY, scaleX, scaleY...

 

          transform: translate(150px, 200px);

          /* 특정위치만큼 이동 */

 

          transform: translateX(150px);

 

          transform: scale(1.5,1.5);

          /* 크기 축소, 확대. 배수로 입력, 1보다 작은 숫자 입력 시 축소 */

 

          transform: skew(45deg,15deg);

          /* 왜곡, 한쪽으로 기울이기 */

 

          transform: rotate(60deg);

          /* 회전 */

 

transform: rotate(60deg) scale(1.2) skewY(10deg);

 

transform-origin: 100% 100%;

변환되어지는 중심 축 설정

원래 HTML문서상 중심축은 왼쪽 상단이나 박스의 중심축 변경 가능

 

 

3차원 변환함수 속성

 

1. translate3d(translateX, translateY, translateZ) : 특정 크기만큼 이동합니다.

2. translateX(translateX) : X축으로 특정 크기만큼 이동합니다.

3. translateY(translateY): Y축으로 특정 크기만큼 이동합니다.

4. translateZ(translateZ)

 

5. scale3d(scaleX, scaleY, scaleZ): 특정 크기만큼 확대 및 축소합니다.

6. scaleX(scaleX): X축으로 특정 크기만큼 확대 및 축소합니다.

7. scaleY(scaleY): Y축으로 특정 크기만큼 확대 및 축소합니다.

8. scaleZ(scaleZ)

 

9. rotate3d(angleX,angleY,angleZ): 특정 각도만큼 회전합니다.

10. rotateX(angleX)

11. rotateY(angleY)

12.  rotateZ(angleZ)

 

 

          transform: translate3d(100px, 300px, 50px);

          /* z축까지 포함하여 특정크기만큼 이동 */

 

 

          transform: scale3d(2,4,6);

          /* Z축까지 포함하여 축소, 확대 */

 

          transform: rotate3d(2,3,4,45deg);

          /* 방향성과 함께 회전값 부여 */

 

 

 

스프라이트 이미지

 

비슷한 성격의 여러 개의 이미지를 사용성에 따라 하나로 뭉쳐놓은 것을 말하며,

제작한 이미지 파일을 배경이미지 위치값을 이용해 배치하는 방법

 

이미지가 많은 사이트의 경우,  이미지의 수만큼 로딩 시간이 오래 걸릴 수 있음.

 

toptal - CSS Sprites generator

 

background: url(img/header_background.png) repeat-x;

배경이미지 한꺼번에 표현

 

 

 

.left{

width: 62px;

height: 32px;

position: absolute;

top: 7px;

left: 10px;

display: block; << a태그는 인라인의 성격 - 박스화를 해야 사이즈 적용

font-size: 0px;

background-image: url(img/sprites.png);

}

 

.right{

width: 32px;

height: 32px;

position: absolute;

top: 7px;

right: 10px;

display: block;

font-size: 0;

background-image: url(img/sprites.png);

background-position: -62px 0px;

// 가로축으로부터 안쪽으로 62 밀어서 표현, 세로축은 그대로

 

 

 

모바일 웹의 이해

스마트기기의 발전으로 모바일 웹이 처음 탄생하게 되었고, 초기에는 pc의 웹버전과 모바일 버전이 따로 만들어졌었음.

사용자의 기기 접속 여부에 따라 html문서에 삽입된 스크립트 코드의 경로에 따라 pc용과 모바일용으로 전환

 

모바일 화면에 meta 태그 꼭 붙일 것

 

 

 

www.evernote.com/l/Alct2lf-VtxEgrcYmJudB48GilyL9sM4N88/

[css] 트랜스폼 속성, [심화응용] 스프라이트 이미지 , [심화응용] 모바일 웹의 이해