Dreamweaver에서 이들 튜토리얼 사용해 보기
모던한 반응형 웹 페이지를 디자인하세요.
애니메이션 웹 버튼 만들기
CSS를 사용하여 애니메이션 효과를 페이지의 버튼에 추가하는 방법을 살펴보세요.
CSS의 transition 속성을 사용하면 심플하고 세련된 애니메이션 효과를 페이지에 추가할 수 있습니다. 페이지의 사용자 경험을 향상시키는 방법 중 하나는 사용자가 사이트를 탐색할 때 피드백을 제시하는 간단한 애니메이션을 추가하는 것입니다. 일반적인 효과로 버튼 또는 버튼 텍스트의 색상, 테두리, 크기에 대한 변경이 있습니다. 이 튜토리얼에서는 transition 속성에 사용되는 CSS를 중점적으로 소개합니다. 단계를 따라 하려면 프로젝트 파일을 다운로드하여 코드 전체를 표시합니다.
필요 항목
샘플 파일 다운로드
ZIP, 9KB
이 튜토리얼에서는 CSS 전환을 활용하는 방법의 일부만 다룹니다. 프로젝트 파일을 다운로드하여 직접 사용해 보시기 바랍니다.
전환 속성의 구조
CSS로 버튼과 같은 객체에 전환 효과를 적용하려면 두 가지 스타일이 필요합니다. 하나는 일반 상태의 버튼 스타일이고 다른 하나는 마우스 오버 상태(사용자가 버튼 위로 마우스를 가져갈 때)의 버튼 스타일입니다.
이 예제에서 일반 상태의 버튼 스타일은 CSS id 선택기(#button1)로 정의되어 있습니다. 마우스 오버 상태의 버튼 스타일은 동일한 버튼의 유사 선택기(#button1:hover)로 정의되어 있습니다. 유사 선택기는 사용자가 링크를 선택하거나 링크 위로 마우스를 가져갈 때 등 특정 상태의 요소 스타일을 정의합니다.
이 예제에서는 배경색이 파란색에서 빨간색으로 바뀝니다. 전환을 정의하는 데 다음과 같은 4개의 transition 속성을 포함시킵니다.
transition-property: 변경할 CSS 속성 지정(background)
transition-duration: 전환에 걸리는 시간 지정(0.3s)
transition-timing-function: 시간의 경과에 따라 전환 효과의 속도 변경 여부 지정(ease)
transition-delay: 전환이 시작되기 전의 시간 지정(0s)
시작하기 전에
Dreamweaver에서 create-animated-website-buttons.html 을 열고 분할 뷰에서 style.css 를 표시합니다.
사용자가 버튼 위로 마우스를 가져가면 버튼 색상이 빨간색에서 파란색으로 바뀌도록 CSS 스타일을 설정합니다.
일반 상태의 버튼에 대한 CSS에서 background 속성을 파란색으로 설정합니다. 동일한 CSS 규칙의 transition-property 는 일부 액션에 의해 상태가 변경되면 background 색상 속성이 변경되는 것을 보여줍니다. 나머지 transition 속성은 변화의 속도와 매끄러운 정도를 결정합니다.
transition-timing-function: ease; 를 적용하면 효과가 느리게 시작해서 천천히 종료됩니다.
유사 선택기는 사용자가 버튼 위로 마우스를 가져가면 버튼의 배경색 이 빨간색으로 바뀌고 마우스 오버 상태를 호출하도록 지정합니다.
CSS(일반)
#button1 {
...
background:#ADD7F4;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
CSS(마우스 오버)
#button1:hover {
background:#EA575B;
}
버튼의 테두리와 텍스트 색상이 변경되도록 CSS 스타일을 설정합니다.
일반 상태의 버튼에 대한 CSS에서 border-color 속성을 밝은 파란색으로 설정하고 텍스트의 color 속성을 흰색으로 설정합니다. 동일한 CSS 규칙의 transition-property 는 일부 액션에 의해 상태가 변경되면 border-color 속성과 텍스트의 color 속성이 변경되는 것을 보여줍니다. 나머지 transition 속성은 변화의 속도와 매끄러운 정도를 결정합니다.
transition-timing-function: linear; 를 적용하면 효과가 처음부터 끝까지 동일한 속도를 유지합니다.
유사 선택기는 사용자가 버튼 위로 마우스를 가져가면 버튼의 테두리 색상 과 텍스트의 색상 이 어두운 파란색으로 바뀌고 마우스 오버 상태를 호출하도록 지정합니다.
CSS(일반)
#button2 {
...
border-color: #7A97B2;
color: #f4f4f4;
transition-property: border-color, color;
transition-duration: 0.1s;
transition-timing-function: linear;
transition-delay: 0;
}
CSS(마우스 오버)
button2:hover {
border-color: #204F81;
color: #183B61;
}
버튼 크기가 변경되도록 CSS 스타일을 설정합니다.
일반 상태의 버튼에 대한 CSS에서 width 속성을 400px, height 속성을 100px, line-height 속성을 60px 로 설정합니다. 동일한 CSS 규칙의 transition-property 는 일부 액션에 의해 상태가 변경되면 width, height, line-height 속성이 변경되는 것을 보여줍니다.
유사 선택기는 사용자가 버튼 위로 마우스를 가져가면 버튼의 폭, 높이, 행 높이 가 더 커지고 마우스 오버 상태를 호출하도록 지정합니다.
CSS(일반)
#button3 {
...
width: 400px;
height: 100px;
line-height: 60px;
transition-property:
width, height, line-height;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
CSS(마우스 오버)
#button3:hover {
width: 420px;
height: 120px;
line-height: 80px;
}
버튼의 배경 및 텍스트 색상이 바뀌도록 CSS 스타일을 설정합니다.
일반 상태의 버튼에 대한 CSS에서 background-color 속성을 흰색으로 설정하고 텍스트의 color 속성을 회색으로 설정합니다. 동일한 CSS 규칙의 transition-property 는 일부 액션에 의해 상태가 변경되면 background-color 속성과 텍스트의 color 속성이 변경되는 것을 보여줍니다.
유사 선택기는 사용자가 버튼 위로 마우스를 가져가면 버튼의 background-color 속성과 텍스트의 color 속성이 반대 값으로 바뀌고 마우스 오버 상태를 호출하도록 지정합니다.
CSS(일반)
#button4 {
background-color:#f4f4f4;
color: #73746B;
transition-property:
background-color, color;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0;
}
CSS(마우스 오버)
#button4:hover {
background-color:#73746B;
color: #f4f4f4;
}
브라우저에서 미리보기(Preview in Browser) 를 클릭하여 원하는 브라우저를 선택하고 전환 효과를 확인합니다.
변경 내용을 확인하려면 먼저 파일을 저장합니다.
