전체 글

[HTML5&CSS3] 규칙(@-rule)

1. @import 문서 안에서 외부 CSS혹은 Font 등 다른 요소의 파일을 추가합니다. Web Page Design Hello, World! @import는 기존 CSS파일을 추가하던 구문과 동일한 역할을 수행합니다. 2. @font-family 문서 안에서 특정 font사용을 지정합니다. Web Page Design Hello, World! font-family의 값은 단순한 명칭을 지정하며 임의의 내용을 지정할 수 있습니다. src는 실제 폰트를 다운로드하는 속성이며 local은 사용자 컴퓨터에 있는 폰트를 사용하도록 하며 만약 해당하는 폰트가 없는 경우 url에 지정된 주소에서 폰트를 내려받도록 합니다. 해당 폰트 적용을 위해서는 font-family속성을 사용해야 하며 @font-face에서..

[HTML5&CSS3] 3차원 구현

2차원 구현에서 transform속성에 translate, scale, rotate 등의 함수를 사용했었는데 3차원 구현에는 translate3 d, scale3 d, rotate3d와 같은 함수가 사용됩니다. translate3d(x, y, z) 지정된 좌표만큼 개체를 이동시킵니다. (px와 같은 단위사용) translateX(x) X축만큼 개체를 이동시킵니다. translateY(y) Y축만큼 개체를 이동시킵니다. translateZ(z) Z축만큼 개체를 이동시킵니다. scale3d(x, y, z) 지정된 좌표로 크기를 늘리거나 축소합니다. (소수점이나 정수사용) scaleX(x) X축만큼 크기를 늘리거나 축소합니다. scaleY(y) Y축만큼 크기를 늘리거나 축소합니다. scaleZ(z) Z축만큼 ..

[HTML5&CSS3] 2차원 구현

CSS3에서 2차원/3차원을 구현하는 데는 transform함수가 사용됩니다. Web Page Design Hello, World! 예제에서는 transform속성에 rotate함수를 사용하여 대상 개체를 60도로 회원 시켰습니다. 이외에 transform에는 다음과 같은 함수 사용이 가능합니다. translate(x, y) 지정된 좌표만큼 개체를 이동시킵니다. (px와 같은 단위사용) translateX(x) X축만큼 개체를 이동시킵니다. translateY(y) Y축만큼 개체를 이동시킵니다. scale(x, y) 지정된 좌표로 크기를 늘리거나 축소합니다. (소수점이나 정수사용) scaleX(x) X축만큼 크기를 늘리거나 축소합니다. scaleY(y) Y축만큼 크기를 늘리거나 축소합니다. skew(x,..

[HTML5&CSS3] 키 프레임(keyframes)을 통한 애니메이션 구현

keyframes과 몇몇 애니메이션 속성을 사용하면 간단한 애니메이션을 구현할 수 있습니다. 이를 이용해 div를 왼쪽에서 오른쪽으로 이동시키는 간단한 애니메이션을 구현해 볼 텐데 우선 다음과 같이 div를 생성하고 관련 스타일을 입혀줍니다. Web Page Design Hello, World! 이제 키프레임을 작성해 봅시다. 키프레임은 @keyframes [이름] 형태로 시작됩니다. 내부에 from과 to가 보이는데 시간대별로 from은 0% 상태일 때를, to는 100% 상태일 때를 의미합니다. 물론 0%, 100% 형태로 지정해도 무관합니다. 이번 예제에서는 처음에는 왼쪽 0위치였다가 50% 상태일 때는 200, 마지막에는 300 정도로 div박스를 움직여 보고자 합니다. 따라서 키프레임을 다음과 ..

[HTML5&CSS3] 변형 속성

CSS3에서는 변형 속성을 통해 간단한 애니메이션을 구현할 수 있습니다. 우선 변경 속성이 어떻게 사용되는지부터 간단하게 알아보겠습니다. Web Page Design Hello, World! 위 예제는 div에 간단한 스타일을 적용한 예제입니다. 이 상태에서 div에 마우스를 올리면 색상이 변하도록 스타일을 다음과 같이 추가합니다. 그럼 div에 마우스를 올릴 때마다 색상이 검은색으로 바뀔 것입니다. 이제 애니메이션 구현을 위해 transition-duration 속성을 추가하고 값을 3s로 주겠습니다. 이렇게 하면 div에 마우스를 올릴 때 색상이 바뀌는 건 똑같지만 3초 정도의 지연시간이 적용되어 색상이 서서히 바뀌는 걸 확인할 수 있습니다. 이와 같은 변경 속성은 다음과 같은 속성에 적용되며 위치관..

[HTML5&CSS3] 스프라이트(Sprite) 이미지

최근 들어서 웹에서는 되도록이면 이미지 사용을 줄이고자 하는 경향이 있습니다. font나 기타 CSS사용으로 어느 정도 대체가 가능하기 때문인데 그럼에도 불구하고 아직까지 웹에서는 많은 수의 이미지가 사용됩니다. 이미지는 클라이언트가 웹페이지를 요청하게 되면 해당 웹페이지에서 사용되는 모든 이미지가 클라이언트쪽으로 다운로드되는데 이때 사용되는 이미지수가 많으면 그만큼 요청수가 많아지게 되고 결국 페이지 로딩 시간이 오래 걸린다는 문제가 있습니다. 이 문제를 해결하고 이미지관리를 쉽게 하고자 스프라이트 이미지가 사용됩니다. 보통 스프라이트 이미지는 버튼이나 기타 아이콘 같은 UI 이미지가 여러 개 있는 걸 의미합니다. 위 이미지는 CLIEL이라고 하는 문구가 적힌 이미지인데 이걸 각각의 문자가 같이 있는 ..

[HTML5&CSS3] 뷰포트(viewport)

웹페이지에서 클라이언트에 특정 정보를 전달하기 위한 목적으로 meta태그를 사용합니다. 이때 만약 모바일에서 웹페이지에 접근하는 경우 모바일 화면에 대한 적절한 대응을 위해 meta태그에 뷰포트(viewport)를 사용합니다. viewport에는 다음과 같은 속성을 입력해 모바일 화면에 대응될 수 있도록 합니다. width 화면의 너비를 의미하며 200, 300등의 값을 지정하거나 device-width로 장치의 화면에 맞출 수 있습니다. height 화면의 높이를 의미하며 200, 300등의 값을 지정하거나 device-height로 장치의 화면에 맞출 수 있습니다. initial-scale 화면확대비율로 1.0, 2.0등의 값을 지정합니다. user-scalable yes, no등의 값을 지정하여 임..

[HTML5&CSS3] 벤더 프리픽스(vendor prefix)

특정 CSS속성이 표준으로 제정되기 이전에 실험적인 기능들이 각 브라우저별로 인식하게 하기 위한 접두사입니다. 위 예제의 경우 transform CSS를 사용하기 위해 각 브라우저별로 벤더프리픽스 접수사를 사용한 것을 확인할 수 있습니다. 여기서 -ms-는 익스플로러 -webket-은 크롬, 사파리와 대응되며 -moz-는 파이어폭스, -o-는 오페라인데 현재는 -webket-으로 변경되으니 참고 바랍니다.