초보입니다 gnb바 좀 도와주세요ㅠ
본문
안녕하세요
제가 지금 만들고 있는 gnb바인데요
(배경 무시하고) 저기 작은 검은색 박스를 연한 검은색 박스 위에 올리고 싶습니다.
연한 박스를 복사해서 만든지라 진한 박스에도 마진이 들어간 것 같아서 그것도 빼고 싶고요.
그리고 텍스트에 들어간 링크 효과도 빼고 싶어요. text-decoration none을 써야 하는 것 같은데
어디에 넣어야 먹는 건지 잘 모르겠네요ㅜ
이것을 반응형으로 만들려고 하는데 나중에 많이 수정해야겠죠?
불필요한 태그가 있을 경우 지적과 수정 부탁드립니다.
html
<nav id="gnb">
<div class="wrap">
<div class="logo-plus">
<div class="menubar"></div>
<div class="menu_logo">
<a href="#section01">
<img src="img/logo_in_menu.png" alt="로고">
</a>
</div>
</div>
<ul class="icon">
<i class="facebook"><a href="https://www.naver.com/"><img src="img/facebook-black.png"></a></i>
<i class="insta"><a href="https://www.naver.com/"><img src="img/instagram-black.png"></a></i>
<i class="kakaos"><a href="http://www.kakao.com/talk"><img src="img/kakaostory-black.png"></a></i>
<i class="kakaot"><a href="http://www.kakao.com/talk"><img src="img/kakaotalk-black.png"></a></i>
</ul>
<br><br><br>
<ul class="bar">
<li class="About">
<a href="#section01"><div class="colbox01"></div><div class="colbox02"></div></a><br>
<a class="a_text" href="#section01">About us</a>
</li>
<li class="Portfolio">
<a href="#section02"><div class="colbox01"></div><div class="colbox02"></div></a><br>
<a class="a_text" href="#section02">Portfolio</a>
</li>
<li class="Business">
<a href="#section03"><div class="colbox01"></div><div class="colbox02"></div></a><br>
<a class="a_text" href="#section03">Business</a>
</li>
<li class="Contract">
<a href="#section04"><div class="colbox01"></div><div class="colbox02"></div></a><br>
<a class="a_text" href="#section04">Contract us</a>
</li>
</ul>
</di
css
#gnb{
background-color : rgba(255, 255, 255, 0.5);
width: 100%;
height: 150px;
position: fixed;
z-index: 100;}
.wrap{width:62.5%;
height:150px;
padding-top: 1.2em;}
.menubar{
width: 160px;
height: 7px;
background-color: #231815;
margin-bottom: 1em;}
.logo-plus{float:left;}
.icon{width: 140px;
height: 25px;
float: right;}
.kakaos, .facebook, .insta{margin-right: 1em;}
.bar{display: inline-block;
float: right;
}
.colbox01{
width: 127px;
height: 5.5px;
background-color: #231815;
opacity: 0.2;
}
.colbox02{
width: 53px;
height: 5.5px;
background-color: #231815;
}
ul li {text-decoration: none;
float: left;
display: inline-block;
font-size: 14pt;
position:relative;
}
.a_text{text-decoration: none;}
.About, .Portfolio, .Business{
margin-right: 5.5em;}
답변 3
<div class="colbox01"></div><div class="colbox02"></div>을
<div class="colbox02"></div><div class="colbox01"></div>순서를 바꾸면 안되나요?
text-decoration none는
.a_text{text-decoration: none;}에 안되면
.a {text-decoration: none;} 이렇게 추가해보세요
질문에 겹치게하고싶단 말은없었네요...
.colbox02{
width: 53px;
height: 5.5px;
background-color: #231815;
}
여기에
margin-top; 을사용해서 위치 조정해보세요
margin-top:-5px;
이렇게해보세요