CSS3

[HTML5&CSS3] SVG

SVG(Scalable Vector Graphics)는 벡터 그래픽을 표현하는 데 사용되는 태그입니다. 우선 SVG를 사용해 그래픽을 표현하려면 SVG태그를 통해 그래픽으로 표현할 영역을 잡아야 합니다. 그런 다음 svg태그 안에서 실제 표현할 그래픽을 작성합니다. 이번에는 원을 그려보도록 하겠습니다. SVG와 일반 이미지의 차이점은 이미지는 확대하면 품질이 깨지게 되지만 SVG는 벡터 방식이라 확대해도 깨지지 않고 품질을 계속 유지한다는 이점이 있습니다. 안타깝게도 본인이 이해하고 있는 SVG의 수준이 낮아서 본래 SVG에 관한 글을 올릴 생각이 없었으나 간단히 소개하는 정도로만 마무리하려고 합니다.

[HTML5&CSS3] Less 스타일시트 - 내장 함수

1. 색상 변환 관련 색상의 변환과 관련해 사용할 수 있는 함수로는 대략 다음과 같은 것들이 있습니다. lighten 지정된 색상을 밝게합니다. darken 지정된 색상을 어둡게 합니다. saturate 지정된 색상을 두드러지게 합니다. desaturate 지정된 색상을 두드러지지 않게 합니다. fadein 지정된 색상을 투명하게 합니다. fadeout 지정된 색상을 불투명하게 합니다. fade 지정된 색상을 반투명하게 합니다. spin 지정된 색상의 속성을 변경합니다. mix 지정된 색상을 섞습니다. 위 함수는 공통적으로 '색상, % 단위' 형식으로 값을 전달받으며 예외적으로 mix는 첫 번째와 두 번째 모두 색상을 파라미터 값으로 받습니다. @color : #FFF000; div:nth-child(1..

[HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자

1. 변수 @ 문자를 사용하면 특정 값을 담아두는 변수를 사용할 수 있습니다. @color : red; @size : 12px; div { background-color: @color; } span { font-size: @size; } 2. 연산 정수형 데이터에 대해 사칙연산이 가능합니다. @color : red; @size : 12px; @size2 : 10px; div { background-color: @color; } span { font-size: @size + @size2; } 3. 선택자 less는 {} 블록 안에 {} 블록을 포함시키는 방법으로 내부 블록에서 &선택자를 사용하면 자기 자신을 의미하게 됩니다. @color : red; @size : 12px; div { background-..

[HTML5&CSS3] Less 스타일시트 - 개요

Less 스타일시트는 특정 형태의 스타일시트를 CSS로 변환해 주는 변환 엔진입니다. CSS를 곧바로 작성하지 않고 이런 변환 엔진을 사용하는 이유는 좀 더 유연한 형태의 코드를 작성함으로써 피곤하고 지루한 CSS의 작성을 돕고자 하는데 목적이 있습니다. Less 스타일시트 변환엔진을 사용하는 방법은 대략 2가지 정도인데 하나는 공식 홈페이지에서 변환을 처리해주는 js 스크립트 파일을 다운로드하여 사용하는 것과 온라인 컴파일러 페이지를 통해 특정 코드를 변환시켜 그 결과를 직접 사용하는 방법 등이 있습니다. 우선 js파일을 받아서 사용하는 방법에 대해 알아보도록 하겠습니다. http://lesscss.org/ 에 접속합니다. 홈페이지 하단에 Or the bowser 부분에 보면 js파일을 가져올 수 있는..

[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박스를 움직여 보고자 합니다. 따라서 키프레임을 다음과 ..