CSS3 애니메이션 효과 만들기
CSS3 애니메이션 효과 html5와 CSS3가 나오기 전에는 애니메이션을 만들기 위해서 자바스크립트를 이용해야 하는 경우가 대부분이었지만 이제는 CSS3의 효과만 이용해서도 간단하게 애니메이션 효과를 만들 수 있게 됐는데요. 이번 글에서는 그 내용들을 살펴보고 예제를 만들어서 직접 구현해보는 과정을 살펴보겠습니다. animation에서 사용되는 속성은 얼마의 시간 동안 실행할지 지정해주는 duration 속성이 있고요. 어떤 요소에 특정 애니메이션을 적용하기 위해서 이름을 붙여주는 animation-name 속성입니다. 다시 말해 여러 개의 애니메이션을 정의할 수 있는 @keyframes 속성에서 aaa라는 애니메이션을 정의해 놨다면 특정 요소에서 animation-name 속성값에 aaa를 넣어주면 ..
HTML5 CSS 작성 및 링크
HTML5 CSS 작성 및 링크 ■ 웹 문서에서 뼈대를 이루는 게 html이라면 스타일을 정의하는 부분은 css(스타일시트) 인데요. css를 html과 같은 문서에 작성할 때는 태그 안에 태그를 만들어서 그 안에 작성하면 되는데요. 간단한 웹 문서라면 이렇게 작성해도 되지만, 적용할 스타일의 양이 많다면 소스가 길어져서 조금 복잡해지는데요. 이렇게 복잡하고 긴 스타일시트를 작성할때는 외부 파일로 만들어서 html 문서와 연결을 해주면 되거든요. 그 연결방법에 대해서 알아볼게요. 먼저 하나의 문서에 html과 css를 함께 작성할 때의 위치부터 정확히 알고 넘어갈게요. ■ html 문서 내부에서 css를 작성할 때는 태그 안에 태그를 작성하고 그 안에 작성해주시면 됩니다. 다음은 외부 스타일 시트를 작성..
HTML5 & CSS3
CSS(Cascading style Sheet)는 여러 가지 속성을 이용해서 웹 디자인을 이루고 있는 태그들을 제어하는 역학을 하는데요. html은 웹 페이지를 이루는 뼈대를 만드는 역할을 한다면 CSS는 그 뼈대에 살을 붙이는 역할을 한다고 생각하면 되는데요. 글자의 색이나 크기, 이미지의 위치나 크기, 표의 색이나 위치 등 우리 눈에 보이는 웹페이지의 구성 요소들의 겉모습을 꾸미는 역할을 하는 것입니다. 웹 표준에 의해서 작성된 웹 문서의 내용(HTML)과 디자인(CSS)은 구분되어 있습니다. 어느 부분의 색이나 위치만 바꾸고 싶으면 CSS만 수정하면 되고, 내용을 수정하고 싶다면 HTML 부분만 수정하면 되기 때문에 내용이나 디자인을 수정하면서 서로의 영역을 침범할 일이 없습니다. 또한, 이 방법을..