문제
- img 사진을 넣어 contents의 높이가 자동으로 img 사이즈로 출력되게 해보세요.
- backdrop 만들기
(1)page로딩 시점에는 back-drop이 안 보임
(2)menu를 클릭하면 back-drop이 보임
(3)menu의 list를 클릭하거나 back-drop을 클릭하면 dackdrop이 안보임
1. display 속성을 알고 사용할 줄 안다.
2. z-index속성을 알고 사용할 줄 안다.
3. 엘리먼트에 javascript로 css 속성을 넣어줄 줄 안다.
답
css
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step07_example2-1</title>
<!-- 문제. menu를 클릭했을때 노란색 네모가 오른쪽으로 움직이게 해보세요(overflow연습) -->
<style>
.wrapper{
width: 768px;
border: 1px solid red;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.menu{
width: 200px;
height: 500px;
border: 1px solid blue;
background-color: yellow;
position: absolute;
left: -200px;
transition: left 1s ease-out;
/*
body에서 뒤에 작성되었을 수록 css layer에서는 위에쌓임
즉, div.back-drop이 body에서 menu보다 뒤에 작성되었기때문에
div.menu보다 위에 위치함.
div.menu를 가장 위로 빼주기 위해서는 z-index를 사용해주어야함
(단, position 속성을 써서 배치했을때만 사용가능함)*/
z-index: 100;
}
.back-drop{
/* width와 height는 부모요소인 div.wrapper에 따라 지정되므로 따로 값을 안 줌 */
position: absolute;
/* body쌓여 있는 요소들 순서대로 출력되므로
top, left, right, bottom위치를 지정해주지 않으면
img 아래에 div.back-drop이 배치됨.
(부모요소를 기준으로 너비지정) */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: #000000;
opacity: 0.5; /*투명도*/
/* page로딩시점에는 div.back-drop 안보이게 하기 */
display: none;
}
</style>
</head>html
<body>
<div class="wrapper">
<div class="menu">
<h3>메뉴입니다</h3>
<ul>
<li><a href="">짜장면</a></li>
<li><a href="">짬뽕</a></li>
<li><a href="">볶음밥</a></li>
</ul>
</div>
<button id="meunBtn">menu</button>
<h1>메인 컨테츠 입니다.</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatem suscipit cumque repellendus deleniti dicta quaerat laborum sequi. Quod quam vel eum! Consequuntur repellat fuga illum corrupti laborum enim odio.</p>
<img src="../images/01_iron_man_2.jpg" alt=""/>
<!-- div.wrapper의 형제요소 위치에 작성하면
div.back-drop의 position:absolute 속성에 의해 body를 기준으로 배치됨 -->
<div class="back-drop"></div>
</div>
</body>javascript
<body>
<script>
var left=-200;
document.querySelector("#meunBtn").addEventListener("click", function(){
left=0;
document.querySelector(".menu").style.left=left+"px";
//버튼 클릭시 div.back-drop 보이게 하기
//페이지 로딩시에 display:none이었던 속성을 버튼 클릭했을때 display:block으로 바꿔줌
document.querySelector(".back-drop").style.display="block";
});
//dack-drop을 클릭했을때 menu가 들어가고, div.back-drop 안 보이게 하기
document.querySelector(".back-drop").addEventListener("click",function(){
//위의 javascript 코드에서 전역 변수에 있는 left 값을 클릭시 0으로 변경되게 해 놓았기 때문에
//기억되는 값은 0이다. 따라서 버튼 클릭시 다시 -200이 되도록 설정해주어야함.
left=-200;
document.querySelector(".menu").style.left=left+"px";
document.querySelector(".back-drop").style.display="none";
});
</script>
</body>
'CSS' 카테고리의 다른 글
| Grid system 그리드 시스템 사용법 (0) | 2019.11.21 |
|---|---|
| 메뉴만들기연습3 (0) | 2019.11.20 |
| 메뉴만들기 연습1 (0) | 2019.11.19 |
| CSS+Javascript 1 (0) | 2019.11.19 |
| 이미 만들어져 있는 css요소를 div에 적용해보기 (0) | 2019.11.19 |
