<HTML/CSS> Transition 1 - 글자색과 크기 변환

자바스크립트를 공부하면서 CSS의 애니메이션 기능을 잠깐 익히고 갈 필요가 있습니다. 그 중에서 가장 기초적인 내용으로 마우스 기능인 hover 기능을 통하여 마우스를 갖다 대었을 경우 색이나 크기가 변환하는 과정을 공부하도록 하겠습니다. 

 

기본적으로 마우스 기능인 hover를 사용하면 마우스를 해당 영역에 올리는 것 만으로도 활성화가 됩니다. 모양을 보기 편하게 하기 위해서 마우스를 위에 올렸을 때 손가락 표시가 나오는 pointer 기능도 같이 사용합니다. 

 

Transition 기능은 글자인 <h>태그, 문장인 <p>태그, 버튼내에 있는 글자크기, 영역을 지정하는 <div>태그의 크기 변화 등 다양하게 사용할 수 있습니다.

 

Transition 기능은 일종의 애니메이션 기능으로 변환되는 시간을 설정하면 됩니다. CSS에서 명령어를 사용하며 전체를 나타내는 CSS와  hover 기능이 포함된 내역에 같이 적용하여도 되나 기본적으로는 전체를 나타내는 곳에 사용합니다. 

 

다음 예는 브라우저상 <h>태그를 이용한 글씨색 변화, 문장을 변화시키는 배경색 변화, 글씨의 크기를 변화시키는 경우 마지막으로 <div>태그의 사이즈를 transform을 이용하여 2배 변화시키는 내용입니다. 

 

① 코드펜 HTML 내역

 

<h1>글씨색 변화</h1>
<p>배경색 변화</p>
<button>글씨 사이즈 변화</button>
<div>박스 크기 변화</div>

 

 

② 코드펜 CSS 내역

 

/* 초기화 */
*{margin: 0 auto; padding: 0;}

h1, p, button, div{
  border : 1px solid black;
  width : 300px;
  height : 50px;
  text-align : center;
  line-height : 50px;  
  font-size : 15px;
  display : block;
  margin-bottom : 20px;
  margin-top : 20px;
  transition : 3s;
}

h1:hover{
  cursor: pointer;
  color : orange;
  transition : 3s;
}

p:hover{
  cursor: pointer;
  background-color : black;
  color : white;
  transition : 3s;
}

button:hover{
  cursor: pointer;
  font-size : 10px;
  transition : 3s;
}

div:hover{
  cursor: pointer;
  transition : 3s;
  transform: scale(2);
}

 

 

③ 코드펜 이용 Transition 연습

 

 

See the Pen Transition1 by skkim0303 (@skkim0303) on CodePen.