오늘 내가 배운 것
1. MENU(gnb) 만들기
2. 슬라이드 영역 만들기
1. MENU(gnb) 만들기
GNB : Global Navigation Bar의 약자로, 웹사이트 전체에 동일하게 적용되는 내비게이션 바
코드 구현 순서 (자바스크립트 순서)
1. 각 id와 class에 접근할 수 있게 변수로 할당한다.
2. gnb 밑에 4개의 li가 있는데, 그 li에 각각 접근하려면 gnbs[0] , gnbs[1] .... 로 접근하는데, 이를 이용해서 이벤트를 등록한다면,
gnbs[0].addEventListener / gnbs[1].addEventListener ... 처럼 이벤트를 등록한다.
위에 예시 같은 경우 li에서 마우스가 오버됐을 때 function이 실행되고, 실행되는 코드의 내용은 gnbElement에(ul id="gnb")에 class로 on 이 추가된다는 뜻이다.
3. 마우스를 뺐을 때 이벤트가 있는데, 이벤트를 뺄 때는 gnbElement에서 on을 지우는 것이다.
이때는 removeEventListener를 사용해서 mouseout시에 실행하는 function을 만들어준다.
코드 확인하기
더보기
HTML
<div id="header">
<h1>
<a href="#">logo</a>
</h1>
<ul id="gnb">
<li>
<a href="#">menu1</a>
<ul class="snb">
<li><a href="#">menu1-1</a></li>
<li><a href="#">menu1-2</a></li>
<li><a href="#">menu1-3</a></li>
<li><a href="#">menu1-4</a></li>
</ul>
</li>
<li>
<a href="#">menu2</a>
<ul class="snb">
<li><a href="#">menu2-1</a></li>
<li><a href="#">menu2-2</a></li>
<li><a href="#">menu2-3</a></li>
<li><a href="#">menu2-4</a></li>
</ul>
</li>
<li>
<a href="#">menu3</a>
<ul class="snb">
<li><a href="#">menu3-1</a></li>
<li><a href="#">menu3-2</a></li>
<li><a href="#">menu3-3</a></li>
<li><a href="#">menu3-4</a></li>
</ul>
</li>
<li>
<a href="#">menu4</a>
<ul class="snb">
<li><a href="#">menu4-1</a></li>
<li><a href="#">menu4-2</a></li>
<li><a href="#">menu4-3</a></li>
<li><a href="#">menu4-4</a></li>
</ul>
</li>
</ul>
</div>CSS
*{
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a {
text-decoration: none;
}
#wrap{
width: 100%;
}
#header {
display: flex;
width: 100%;
justify-content: space-evenly;
text-align: center;
/* 높이가 가변적이여서 밑에 있는 영역이 변화가 생긴다...그래서 최소 높이를 정하고 앱솔루트로 앞으로 띄어둔다.. 그리고 밑에 오는 항목(visual)의 탑을 원하는 영역만큼 띄어둔다. ) */
position: absolute;
min-height: 100px;
}
#header > h1 {
width: 10%;
}
#header > #gnb {
display: flex;
width: 80%;
padding: 20px 0 ;
justify-content: space-evenly;
}
#header > #gnb::after{
content:"";
width: 100%;
height: 150px;
top : 60px;
position: absolute;
background: #FFF;
border-bottom: 1px solid #e1e1e1 ;
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.05);
display: none;
}
#header > #gnb > li > .snb{
position: relative;
padding: 20px 0 0 0;
display: none;
z-index: 3;
}
#header >#gnb.on > li > .snb{
display: block;
}
#header > #gnb.on::after{
display: block;
}
#header > #gnb > li > .snb > li + li{
padding: 20px 0 0 0 ;
}JavaScript
const gnbElemnet = document.querySelector("#gnb")
const gnbs = document.querySelectorAll("#gnb > li")
const header = document.querySelector('#header')
for(let i = 0; i < gnbs.length ; i++){
gnbs[i].addEventListener('mouseover', function(){
gnbElemnet.classList.add('on')
} )
}
header.addEventListener('mouseout', function(e){
console.log(e.target)
if (e.target.id === "gnb"){
gnbElemnet.classList.remove("on")
}
})
2. 슬라이드 영역 만들기
이미 만들어 본 부분이긴 하지만 다른 방법도 워낙 많아서 이번에는 거의 CSS로만 구현한 방법을 써봤다.
자바스크립트 전까지만 만든 것이고 자바스크립트 부분은 전에 만든 내용이랑 유사해서 생략했다.
마지막에 시간마다 interval, 이벤트 추가/제거에 대한 자바스크립트만 만들면 된다.
JavaScript를 아직 적용하지 않았기 때문에 interval이나 버튼 영역이 없으니 console 창에 class 기입으로 확인했다.
코드 확인 하기
더보기
HTML
<body>
<div id="visual">
<ul id="slide">
<!--예시는 블럭색으로 표현 -->
<li style="background : red;">1</li>
<li style="background : green;">2</li>
<li style="background : yellow;">3</li>
</ul>
</div>
</body>
CSS
#visual {
position : relative;
/*슬라이드 이미지를 옆으로 나열할 때 보이는 구역을 기준으로 잡기위해서..*/
width : 1900px;
height : 500px;
margin : 0 auto;
}
#visual > #slide {
position: absolute;
/*position : relative 한 위치를 기준.*/
display: flex;
/*flex가 되면서 밑으로 3개 되어있던 사진이 옆으로 나란히 선다.*/
transition: all 0.5s;
/* 이동할 때 모션 */
}
/*예시의 블럭크기 지정 1920짜리 사진이라고 가정..*/
#visual > #slide > li {
width: 1920px;
height: 500px;
}
/* #slide에 클래스 on이 올 때마다 바뀌는 위치*/
#visual > #slide.on1 {
left:0px;
}
#visual > #slide.on2 {
left:-1920px;
}
#visual > #slide.on3 {
left:-3840px;
}
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221115 실전예제 - Counter 만들기, CRUD-댓글창 만들기 (0) | 2022.11.16 |
|---|---|
| 221114 실전예제 - 로또 번호 생성기 (0) | 2022.11.15 |
| 221111 실전예제 - 웹페이지 메인 이미지(Visual) 영역 만들기 (0) | 2022.11.13 |
| 221110 JavaScript - setTimeout과 setInterval, 동기와 비동기, 싱글스레드,이벤트 루프(event loop) (0) | 2022.11.11 |
| 221109 JavaScript - form을 이용한 이벤트활용 (1) | 2022.11.10 |
댓글