CSS 심화

CSS 심화1 : Media Query 

웹 페이지가 다양한 화면 크기나 디바이스에 맞춰 적절한 스타일을 적용할 수 있게 해주는 CSS 기능

 
 
media type:

screen	print	speech	all
화면에 보여질 때	출력될 때	음성 출력할 때	모든 미디어 타입에 대하여

/*화면에서만 적용될 스타일*/
@media screen {
	body {
    	background-color :#lightblue;
        }
}

/*인쇄할 때만 적용될 스타일*/
@media print {
	body {
    	background-color:white;
        color :black;
        }
    header ,footer {
   		display:none; /*인쇄할 때 헤더와 푸터를 숨김*/
       }
 }

 
media feature rules

• aspect - ratio : 화면의 가로/세로 비율 설정 가능
• orientation : 디바이스의 방향에 따라 스타일 지정
  • portrait : 높이 > 너비
  • landscape : 너비 > 높이
• width, height : 화면의 너비와 높이 기준
• resolution : 화면의 해상도에 따라 스타일 적용

/*화면 너비가 600px 이상, 해상도가 192dpi 이상일 때 */
@media ( min-width:600px) and (min-resolution:192dpi){
body {
	background-color :lightgray;
    }
}

 
 
 

---

 

CSS 심화2 : Animation

 
FadeIn 효과 만들기

/*키프레임 정의*/
@keyframes fadeIn {
	from {opacity:0;} /*애니메이션 시작 지점*/
    to {opacity:1;} /*애니메이션 종료 지점*/
 }
 
 /*애니메이션 적용*/
 .box {
 	animation-name:fadeIn; /*적용할 애니메이션*/
    animation-duration: 1s; /*애니메이션 지속 시간*/
  }

 
Shaking 효과

animation : shake 0.5s ease infinite;

 

/* 위 코드와 같음*/
animation-name: shake;
animation-duration: 0.5s;
animation-timing-function : ease;
animation-iteration-count : infinite;

 
 
이 외 속성들

• animation-delay :2초 후 애니메이션 시작
• animation-iteration-count : 애니메이션 몇번 반복할 지 설정
• animation-fill-mode : forwards  : 끝나고 프레임 유지 
• none : 애니메이션 없을 때 기본값 유지 
• backwards :시작전, 첫 프레임 미리 보여주기 
• both: forwards, backwards 동시에 적용