[애니메이션 패키지 파일]
- 애니메이션들이 구현되있는 css 파일 아래는 cdn방식으로 가져다 쓰는것
<head>
<meta charset="utf-8">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="animate__animated animate__bounce">Example</div>
<!-- 기본적으로 정의되어 있는 클래스명들을 입력하면 해당 애니메이션 효과가 나타남 -->
</body>[미디어 쿼리 기초]
- 적응형 웹사이트 : px단위로 제작되서 레이아웃이 변할 때 툭툭 끊기는 효과를 가지고 변화됨
- 반은형 웹사이트 : %단위로 제작되서 레이아웃이 보다 자연스럽게 변화됨
/*
320px ~ 786px미만 : 스마트폰
768px ~ 1024px미만 : 태블릿
1024px 이상 : PC
*/
/* pc로 접속했는지 태블릿으로 접속 했는지 모바일로 접속했는지 기준점은 만들어줌 */
@media (min-width: 600px) and (max-width: 767px) {
/* 기존에서 767로 작아지면 아래코드로 변형 600보다 작아지면 다시 월래 코드로 변형 */
.pc {
color: blue;
font-size: 20px;
background-color: yellow;
}
}
@media (min-width: 100px) and (max-width: 599px) {
/* 599지점부터 100지점까지 새로운 속성을 주고 싶을경우에 media를 한번더 작성 */
.pc {
color: green;
font-size: 10px;
background-color: gray;
}
}
- 미디어쿼리 사용시 주의점
미디어 쿼리 바깥에서 적용한 속성이 미디어 쿼리에 상속이 될수가 있음
/*background-color: yellow;*/
미디어 쿼리 사용시 반드시 넣어줘야 하는 meta태그가 있음
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- name="viewport" : 웹사이트에 접속하는데 사용되는 기기 화면
content="width=device-width : 웹사이트의 width값은 device의 width을 적용함
initial-scale=1.0 : 비율은 항상 1.0을 유지함
-->orientation: portrait /* 사용자가 화면을 세로로 들었을때 */
orientation: landscape /* 사용자가 화면을 가로로 들었을때 *//* 동일한 h1태그를 모바일과 pc버전에 따라 서로 다른 값을 보여주는 코드 */
.pc {
color: red;
font-size: 50px;
background: pink;
}
.mobile {
display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
.pc {
display: none;
/* 브라우저 크기가 320px~767px 이면 모바일 크기 이므로 pc클래스를 가진 값은 숨김처리 */
}
.mobile {
display: block;
/* 브라우저 크기가 320px~767px 이면 모바일 크기이므로 mobile클래스는 다시 나타나게 처리 */
}
}PC버전
Mobile버전
/* 미디어 쿼리를 모바일 -> 태블릿 -> PC 순으로 작성하는 기법 */
h1 {
font-size: 20px;
background-color: yellow;
} /* 이 영역이 Mobile버전 768미만인 경우 */
/* max-width 1024px 미만 */
@media (min-width: 768px) { /* 이 영역이 태블릿버전 768 이상인경우 적용 */
h1 {
font-size: 40px;
background-color: pink;
}
}
@media (min-width: 1024px) { /* 이 영역이 PC버전 1024이상인경우 적용 */
h1 {
font-size: 80px;
background-color: gray;
}
}Mobile 버전(미디어쿼리 바깥쪽 부분의 코드가 해당됨)
태블릿 버전
PC 버전
개발자를 꿈꾸는 이상화입니다.