float를 이용한 탭 메뉴 버튼 만들기 - Part 1
HTML/CSS를 이용해서 Tab Menu 버튼을 만들어 봅시다. 바로 이런 거요.
쇼핑몰 상품설명 상세페이지에서 흔히 볼수 있는 형태입니다.
저의 입장에서라면 사실 flex를 이용하는 게, 익숙치 않은 float를 사용하는 것보다 훨씬 더 직관적이고 쉬울듯 하지 않을까라는 생각이 들기도 하지만, 다른 사람이 만들어 놓은 결과물을 수정해야 하는 경우도 있으니, 이 참에 먼저 float를 이용하여 만든 탭 메뉴에 익숙해질 수 있도록 포스팅을 통해 정리를 합니다.
html 뼈대 구성
뼈대가 되는 html은 다음과 같이 ul, li를 이용해서 메뉴 형식으로 구성했습니다. 하단 각각의 div는 각 탭을 눌렀을 경우에 보여주거나 숨길 설명 내용입니다.
물론 부트스트랩을 사용했습니다. bootstrap을 사용하기 위한 코드를 html 상단 하단에 넣어주세요.(모르면 이전에 다른 포스팅에서 많이 다뤘으니 참고해주세요!)
<body>
<div class="container mt-5">
<ul class="list">
<li class="tab-button selected">Tab Menu01</li>
<li class="tab-button">Tab Menu02</li>
<li class="tab-button">Tab Menu03</li>
</ul>
<div class="tab-content show">
<p>Menu01 설명내용</p>
</div>
<div class="tab-content">
<p>Menu02 설명내용</p>
</div>
<div class="tab-content">
<p>Menu03 설명내용</p>
</div>
</div>
</body>
CSS - float: left;로 구성
이번 포스팅에서 가장 중요한 내용은 CSS입니다. 아주 기가 막히는 실무 꿀팁이 들어 있습니다.
<style>
ul.list {
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 1px solid gray;
}
ul.list::after { //바로 이 부분이 실무 꿀팁입니다! 이런 방법이!!
content: '';
display: block;
clear: both;
}
.tab-button {
display: block;
padding: 10px 30px 10px 30px;
float: left;
margin-right: -1px;
margin-bottom: -1px; //이 부분도 약간의 팁. 하단 라인과 관련있습니다.
color: grey;
text-decoration: none;
cursor: pointer;
}
.selected {
border-top: 2px solid dodgerblue;
border-right: 1px solid #ccc;
border-bottom: 1px solid white;
border-left: 1px solid #ccc;
color: black;
margin-top: -2px;
}
.tab-content {
display: none;
padding: 10px;
}
.show {
display: block;
}
</style>
남이 짜 놓은 CSS를 공부하는 가장 좋은 방법은 주석처리를 이용해서 동작결과를 샅샅히 살펴보는 것입니다. 그리고 각 엘리먼트가 차지하는 영역을 확실하게 보면서 이해를 돕기 위해서는, background-color 속성을 이용해서 배경색상을 정해주고 살펴보면 더욱 도움이 됩니다.(직접 해보세요!!)
.tab-button은 float: left; 를 이용해서 붕~ 띄워서 정리한 형태입니다.
(사실 저는 컨트롤이 어려워서 float 보다는 flex를 선호하는 편입니다만...)
<li> 태그들에 버튼처럼 스타일을 준 후 float로 띄워서 가로로 배치를 한 것입니다.
float에 대한 개념이 아직 제대로 정립되지 않았다면, 아래 영상을 꼭 참고해주세요. 아주 쉽게 이해됩니다.
https://youtu.be/xara4Z1b18I
float 이후에는 잊지말고 clear: both;
만약에 clear: both;를 주지 않으면 이번 예제는 float: left;에 계속 영향을 받기 때문에 아래와 같은 모습이 될 것입니다.
따라서, 탭 메뉴 부분에 대한 배치를 끝내고 나면, div 영역이 영향을 받지 않도록 clear를 해줘야 하는 것이 중요합니다.
정확하게는 float: left; 이후에는 clear: left;를 써주고, float: right; 이후에는 clear: right;를 사용하라고 만든 것이긴 하지만, 실무에서는 앞에 뭐가 있든 상관없이 혹은 고민없이 clear: both;를 주로 사용합니다. 편하니까요.
이번 레이아웃 예제의 꿀팁은 가상 엘리먼트 선택자를 사용한 바로 이 부분입니다.
ul.list::after {
content: "";
display: block;
clear: both;
}
<ul> 태그의 자식들인 <li>들을 float: left;를 이용해서 띄웠기 때문에, 이후의 엘리먼트들이 float에 대해 영향을 받지 않게 하려면, 각 엘리먼트들 마다 clear를 적용해주어야 합니다.
그런데 말입니다... ul.list::after를 이용해서 가상의 엘리먼트를 설정한 후 display: block으로 영역을 차지하는 block 속성으로 만들고 이 녀석에게 clear: both;를 준 것입니다.
즉, 가상의 ul.list::after 이 녀석은 clear: both;를 위해서 존재하는 엘리먼트가 된 것입니다. 태어나서 죽을 때까지 ul을 따라다니게 되며, 이후에 나오는 엘리먼트들에 대해서는 clear를 생각하지 않아도 될 수 있게 해주는 것입니다.
누가 최초에 이런 생각을 했는 지 모르겠지만, 정말 smart한 결과물이 아닐 수 없다는 생각이 듭니다. 저는 혼자서 저런 생각까지 이르게 되려면, 아주~ 더 많은 내공이 필요할 것입니다.
class를 붙였다 떼었다 하는 방식
클릭을 통해 선택된, 혹은 열려 있는 탭 메뉴를 표현하는 UI는 어떻게 구현하면 되는 것일까요?
대부분의 실무에서는 미리 class로 정의를 해둔 후 JS를 이용해서 붙였다 떼었다 하는 방식을 사용합니다.
첫번째 <li> 태그의 class에 .selected가 붙어 있고, 첫번째 설명 <div>에 .show 클래스가 붙어 있는 모습에서
두번째 <li> 태그의 class에 .selected가 붙어 있고, 두번째 설명 <div>에 .show 클래스가 붙어 있는 모습이 됩니다.
이런 동작방식은 Javascript로 구현하면 되는 것이겠죠? 앞으로 어떻게 코딩을 하게 될 것인지, 가닥이 좀 잡히죠?
다음 포스팅에서 동적 구현을 다뤄보도록 하겠습니다.
마치며
동작을 위한 코딩도 중요하지만, 이번 포스팅에서는 float: left;와 clear:both;를 이해하는 게 정말 중요하기 때문에 자세하게 설명을 하고자 했습니다. 코드 자체도 실무에서 빈번하게 사용되었던 형태기도 하구요.
예제로 제공된 CSS를 주석처리하고, background-color를 주면서 CSS의 각 코드 라인들이 어떤 결과물 형태로 영향을 주는지 꼭 확인을 해보세요. 아주 좋은 공부가 될 것입니다.
즐거운 코딩 생활, 즐코딩.
KINcoding.com
'HTML+CSS' 카테고리의 다른 글
| Position 속성 정리(static, relative, absolute, fixed, sticky 비교) (0) | 2023.03.21 |
|---|---|
| em과 rem의 차이점 (0) | 2023.02.28 |
| z-index를 한 눈에 보여주는 - DevTools z-index (2) | 2023.02.06 |
| [실무꿀팁] 반응형으로 백그라운드 이미지 넣기 1초컷 - Part 2 (0) | 2023.02.04 |
| 웹문서에 구글 폰트(Google Fonts) 적용하기 (0) | 2023.01.31 |
댓글