728x90
css
overflow:hidden ;
넘친 컨텐츠는 잘려지고 보여지지 않게 한다.
before, after?
가상의 컨텐츠이다.
[공유]::before와::after, 그들의 정체는?
[공유]::before와::after, 그들의 정체는? 안녕하세요! UI개발2팀 조가영입니다. 무려 10주에 걸쳐 진행한 OJT. 면수습 후 OJT의 꽃인 블로깅을 작성하려니 감회가 더욱 새롭네요! 과제를 하던 중 발견한
blog.hivelab.co.kr
<HTML>
<div id="header">
<h1>
<a href="#">logo</a>
</h1>
<ul id="gnb" class="">
<li>
<a href="#">menu1</a>
<div class="snb">
<ul>
<li>menu1-1</li>
<li>menu1-2</li>
<li>menu1-3</li>
<li>menu1-4</li>
</ul>
</div>
</li>
<li>
<a href="#">menu2</a>
<div class="snb">
<ul>
<li>menu2-1</li>
<li>menu2-2</li>
<li>menu2-3</li>
<li>menu2-4</li>
</ul>
</div>
</li>
<li>
<a href="#">menu3</a>
<div class="snb">
<ul>
<li>menu3-1</li>
<li>menu3-2</li>
<li>menu3-3</li>
<li>menu3-4</li>
</ul>
</div>
</li>
<li>
<a href="#">menu4</a>
<div class="snb">
<ul>
<li>menu4-1</li>
<li>menu4-2</li>
<li>menu4-3</li>
<li>menu4-4</li>
</ul>
</div>
</li>
</ul>
<ul id="utli">
<li><a href="#">login</a></li>
<li><a href="#">join</a></li>
</ul>
</div><css>
*{
margin:0;
padding:0;
}
ul,li{list-style: none;}
a{text-decoration:none;}
#wrap{ width:100%; }
#header {
position:fixed;
width:100%;
left:0px;
top:0px;
padding:0 30px;
box-sizing: border-box;
border-bottom:1px solid #e1e1e1;
display:flex;
justify-content: space-between;
}
#header > h1 {
padding:20px 0;
}
#header > #gnb {
width:1200px;
display:flex;
justify-content: space-evenly;
padding-top:30px;
}
#gnb > li, #snb > ul > li{
width: 66px;
text-align: center;
}
#header > #gnb::before {
content:">";
width:100%;
position:absolute;
top:84px;
left:180px;
height:180px;
background:#fff;
border-bottom:1px solid #e1e1e1;
box-shadow:0px 10px 10px 0px rgb(48 49 51 / 6%);
display:none;
}
#header > #gnb.on > li > .snb{
display:block;
}
#header > #gnb.on::before {
display:block;
}
#header > #gnb > li > .snb{
position:absolute;
top:95px;
display:none;
}
#header > #gnb > li > .snb > ul > li + li{
margin-top:20px;
}
#utli{
display: flex;
width: 100px;
}
#utli > li{
width: 50px;
justify-content: space-around;
padding-top: 30px;
}<javascript>
<script type="text/javascript">
let gnb = document.querySelectorAll("#gnb > li")
let gnbElement = document.querySelector("#gnb")
for (let i = 0; i<gnb.length; i++){
gnb[i].addEventListener('mouseover', ()=>{
gnbElement.classList.add("on") // 현재가지고잇는 클래스에서 하나더 추가할때
// gnbElement.setAttribute('class', 'on') //똑같음
})
}
let header = document.querySelector("#header")
header.addEventListener('mouseout', (e)=>{
console.log(e.target.id)
if (e.target.id=='gnb'){
gnbElement.classList.remove("on")
}
})
</script>728x90
'백엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 이미지 슬라이드 만들기( setInterval, setTimeout, querySelectorAll, onClick, clearInterval) (0) | 2022.01.12 |
|---|---|
| [javascript] TO DO LIST 를 만들어보자2 (내용 변경하기 : update, keypress) (0) | 2022.01.12 |
| [javascript] TO DO LIST 를 만들어보자(createElement, remove()) (0) | 2022.01.11 |
| [Javascript] 버튼에 이벤트 발생시키기, 동기식 Callback, script 외부연결, onload (0) | 2022.01.10 |
| [Javascript] this, new, class, 콜스택 (0) | 2022.01.07 |