4일차 ul,ol(목록태그), 애니메이션 효과

<ul><li>순서 없는 목록 태그</li></ul>
<ol><li>순서 있는 목록 태그</li></ol>

 

• ul과 ol은 모두 li(리스트)를 가진다.

 

<예시>

ul	ol
ul이 가지는 특성 순서 없는 목록 태그	ol이 가지는 특성 순서 있는 목록 태그

 

• 불릿(bullet)기호를 없애고 싶으면 list-style-type:none; 으로 설정한다.
• div, ul을 html에서 많이 쓴다.
• li(리스트)를 가진다

---

 

css에서 menu를 hover 했을 때 sub가 보이게 하는 코드

.menu:hover .sub{
	display:block;}

 

 

---

애니메이션 효과

section{
	overflow:hidden;}               /*section 영역을 넘어가지 않게 한다.*/
.tip div{
    transition:all 0.5s;}          /*css속성을 변경할 때 애니메이션 속도를 조절한다.*/
.back{
	animation:back_ani 5s;}		  /*back_ani의 애니메이션의 작동시간을 5초로 설정한다.*/
@keyframes back_ani{			  /*back_ani의 애니메이션을 지정한다.*/
	0% {transform:scale(1.5);	  /*시작할 때*/
    100%{transform:scale(1);}	  /*끝날 때*/

• 투명도 opacity:0;
• 애니메이션 시작 시간 늦추기 animation-delay:1s;
• 계속 반복 linear infinite;

 

애니메이션이 끝난 후의 상태를 설정하는 코드

animation-fill-mode:forwards;

 

body에 스크롤을 없애고 싶을 땐

body{overflow-y:hidden;}

 

 

애니메이션 효과를 적절하게 이용하면 감각적인 웹페이지를 만들 수 있다.