다른 팀원 분이 거의 작업하신 프론트 화면을 수정하여 네비게이션 메뉴를 구현했다. 아직 세부 메뉴 클릭 시 화면 이동하는 것까지는 구현 안 했지만, js를 이용해 화면 겹치기를 성공했다는 게 뿌듯했다. 프론트에서 정렬과 화면 겹치기는 수업을 들어도 잘 이해가 안 됐기 때문에 마음 속으로 '할 수 있다'를 수 십번 외치면서 해나갔다.
- 겹치기는 위에 겹치는 부분을 따로 만들고 아래 위 position 속성을 조정한다.
- 부모는 relative, 자식은 absolute
- display: none과 visibility: hidden의 차이는 공간을 차이하는지의 여부로 다르다. 전자는 공간을 차지하지 않고 후자는 눈에는 안 보일 뿐 자리차지를 한다.
git으로 공동 작업하고 있었기 때문에 복잡도를 낮추려고 w3school에서 따로 코드를 써 보고 올려봤다. 부모-자식을 어떻게 설정하나 고민하다 div > div 구조를 만들어 바깥은 relative, 안쪽은 absolute를 지정했다.
overlapping – w3school
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin-bottom: 0;
}
.container {
margin-top: 0;
position: relative;
}
p {
margin-top: 0;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 0;
top: 0;
height: 100px;
display: none;
}
</style>
</head>
<body id="body" style="background-color: skyblue; margin: 0; padding: 0;">
<h1 id="head" style="background-color: red">Overlapping elements</h1>
<div class="container" style="background-color: pink">
<div class="green-box" id="green-box">Green box</div>
</div>
<p style="background-color: palegreen">If two positioned elements overlap each other without a z-index specified,
the element defined last in the HTML code will be shown on top:</p>
<script>
const head = document.getElementById('head');
const green = document.getElementById('green-box');
head.addEventListener('mouseover', function() {
green.style.display = 'block';
})
head.addEventListener('mousedown', function() {
green.style.display = 'block';
})
green.addEventListener('mouseover', function() {
green.style.display = 'block';
})
green.addEventListener('mousedown', function() {
green.style.display = 'block';
})
green.addEventListener('mouseout', function() {
green.style.display = 'none';
})
head.addEventListener('mouseout', function() {
green.style.display = 'none';
})
</script>
</body>
</html>
js는 또또 익숙하지 않았지만 마우스를 올렸을 때와 클릭했을 때의 display 속성을 따져보며 addEventListener를 지정했다. 근데 내비게이션 메뉴 아이콘과 겹쳐지는 메뉴 화면과의 거리 조절을 고려해야 했다. 아이콘과 화면 사이 공간이 있으면 아이콘에서의 mouseout으로 메뉴 화면이 자꾸 사라져서 어떡해야 할까를 고민했는데... 결국 아이콘과 메뉴 사이의 공간을 없애 바로 이동할 수 있도록 또는 아이콘에서 바로 마우스를 떼도 사라지지 않도록 html을 수정했다.
'패스트캠퍼스 백엔드 부트캠프 3기 > Project' 카테고리의 다른 글
| [프로젝트] 홈페이지 캐러셀 슬라이더 및 주간 랭킹 구현 (0) | 2025.03.31 |
|---|---|
| [프로젝트] CSS - display 속성 (0) | 2025.03.26 |
| [프로젝트] 네비게이션/검색바 로직 설계 과정 (0) | 2025.03.25 |