로고 박스의 사이즈 브라우저 뷰포트 가로 사이즈의 5%로 해서 뷰포트가 줄어들면 줄어드는 비율대로 박스도 줄어들게 만들어.
chatGTP
<style>
#logo {
border: 1px solid rgb(219, 212, 212);
width: 5vw; /* 뷰포트 가로 너비의 5%로 설정 */
height: 5vw; /* 뷰포트 가로 너비의 5%로 설정 */
}
</style>내가 그린 '삭제 버튼'을 삽입해. 그리고 그 버튼을 클릭하면 로고가 사라지도록 코드를 작성해 봐.
chatGTP
<style>
#logo {
border: 1px solid rgb(219, 212, 212);
width: 5vw; /* 뷰포트 가로 너비의 5%로 설정 */
height: 5vw; /* 뷰포트 가로 너비의 5%로 설정 */
}
.remove-logo-btn {
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="logo">로고 이미지</div>
<img class="remove-logo-btn" src="delete.png" alt="삭제 버튼" />
<script>
// 로고 제거 버튼 이미지 클릭 이벤트 처리
var removeBtn = document.querySelector('.remove-logo-btn');
var logo = document.getElementById('logo');
removeBtn.addEventListener('click', function () {
logo.style.display = 'none'; // 로고 박스를 숨기는 스타일 적용
});
</script>
</body>
로고가 삭제되면 '삭제 버튼'도 사라지게 해 봐.
chatGTP
removeBtn.addEventListener('click', function () {
logo.style.display = 'none'; // 로고 박스를 숨기는 스타일 적용
removeBtn.style.display = 'none'; // 삭제 버튼을 숨기는 스타일 적용
});
</script>어떤 객체 위에 커서가 다가가면 다른 명령 버튼이 등장하게 만들려면? (javascriipt)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hover Effect</title>
<style>
#hover-object {
border: 1px solid rgb(219, 212, 212);
width: 200px;
height: 200px;
background-color: #f0f0f0;
position: relative; /* 부모 요소에 position: relative;를 설정하여 자식 요소를 상대적으로 배치 */
}
.command-btn {
display: none; /* 버튼 숨기기 */
position: absolute; /* 부모 요소를 기준으로 자식 요소를 배치 */
top: 50%; /* 부모 요소의 세로 중앙 위치 */
left: 50%; /* 부모 요소의 가로 중앙 위치 */
transform: translate(-50%, -50%); /* 버튼의 중앙 정렬 */
background-color: #4caf50;
color: white;
padding: 8px 16px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="hover-object">
<button class="command-btn">명령 버튼</button>
</div>
<script>
var hoverObject = document.getElementById('hover-object');
var commandBtn = document.querySelector('.command-btn');
hoverObject.addEventListener('mouseover', function () {
commandBtn.style.display = 'block'; // 버튼 보이기
});
hoverObject.addEventListener('mouseout', function () {
commandBtn.style.display = 'none'; // 버튼 숨기기
});
</script>
</body>
</html>설명
hover-object라는 이름을 가진 요소를 찾아서 hoverObject라는 이름으로 저장해. 이건 마우스 커서가 올라가는 대상을 의미해. 마우스 커서가 이 요소 위에 올라가면 뭔가 특별한 일이 일어나게 할 거야.
그 다음으로 .command-btn라는 이름을 가진 버튼을 찾아서 commandBtn라는 이름으로 저장해. 이건 우리가 보이고 숨길 버튼을 의미해.
그리고 addEventListener라는 메서드를 사용해요. 이 메서드는 이벤트를 듣고 있게 해주는 거야. 여기서는 mouseover라는 이벤트를 듣고 있어. mouseover는 마우스 커서가 요소 위로 올라갔을 때 발생해. 그래서 마우스가 hover-object 요소 위에 올라가면 버튼이 보이게 할 거야.
함수 안에 commandBtn.style.display = 'block'; 이라는 줄이 있는데, 이게 버튼을 보이게 하는 역할을 해. style은 스타일을 변경할 때 사용하는 거야. display는 요소의 표시 방법을 나타내는데, 'block'을 지정하면 보이게 되지.
그리고 다음으로 mouseout라는 이벤트를 듣고 있어. mouseout은 마우스 커서가 요소를 벗어날 때 발생해. 그래서 마우스가 hover-object 요소를 벗어나면 버튼을 숨기게 할 거야.
함수 안에 commandBtn.style.display = 'none'; 이라는 줄이 있는데, 이게 버튼을 숨기는 역할을 해. style은 여기서도 스타일을 변경할 때 사용하는 거야. display를 'none'으로 지정하면 버튼이 보이지 않아.
그래서 결국 이 코드는 마우스가 hover-object 요소 위로 올라가면 버튼이 보이고, 마우스가 요소를 벗어나면 버튼이 숨겨지는 기능을 가지게 되는거야. 이렇게 하면 웹사이트에서 마우스를 사용해서 더 다양한 동작을 만들 수 있어!
'말하는나무 PR. Mahannamu > 맞춤제작 견적서 Customization Quote Request' 카테고리의 다른 글
| 이 코드만으로 14개의 섹션(구역)이 생성된 거지? (0) | 2023.07.23 |
|---|---|
| 오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. (0) | 2023.07.23 |
| 헤더 부분 - 우상단 명령 버튼들 추가 (0) | 2023.07.23 |
| 헤더 부분 - 기본 (0) | 2023.07.23 |
| 빌드 테스트 1 (0) | 2023.07.22 |
| logo 부분 (2) (0) | 2023.07.22 |
| 이미지(로고) 삽입 (0) | 2023.07.20 |
| 견적서 양식 웹페이지를 만들려고 한다. 어떻게 해야 할까? (0) | 2023.07.16 |
