네이버 오디오 실습
실습 코드 깃허브 링크
<ul class="audio_flex_end">
<li><a href="#" class="active"><span>홈</span></a></li>
<li><a href="#"><span>랭킹</span></a></li>
<li><a href="#"><span>연재 채널</span></a></li>
<li><a href="#"><span>오디오북</span></a></li>
<li><a href="#"><span>카테고리</span></a></li>
<li><a href="#"><span>이벤트</span></a></li>
</ul>
.audio_nav_left li a span {
position: relative;
display: inline-block; > span태그에 inline-block속성 부여함
height: 21px;
}
<li><a href="#" class="active"><span>홈</span></a></li>
.audio_nav_left li a.active { font-weight: 700; }
.audio_nav_left li a.active span:after {
display: block;
position: absolute;
left: -4.5px;
right: -5.5px;
bottom: -20px;
content: '';
border-bottom: 3px solid #222;
border-radius: 1.5px;
z-index: 1;
}
<div class="search_wrap audio_flex_start">
<i class="icon_search"></i>
<input type="text">
</div>
.audio_nav_right .search_wrap i {
width: 40px;
height: 100%;
background-color: skyblue;
}
.audio_nav_right .search_wrap input {
width: calc(100% - 40px);
height: 100%;
padding: 8px 15px;
font-size: 15px;
border: none;
}
검색창 부분을 구현하는 코드가 잘 생각나지 않았는데, 복습하면서 연습할 수 있었던 시간이었다. 전체를 감싸고 있는 div에넌 flex-start 속성을 부여하고 버튼의 너비값을 설정해준뒤, 검색어를 입력하는 input태그의 width값은 calc로 계산해주고 padding값과 font-size를 설정하는 등의 세부작업을 해준다!