“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
마무리 문제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>연습문제 1</title>
<style>
#main {
width: 600px;
margin: 20px auto;
}
h1 {
font-size:1.5rem;
text-align:center;
margin-bottom:20px;
}
img{
width: 100%;
}
</style>
</head>
<body>
<div id="main">
<h1>마우스 오버하면 이미지 바꾸기</h1>
<img src="img/ara_01.jpg" alt="ara01">
</div>
<script>
const imgMain = document.querySelector("#main > img");
imgMain.addEventListener("mouseover", () => {
imgMain.src = "img/ara_02.jpg";
});
imgMain.addEventListener("mouseout", () => {
imgMain.src = "img/ara_01.jpg";
});
</script>
</body>
</html>우선 메인크기를 600으로 만듭니다. 또한 마진을 20px auto를 주어 위아래 20px에 양 옆은 자동으로 맞춰 줍니다.
h1은 폰트사이즈 1.5rem을 사용하여 생소한 단어지만 한번이라도 사용하여 익히려고 했습니다. 그리고 중앙에 정렬 하도록 text-align을 center을 줍니다. 그리고 아래로 여백을 줄수 있도록 margin-bottom을 20px를 줍니다. 이미지를 메인 안에서 width이 100%이도록 합니다.
스크립트를 보면 imgMain이라는 상수에 #main > img을 저장하여 사용합니다.
이미지에 마우스를 올리면 이벤트가 움직이도록 imgMain에 대해 addEventListener("mouseover")을 사용하고 imgMain에 src을 img/ara_02.jpg로 변경합니다. 이러면 마우스를 올렸을 때 이미지가 변경됩니다.
이후 이미지에 마우스를 떼면 이벤트가 다시 움직이도록 imgMain에 대해 addEventListener("mouseout")을 사용하고 imgMain에 src을 img/ara_01.jpg로 다시 돌아옵니다. 이러면 마우스를 떼었을 때 이미지가 다시 돌아오도록 이벤트를 줍니다.
마무리 문제2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin:0;
min-height:100vh;
}
button {
position:fixed;
top:20px;
right:20px;
background-color:#639;
padding:15px;
border:none;
outline: none;
color:white;
transition: transform 0.3s ease-in-out;
}
button.active {
transform:translateX(-110px);
}
nav {
position:fixed;
top:0;
right:0;
background-color:#639;
height:100vh;
padding:2em;
transform:translateX(100%);
transition: transform 0.3s ease-in-out;
}
nav.active {
transform:translateX(0);
}
nav ul {
padding:0;
margin:0;
list-style: none;
}
nav ul li {
padding:1em 0;
}
nav a {
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">☰</button>
<nav id="nav">
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">react</a></li>
<li><a href="#">css</a></li>
</ul>
</nav>
<script>
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
btn.addEventListener('click', () => {
nav.classList.toggle('active');
btn.classList.toggle('active');
});
</script>
</body>
</html>전체 선택자를 사용하여 모두 box-sizing 속성을 border-box로 설정해줍니다.
body에는 display: flex; 속성을 사용하여 내부 요소들을 가운데 정렬합니다. 그리고 min-height:100vh; 속성을 사용하여 최소한의 높이를 설정해줍니다.
button의 위치를 고정 위치로 설정되어 있으며, 오른쪽 상단에 위치합니다. padding 속성을 사용하여 안에서의 간격을 맞춥니다. 또한, 버튼이 활성화되었을 때의 스타일을 정의하는 .active 클래스도 정의되어 있습니다.
nav 요소는 역시 고정 위치로 설정되어 있으며, 오른쪽에서 슬라이드되어 나타나도록 transform 속성이 설정되어 있습니다. 네비게이션 메뉴가 활성화되었을 때의 스타일을 정의하는 .active 클래스도 정의되어 있습니다.
마지막으로, 스크립트에서는 버튼 클릭 시 네비게이션 메뉴와 버튼에 .active 클래스를 추가하여 스타일을 변경하도록 이벤트 리스너를 추가해줍니다. 이때 토글이라는 것을 사용하는데 classList.toggle() 메서드를 사용하여 .active 클래스를 추가하거나 삭제합니다.
classList.toggle()이란?
DOM 요소의 클래스 이름을 토글링(toggling) 하는 메서드입니다.
이 메서드를 호출하면 해당 요소의 클래스 목록에 클래스 이름이 존재하면 제거하고, 없으면 추가합니다. 즉, 클래스 이름이 있는 경우 제거하고, 없는 경우 추가하는 토글 기능을 제공합니다.
classList.toggle() 메서드는 두 개의 매개변수를 받을 수 있습니다. 첫 번째 매개변수는 추가하거나 제거할 클래스 이름이며, 두 번째 매개변수는 부울 값입니다. 두 번째 매개변수를 생략하면 클래스 이름을 토글링 합니다. 두 번째 매개변수에 true를 전달하면 클래스 이름을 추가하고, false를 전달하면 클래스 이름을 제거합니다.