문제.
menu버튼을 클릭했을때 menu가 오른쪽으로 움직이게 해보세요
1. css속성의 position이 부모요소와 자식요소 혹은 자손요소에 있을 경우 어떻게 출력되는지 안다.
(참고 : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position2)
2. overflow 속성이 무엇인지 알고 어느 위치에 써야할지 안다.
(콘텐츠가 요소의 상자를 벗어났으므로 요소의 상자에 overflow 속성을 써야한다.)
3. javascript를 이용해 css속성을 추가할 수 있다.
(javascript로 CSS속성을 추가하면 inline으로 요소에 속성을 넣는것)
답
<head>
<title>Step07_example2</title>
<!-- 문제. menu를 클릭했을때 노란색 네모가 오른쪽으로 움직이게 해보세요(overflow연습) -->
<style>
.wrapper{
width: 500px;
height: 500px;
border: 1px solid red;
margin: 0 auto;
/* 1. 부모 div의 position을 relative로 지정 */
position: relative;
/* 5. 부모요소 범위에서 벗어난 div 요소 숨기기 */
overflow: hidden;
}
.menu{
width: 200px;
height: 500px;
border: 1px solid blue;
background-color: yellow;
/* 2. 자식 div의 position을 absolute로 지정 */
position: absolute;
/* 3. div.wrapper의 position:relative속성이 고정점 역할을 해주기때문에
top,left는 부모 div를 기준으로 인식된다. */
/* 4. top: 100px; */
left: -200px;
transition: left 1s ease-out;
}
</style>
</head>
<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>
</div>
<script>
var left=-200;
document.querySelector("#meunBtn").addEventListener("click", function(){
left=0;
document.querySelector(".menu").style.left=left+"px";
});
</script>
</body>'CSS' 카테고리의 다른 글
| 메뉴만들기연습3 (0) | 2019.11.20 |
|---|---|
| 메뉴만들기 연습2 (0) | 2019.11.20 |
| CSS+Javascript 1 (0) | 2019.11.19 |
| 이미 만들어져 있는 css요소를 div에 적용해보기 (0) | 2019.11.19 |
| p 요소 변경하기 (0) | 2019.11.19 |
