티스토리 뷰
1. 변이(변화) 효과 ( transition )
- 효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 그 과정을 시간적으로 조정할 수 있게 해주는 속성
- 변이 속성의 종류 :
- 1 ) transition-property : 변화 효과를 적용할 속성들을 나열
- 2 ) transition-duration : 변화가 지속되는 시간을 지정
- 3 ) transition-timing-function : 변화하는 속도 / 타이밍을 지정
- + transition-timing-function의 속성값 : ease, linear, ease-in, ease-out, ease-in-out
- + 속성값에 따라서 변화하는 속도가 시간에 따라서 달라진다.
- 4 ) transition-delay : 변화 효과가 지연되는 시간 지정
- 단축형 예시 : transition : background 2s ease 1s, padding 1s linear 2s;
- 변이 속성은 이렇게 속성을 각자 작성할 수도 있고, 단축형으로 작성할 수도 있다.
2. 애니메이션 효과
- 애니메이션은 시작과 끝 사이에 확실하게 이렇게 변화해야 한다는 지점인 Keyframe들이 있다. ( 키프레임과 키프레임 사이를 보간이라고 부른다. )
- 애니메이션 효과는 먼저 @keyframes를 통해 애니메이션의 이름을 지정한 후
- Keyframes-selector을 통해 키프레임의 정의해야 한다.
- 애니메이션의 키프레임은 from, to로 지정할 수도 있고, 퍼센트 단위로 애니메이션을 지정할 수도 있다. (**)
3. 반응형 웹
- 반응형 웹이란, 웹 페이지 하나로도 데스크탑, 태블릿pc, 스마트 폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지를 의미한다.
- 미디어 쿼리를 사용해서 개발하며, 개발 효율성과 유지 보수가 용이하다.
4. 뷰포트 설정 ( meta태그 )
- Viewport meta태그의 content 속성에서 입력할 수 있는 값이다.
- 1 ) width : 화면 넓이
- 2 ) height : 화면 높이
- 3 ) initial-scale : 초기 확대 비율
- 4 ) user-scalable : 확대 및 축소 기능을 허락할 것인지 정한다.
- 5 ) minimum-scale : 최소 축소 비율
- 6 ) maximum-scale : 최대 확대 비율
5. 미디어 쿼리 설정
- @media(<미디어 쿼리>){<css 코드>}로 설정하며, 스타일 시트 내부에서 특정한 교칙을 표현하는데 사용한다.
- @import 규칙 : 외부 스타일을 가져온다.
- @font-face 규칙 : 글꼴을 추가로 정의할 수 있다.
- + media 속성 : link 태그에 rel=”stylesheet” href=”파일이름” media=”미디어 쿼리”를 입력하여 조건에 맞는 장치에만 CSS을 가지고 올 때 사용한다.
- 미디어 쿼리 문법 : @media 미디어유형 and (미디어 특징1) and (미디어특징2 ) …
- 미디어 특징의 소괄호 ( )는 생략이 불가능하다.
[ 1. 변이(전이) 속성1 (***) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3차원 전이 함수 2</title>
<style>
div{
width: 100px;
height: 100px;
background: yellow;
border: 3px solid orange;
transition: width 2s;
/* 2초 동안 가로 형태로 움직이는 형태를 보여준다. */
/* 2차원 변환 함수는 transformation을 사용하고, 3차원 전이(변이) 함수는 transition을 사용한다. */
}
div:hover{
width: 300px;
}
/* UI 이벤트 가상 선택자를 통해, 마우스를 올려 놓았을 때 가로 길이가 바뀌게 설정하였다. */
</style>
</head>
<body>
<div>마우스를 올려 놓으면 박스가 늘어 납니다.</div>
</body>
</html>[ 2. 변이 속성2 (****) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 변이 효과 ( 시간을 통해 변화하는 과정을 보여준다. ) (****) </title>
<style>
div{
margin: 50px;
width: 100px;
height: 100px;
border: 1px solid red;
background-color: yellow;
transition: width 3s, height 3s, border 3s, transform 3s;
/* 각 속성의 변화를 각자 지정할 수 있다. */
/* 변환함수 또한 지정하여 사용할 수 있다. */
}
div:hover{
width: 200px;
height: 200px;
border: 3px solid blue;
transform: rotate(360deg);
/* 요소를 360도 회전시킨다. ( X축이나 Y축을 지정하지 않았기에, X축과 Y축 둘 축 모두 기준으로 돈다. ) */
/* 개발자 도구를 통해 변이 효과를 보면, 실제 가로와 세로 길이는 변하지 않았다고 표시된다. */
}
</style>
</head>
<body>
<div>마우스를 올리면 박스가 화전하면서 커진다.</div>
</body>
</html>[ 3. 변이 속성 3 - 기본형으로 작성해 보기 (*****) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변이 효과 4 - 기본형으로 작성(****)</title>
<style>
div{
width: 100px;
height: 100px;
background: orange;
transition-property: width, background, color;
/* 변이할 속성을 지정하였다. */
/* timing을 지정하지 않았기에, 바로 변화하게 된다. */
transition-duration: 2s;
/* transition-duration을 통해서 변이하는 시간을 지정하여, 변이과정을 보여주게 한다. (***) */
/* transition-duration 속성값을 하나만 지정하면, 지정한 속성이 모두 같은 속성값을 가지게 되고, 1s, 2s, 3s처럼 속성에 각자 지정할 수 있다. */
transition-timing-function: ease;
/* ease는 처음과 끝은 다소 느리지만, 중간에는 빠르게 변이하는 속성값이다. */
transition-delay: 1s;
/* 변이 효과가 몇 초 후에 시작되도록 지정할 수 있다. */
/* 이 경우에는 마우스를 올려 놓고 1초 후에 변이 효과가 시작된다. */
}
div:hover{
width: 400px;
background: blue;
color: white;
/* 글자 색을 하얀색으로 변이하게 하였다. */
}
</style>
</head>
<body>
<div>마우스를 올려 놓으면, 여러 속성이 변이합니다.</div>
</body>
</html>[ 4. transition - timing - function 속성값 사용하기 (**) : cubic-bezier ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition-timing-function 속성값 사용하기(**)</title>
<style>
div{
width: 100px;
height: 50px;
border: 3px solid lightpink;
background: red;
color: black;
transition: width 3s;
}
#div1{
transition-timing-function: linear;
/* linear은 일정한 속도로 변이한다. */
}
#div2{
transition-timing-function: ease;
/* ease는 처음과 끝이 다소 느리고, 중간에는 빠르게 변이한다. */
}
#div3{
transition-timing-function: ease-in;
/* 처음에만 느리다가, 그 후에는 일정하게 변이한다. */
}
#div4{
transition-timing-function: ease-out;
/* 끝에만 느리고, 그 전까지는 일정하게 변이한다. */
}
#div5{
transition-timing-function: ease-in-out;
/* 처음과 끝이 다소 느리게 변이한다. */
}
#div6{
transition-timing-function: cubic-bezier(0.68, 0.24, 0, 1);
/* 사용자가 지정한 속도로 변이하게 된다. */
}
div:hover{
width: 400px;
}
/* 마우스를 올려 놓으면, 가로 길이가 변화하게 하였다. */
</style>
</head>
<body>
<div id="div1" style="top:100px">linear</div>
<div id="div2" style="top:150px">ease</div>
<div id="div3" style="top:200px">ease-in</div>
<div id="div4" style="top:250px">ease-out</div>
<div id="div5" style="top:300px">ease-in-out</div>
<div id="div6" style="top:350px">cublic-bezier</div>
</body>
</html>[ 5. 변이 효과 활용 - 메뉴 만들기 (***) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>변이 효과로 메뉴 만들기</title>
<style>
a{
text-decoration: none;
color: white;
}
div{
position: absolute;
left: 0px;
width: 80px;
height: 50px;
background: lightcoral;
border: 1px solid red;
transition-property: width, background;
transition-timing-function: linear;
transition-duration: 2s;
/* 여러 속성을 지정할 때에는 ,를 통해서 지정해줘야 한다.(*) */
/* 현업에서는 주로 transition-duration 값을 1s로 지정해 준다. */
line-height: 50px;
}
div:hover{
width: 200px;
background: lightpink;
color: white;
text-align: center;
font-size: 30px;
/* 마우스를 올려 놓으면 해당 메뉴 div태그가 천천히 색이 변하면서 확대되는 효과를 보여준다. */
}
</style>
</head>
<body>
<div style="top : 50px"><a href="#" target="new">HOME</a></div>
<div style="top : 100px"><a href="#" target="new">ABOUT</a></div>
<div style="top : 150px"><a href="#" target="new">NEWS</a></div>
<div style="top : 200px"><a href="#" target="new">STUDY</a></div>
<div style="top : 250px"><a href="#" target="new">CONTACT</a></div>
<!-- div태그에서 지정한 인라인 스타일시트는 뷰 포트를 기준으로 위에서 몇 px 여백을 두는지를 지정해 준다. -->
</body>
</html>[ 6. 애니메이션 효과 - @keyframes (***) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션(***)</title>
<style>
/* 1. 애니메이션 생성 */
@keyframes boxmove{
from{
left: 0px;
}
to{
left: 300px;
}
/* from과 to라는 키프레임을 설정하였다. */
}
/* 2. 태그에 적용 */
div{
position: relative;
width: 100px;
height: 100px;
background: red;
animation: boxmove 5s linear infinite alternate;
/* boxmove라는 애니메이션을 5초동안 linear 속도로 진행할 것이며, infinite를 통해 무한 반복할 것을 지정해 주었고, alternate로 키프레임을 통해 왔다갔다를 반복하게 했다. */
/* transition을 통해서는 무한반복을 할 수 없다. */
}
</style>
</head>
<body>
<div>애니메이션 박스</div>
<p><strong>참고 : </strong>낮은 버전에서는 작동되지 않을 수도 있습니다.</p>
</body>
</html>더보기
애니메이션(***)
[ 출력 결과 ]
애니메이션 박스
참고 : 낮은 버전에서는 작동되지 않을 수도 있습니다.
[ 7. 애니메이션 효과 2 (***) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션2 (***)</title>
<style>
/* 1. 애니메이션 정의 */
@keyframes boxmove{
from{
left: 0px;
}
to{
left: 300px;
}
}
/* 2. 태그 적용 */
div{
/* 애니메이션의 키프레임에서 left 속성을 사용하기 때문에 podition을 relative로 하였다. */
position: relative;
width: 200px;
height: 50px;
background: red;
color: white;
border: 2px solid lightslategray;
text-align: center;
line-height: 50px;
/* 이미 정의된 애니메이션을 적용한다. */
animation: boxmove 5s linear infinite alternate;
}
#box1{
animation-delay: 1s;
animation-timing-function: cubic-bezier(0.68, 0.24, 0, 1);
}
#box2{
animation-delay: 1.2s;
animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div id="box1">애니메이션 박스 1</div>
<div id="box2">애니메이션 박스 2</div>
</body>
</html>[ 8. 애니메이션 효과 3 - 바운스 볼 (****) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션 효과3</title>
<style>
/* 1. 애니메이션 정의 */
@keyframes bounce{
from, to{
bottom: 0px;
animation-timing-function: ease-out;
}
/* 처음과 끝의 위치를 설정하였다. */
50%{
bottom: 200px;
animation-timing-function: ease-in;
}
/* 50% 단위의 키프레임을 지정하였다. */
/* 키프레임은 from, to로 지정할 수도 있고, % 단위로 지정할 수도 있다. (***) */
}
/* 2. 태그에 애니메이션 지정 */
div{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
/* border-radius를 50%로 하면 원이 만들어 진다. */
/* border: 1px solid brown; */
box-shadow: 3px 3px 3px gray;
animation-name: bounce;
animation-iteration-count: infinite;
/* 애니메이션의 속성을 따로 지정할 수도 있다. */
/* 애니메이션은 duration 타임을 지정해야지 시작할 수 있다. */
}
#b1{
left: 10px;
background: lightcoral;
animation-duration: 5s;
/* 5초 동안 애니메이션이 실행되도록 한다. */
/* duration 값을 줘야지 애니메이션이 적용된다. */
}
#b2{
left: 50px;
background: lightskyblue;
animation-duration: 3s;
}
#b3{
left: 90px;
background: lightsalmon;
animation-duration: 1s;
}
#b4{
left: 130px;
background: lightseagreen;
animation-duration: 2s;
}
#b5{
left: 170px;
background: lightpink;
animation-duration: 1.5s;
}
</style>
</head>
<body>
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
<!-- 콘텐츠영역에 표시할 것이 없는 상태이다. -->
</body>
</html>[ 9. 뷰포트 설정 1 (***) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- 뷰 포트를 디바이스 길이와 동일하게 표시하고, 1.0배로 표시하라는 의미이다. -->
<!-- user-scalable=no은 사용자가 확대하지 못하게 막는 것이다. -->
<!-- 보통 반응형 웹을 만들 때에는 이렇게 뷰포트 설정을 세팅하고 만들게 된다. -->
<title>Document</title>
</head>
<body>
</body>
</html>[ 10. 뷰포트 설정 2 (**) ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<title>With Viewport Meta</title>
</head>
<body>
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique dolore nihil ullam itaque amet,
quae ab odit sapiente eum doloremque facilis corrupti eveniet cum saepe! Repudiandae cum ea cumque nam dolores error eligendi
excepturi nobis nesciunt sint adipisci doloremque natus labore, voluptate eius reprehenderit animi totam asperiores, earum voluptatem accusamus?</p>
</body>
</html>[ 11. 미디어 쿼리 설정 (****) ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<title>미디어 쿼리 설정</title>
<style>
/* 1. 화면을 가지는 디바이스로 접속하는 경우 */
@media screen {
body{
color: white;
background-color: red;
}
}
/* 2. 프린트 할때 */
@media print{
body{
color: white;
background-color: lightgreen;
}
}
/* 디바이스로 접속할 때와 프린트 할 때 배경색이 다르게 출력되도록 설정하였다. */
/* 프린트 할 때에는 배경 그래픽을 켜야지 배경색이 보이게 된다. */
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi placeat totam nesciunt.
Quam minima, suscipit odit optio aut sint molestias, ad aliquid quibusdam in saepe est corrupti dolor facilis repellendus
tempore deleniti ipsum! Minima, dicta earum quis officia eum sunt architecto? Fugit deserunt, est earum natus tempore molestias nisi excepturi
eum accusantium cum, unde veritatis quam odio, quo ut porro id accusamus obcaecati adipisci laborum. Illo numquam beatae molestiae debitis, corporis accusamus,
ea earum quae, quasi dolor sed consequatur quidem eaque! Dolores, alias? Necessitatibus maxime ipsum repellat. Quos perferendis optio voluptatibus natus dolore
perspiciatis eum, quisquam at nulla accusamus. Magni sint in, soluta consectetur mollitia distinctio vitae exercitationem dolor officia ratione nulla dignissimos,
voluptatum alias omnis. Odit aliquam molestiae assumenda illo commodi tempore, eius placeat nostrum nesciunt, nihil eveniet, quod ut a ducimus similique? Iusto laborum
est similique consequatur qui? Officiis ipsam nisi repellat odit earum asperiores mollitia quas ipsa.</p>
</body>[ 12. 미디어 쿼리 설정 - 외부 스타일 시트 (****) ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<title>미디어 쿼리 설정</title>
<link rel="stylesheet" href="./css/screen.css" media="screen">
<link rel="stylesheet" href="./css/print.css" media="print">
<!-- 미디어에 따라서 외부 스타일시트를 다르게 적용하였다. -->
<!-- 미디어 쿼리는 가로 길이가 중요하다. ( 세로는 별 영향을 주지 못한다. ) -->
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi placeat totam nesciunt.
Quam minima, suscipit odit optio aut sint molestias, ad aliquid quibusdam in saepe est corrupti dolor facilis repellendus
tempore deleniti ipsum! Minima, dicta earum quis officia eum sunt architecto? Fugit deserunt, est earum natus tempore molestias nisi excepturi
eum accusantium cum, unde veritatis quam odio, quo ut porro id accusamus obcaecati adipisci laborum. Illo numquam beatae molestiae debitis, corporis accusamus,
ea earum quae, quasi dolor sed consequatur quidem eaque! Dolores, alias? Necessitatibus maxime ipsum repellat. Quos perferendis optio voluptatibus natus dolore
perspiciatis eum, quisquam at nulla accusamus. Magni sint in, soluta consectetur mollitia distinctio vitae exercitationem dolor officia ratione nulla dignissimos,
voluptatum alias omnis. Odit aliquam molestiae assumenda illo commodi tempore, eius placeat nostrum nesciunt, nihil eveniet, quod ut a ducimus similique? Iusto laborum
est similique consequatur qui? Officiis ipsam nisi repellat odit earum asperiores mollitia quas ipsa.</p>
</body>[ 13. 미디어 쿼리 문법 / 기능 (****) ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<title>미디어 쿼리 기능 (***)</title>
<style>
/* 미디어 쿼리 문법 : @media <미디어 유형> and (미디어 특징1) and (미디어 특징2) and ... */
/* 단, <미디어 유형>이 생략되면, 미디어 유형은 ALL이다. */
/* (<미디어특징>)에서 소괄호 ()는 생략이 불가능하다!! */
/* 미디어 유형은 주로 screen을 사용한다. */
/* 그 외에도 print나 handheld, tv, projection 등이 있다. */
/* 1. 미디어 쿼리 */
@media (max-width : 499px){
body{
color: white;
background: red;
}
}
/* 2. 미디어 쿼리 2 */
@media (min-width : 500px) and (max-width : 799px){
body{
color: white;
background: lightslategray;
}
}
/* 3. 미디어 쿼리 3 */
@media (min-width : 800px) {
body{
color: white;
background: darkblue;
}
}
/* 장치의 최대 / 최소 너비에 따라서 배경색을 다르게 나타내고 있다. */
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi placeat totam nesciunt.
Quam minima, suscipit odit optio aut sint molestias, ad aliquid quibusdam in saepe est corrupti dolor facilis repellendus
tempore deleniti ipsum! Minima, dicta earum quis officia eum sunt architecto? Fugit deserunt, est earum natus tempore molestias nisi excepturi
eum accusantium cum, unde veritatis quam odio, quo ut porro id accusamus obcaecati adipisci laborum. Illo numquam beatae molestiae debitis, corporis accusamus,
ea earum quae, quasi dolor sed consequatur quidem eaque! Dolores, alias? Necessitatibus maxime ipsum repellat. Quos perferendis optio voluptatibus natus dolore
perspiciatis eum, quisquam at nulla accusamus. Magni sint in, soluta consectetur mollitia distinctio vitae exercitationem dolor officia ratione nulla dignissimos,
voluptatum alias omnis. Odit aliquam molestiae assumenda illo commodi tempore, eius placeat nostrum nesciunt, nihil eveniet, quod ut a ducimus similique? Iusto laborum
est similique consequatur qui? Officiis ipsam nisi repellat odit earum asperiores mollitia quas ipsa.</p>
</body>[ 14. 미디어 쿼리 기능 2 (***) ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<title>미디어 쿼리 기능2 (***)</title>
<style>
/* 미디어 쿼리 문법 : @media <미디어 유형> and (미디어 특징1) and (미디어 특징2) and ... */
/* 단, <미디어 유형>이 생략되면, 미디어 유형은 ALL이다. */
/* (<미디어특징>)에서 소괄호 ()는 생략이 불가능하다!! */
/* 미디어 유형은 주로 screen을 사용한다. */
/* 그 외에도 print나 handheld, tv, projection 등이 있다. */
/* 1. 미디어 쿼리 - 화면이 세로 방향일때의 body */
@media screen and (orientation : portrait){
/* 화면이 세로 방향일 때 */
body{
color: white;
background-color: red;
}
}
/* 2. 미디어 쿼리2 - 화면이 가로 방향일때의 body */
@media screen and (orientation : landscape){
/* 화면이 가로 방향일 때 */
body{
color: white;
background: lightslategray;
}
}
/* 미디어 특징 종류 : */
/* width , height, device-width, device-height, orientation */
/* color, color-index( = 최대 색상 수 ) 등이 있다. */
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi placeat totam nesciunt.
Quam minima, suscipit odit optio aut sint molestias, ad aliquid quibusdam in saepe est corrupti dolor facilis repellendus
tempore deleniti ipsum! Minima, dicta earum quis officia eum sunt architecto? Fugit deserunt, est earum natus tempore molestias nisi excepturi
eum accusantium cum, unde veritatis quam odio, quo ut porro id accusamus obcaecati adipisci laborum. Illo numquam beatae molestiae debitis, corporis accusamus,
ea earum quae, quasi dolor sed consequatur quidem eaque! Dolores, alias? Necessitatibus maxime ipsum repellat. Quos perferendis optio voluptatibus natus dolore
perspiciatis eum, quisquam at nulla accusamus. Magni sint in, soluta consectetur mollitia distinctio vitae exercitationem dolor officia ratione nulla dignissimos,
voluptatum alias omnis. Odit aliquam molestiae assumenda illo commodi tempore, eius placeat nostrum nesciunt, nihil eveniet, quod ut a ducimus similique? Iusto laborum
est similique consequatur qui? Officiis ipsam nisi repellat odit earum asperiores mollitia quas ipsa.</p>
</body>[ 15. 미디어 쿼리 기능 3 (***) ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<title>미디어 쿼리 기능3 (***)</title>
<style>
/* 아래의 미디어 쿼리 설정이 나올때 전까지 CSS 선언 블록은 공통으로 적용된다. */
*{
margin: 0px;
padding: 0px;
}
body{
width: 960px;
margin: 0 auto;
overflow: hidden;
/* 정해진 영역을 넘는 콘텐츠 영역은 보이지 않게 하였다. */
}
#menu{
width: 260px;
float: left;
/* 바디 영역의 왼쪽에 나타나게 된다. */
/* 이때에는 바디 태그의 왼쪽이지, 화면의 왼쪽이 아니다. */
}
#section{
width: 700px;
float: right;
}
@media screen and (max-width : 767px){
/* 스마트폰 사이즈에서는 위에서 정한 것을 해제한다. */
body{
width: auto;
/* auto는 브라우저에게 맡기는 것이기에 정한 값이 해제된다. */
}
#menu{
width: auto;
float: none;
}
#section{
width: auto;
float: none;
}
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<div id="section">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi placeat totam nesciunt.
Quam minima, suscipit odit optio aut sint molestias, ad aliquid quibusdam in saepe est corrupti dolor facilis repellendus
tempore deleniti ipsum! Minima, dicta earum quis officia eum sunt architecto? Fugit deserunt, est earum natus tempore molestias nisi excepturi
eum accusantium cum, unde veritatis quam odio, quo ut porro id accusamus obcaecati adipisci laborum. Illo numquam beatae molestiae debitis, corporis accusamus,
ea earum quae, quasi dolor sed consequatur quidem eaque! Dolores, alias? Necessitatibus maxime ipsum repellat. Quos perferendis optio voluptatibus natus dolore
perspiciatis eum, quisquam at nulla accusamus. Magni sint in, soluta consectetur mollitia distinctio vitae exercitationem dolor officia ratione nulla dignissimos,
voluptatum alias omnis. Odit aliquam molestiae assumenda illo commodi tempore, eius placeat nostrum nesciunt, nihil eveniet, quod ut a ducimus similique? Iusto laborum
est similique consequatur qui? Officiis ipsam nisi repellat odit earum asperiores mollitia quas ipsa.</p>
</div>
</body>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 64일차 - 자바 스크립트 (***) (0) | 2022.05.27 |
|---|---|
| KH 63일차 - 미디어 쿼리 / 자바 스크립트 (***) (0) | 2022.05.26 |
| KH 61일차 - CSS 기본 다지기 7 ( 그림자 / position / 레이아웃 ) (***) (0) | 2022.05.24 |
| KH 60일차 - CSS 기본 다지기 6 ( 선택자 및 박스모델 ) (*****) (0) | 2022.05.23 |
| KH 59일차 - CSS 기본 다지기 5 ( 선택자 ) (*****) (0) | 2022.05.20 |
댓글