CSS3

[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-으로 변경되으니 참고 바랍니다.

[HTML5&CSS3] 선형 그레디언트(linear-gradient)

색상에 선형 그레디언트(linear-gradient)를 표현하려면 linear-gradient 함수를 사용할 수 있으며 해당 함수는 CSS3전용입니다. 첫 번째 속성의 값은 그레디언트를 그릴 각도이며 이어서 시작 색상 및 위치(% 단위)와 종료 색상 및 위치를 지정하면 됩니다.

[HTML5&CSS3] 그림자 효과

1. text-shadow 글자에 그림자 효과를 부여합니다. 속성의 값을 부여하는 순서는 '오른쪽 부분, 아랫부분, 그림자 진한 정도, 색'이며 그림자를 여러 개 부여하고 싶다면 해당 순서에 맞춰 표현하고자 하는 그림자 개수만큼 속성을 부여합니다. 2. box-shadow 박스에 그림자 효과를 부여합니다. 속성에 값을 부여하는 순서는 text-shadow와 동일합니다.

[HTML5&CSS3] 위치

1. position 요소의 위치를 설정합니다. position의 속성을 absolute로 잡으면 left, top, right, bottom속성을 이용해 요소의 위치를 직접 지정할 수 있습니다. 이 외에 static속성은 다른 태그와의 순서에 따라 위에서 아래로 자동 배치되며 이때는 위치를 임의로 설정할 수 없습니다. relative는 본래 자신이 위치해 있던 위치를 기반으로 좌표가 설정되며 fixed는 absolute와 비슷하지만 스크롤의 상태에 영향을 받지않고 고정된 좌표를 사용하게 됩니다. 2. z-index 여러개의 요소가 겹칠 때 앞으로 드러나는 순서를 지정하는 속성입니다. 기본적으로는 뒤에 나오는 요소가 앞으로 위치하게 되는데 위에서 처럼 z-index의 값을 임의로 부여하면 요소가 앞으로 ..

[HTML5&CSS3] float

보통 이미지와 글자가 같이 있는 기사나 블로그 글을 작성할 때 이미지와 글자를 배치하는 용도로 사용하는 속성입니다. float속성을 사용하지 않은걸 예로 들면 위와 같이 되지만 float속성을 사용하면 위와같이 이미지와 글자의 레이아웃을 구성할 수 있습니다. 속성의 값으로는 left와 right를 사용할 수 있으며 인접한 태그를 왼쪽 혹은 오른쪽에 배치할 수 있도록 합니다.