본문 바로가기

기초 문법/HTML&CSS

[CSS] animation 이전 절에서는 transtion 속성을 활용하여 마우스 오버 시에 모션 효과를 구현하였습니다. 이번 절에서는 animation과 @keyframes를 활용하여 사용자의 별다른 행동 없이도 미리 저장해놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다. animation을 설정하기 위해서는 @keyframes라는 명령어를 이용하여 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤, animation 구문으로 @keyframes에서 미리 설정했던 모션을 호출하는 방식으로 동작합니다. animation의 경우에는 @keyframse의 설정 등 다소 사용방식이 복잡할 수 있으므로 필수 구문이 잘 이해되지 않는다면 바로 해당 예제를 따라해보면서 animation 구문의 실행 흐름을 살펴보시기 바랍니다. .. 더보기
[CSS] transition CSS3를 처음 접하는 사람들에게 가장 신기한 기능이 무엇인지 물어본다면 아마 대부분 사람들은 transition을 꼽을 것입니다. 이 transition을 사용하면 누구나 간단한 설정만으로도 직관적인 모션을 제작할 수 있고 그 효과 또한탁월하기 때문에 이번 절에서는 CSS3의 꽃이라고도 할 수 있는 transtion, 전환 효과에 대해 알아보도록 하겠습니다. # Contents transtion # transtion transition의 기본 문법은 아래와 같습니다. transtion: 속성명 전환시간 가속도 설정 지연시간 transtion의 구문 위치는 변경 후인 hover이 아니라 변경이 일어나기 전인 원래의 태그 선택자입니다. 먼저 예제코드를 보도록 하겠습니다. 첫번째로 index.html 코드입.. 더보기
[CSS] 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기 바로 전 단계에서 transform의 다양한 속성들을 활용하여 평면상에서의 모양을 변형하는 법을 배웠습니다. 이번에는 평면이 아닌 입체적인 공간에서의 요소 변형법을 알아보겠습니다. 기존의 transform 속성들 중 3d로의 변형이 가능한 속성은 translate와 rotate 입니다. # Contents perspective translateZ # perspective 흔히 2d라고 하는 평면공간을 입체적인 3d 공간으로 바꾸는 제일 중요한 요소가 무엇일까요? 기존 x축, y축에 z축을 추가했을 시에 비로소 평면에서 입체공간으로 바뀝니다. 지금부터 우리가 다뤄볼 속성이 바로 이 z축에 해당합니다. 사람의 눈에 더욱 자연스러운 입체공간을 구현하기 위해서는 원근감이라는 요소를 추가해야 하는데 브라우저상에 .. 더보기
[CSS] 특정 요소의 모양을 평면상에서 자유롭게 변형하기 기존 웹 표준에서 모든 HTML 요소의 모양은 사각형이었으며 해당 모양을 변형할 수 있는 방법이 없엇지만 CSS3으로 넘어오면서 포토샵의 기능과 비슷한 변형 속성이 대거 추가되었습니다. 따라서 기존에 불가능하던 다양한 기법이 순수 CSS 기술만으로도 구현이 가능해졌습니다. 다음은 transform에 속성 중 평면상에서 구현 가능한 기능들을 위주로 학습하겠습니다. # Contents translate skew scale rotate transform-origin # translate translate는 현재 요소의 위치 값을 기준으로 x축 또는 y축으로 해당 요소를 이동시킵니다. 아래는 translate의 필수 구문입니다. transform: translateX(x축 이동거리) transform: tran.. 더보기
[CSS] 배경에 그라디언트 색상과 모양 지정하기 특정 요소의 배경에 그라디언트 색상을 지정하기 위해서는 CSS3의 gradient를 이용하면 간단히 CSS의 코드 수정만으로도 원하는 그라디언트의 모양과 색을 자유자재로 변형할 수 있습니다. 다음의 필수 구문 정리를 통해 gradient의 사용법을 알아보겠습니다 # Contents gradient # gradient 아래는 gradient의 필수 구문입니다. background: 그라디언트 모양(방향, 색상1, 색상2); 그라디언트 색상의 개수는 원하는 만큼 추가할 수 있습니다. 그라디언트의 모양에는 선형 그라디언트와 원형 그라디언트가 있습니다. 다음의 예제를 통해서 각각의 gradient 속성 값에 따라 달라지는 모양의 변화를 확인해보겠습니다. 먼저 예제코드를 보도록 하겠습니다. 첫번째로 index.h.. 더보기
[CSS] box-sizing 개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 content-box border-box 둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리.. 더보기
[CSS] Reset CSS 프로젝트를 새로 만들 때 필요한 리셋 CSS입니다. 웹 브라우저가 기본적으로 제공하는 CSS 를 초기화 해주는 코드로써 나의 코드를 보다 더 자유롭게 꾸밀 수 있다는 장점이 있습니다. 또한 브라우저 간의 최소한의 차이를 제거함으로써 브라우저 요소들의 스타일이 존재하지 않는 처음 상태에서 디자인할 수 있습니다. # Contents Reset CSS 코드 # Reset CSS 코드 아래 코드를 reset.css 파일로 저장하여 사용하세요 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, .. 더보기
[CSS] Flex 웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용하지만 이러한 속성은 특성 상 한계와 복잡도가 존재합니다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었습니다. flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex CSS는 부모 요소인 flex 컨테이너 와 자식 요소인 flex 아이템으로 구성됩니다. flex 컨테이너가 flex 태그의 영향을 받는 공간이고, 그 안에서 flex 아이템들의 배치, 정렬이 설정된 속성에 따라 변경되는 것이기 때문에 flex 를 사용하려면 부모먼저 정의한 후 자식 요소에 배치를 고려해야 하겠습.. 더보기

티스토리툴바