float 를 이용해서 아래의 그림과 같이 탭 메뉴를 가로로 배치해보았다.
단순히 따라 만드는 게 아니라,
만들면서 헷갈렸던 부분들을 정리해보려고 한다.
만들면서 궁금했던 점들
1. 왜 <ul> 앞에 padding이 생길까?
ul 태그는 브라우저 기본 스타일이 적용되어 있다.
아래와 같이 기본적으로 왼쪽 여백과 점(•)이 생긴다.
해결 방법
.tab-menu {
padding-left: 0; <--! 왼쪽 여백 제거 -->
list-style-type: none; <--! 점 제거 -->
}2. 탭 메뉴의 글자만 클릭되는 게 아니라, 블록 전체를 클릭 가능하게 하려면?
처음에는 <li> 에 padding 을 줬다.
그런데 그렇게 하면 글자만 눌러야 이동한다.
왜냐하면 실제로 링크는 <a> 태그이기 때문이다.
- 클릭 영역을 넓히고 싶다면 →
<a>태그에padding을 줘야 한다. - 하지만
<a>는 기본적으로inline요소라서 위/아래padding이 제대로 적용되지 않는다.
해결 방법
.tab-menu-item a {
display: block;
padding: 16px 20px;
}3. 리스트 간 간격은 어떻게 계산해야 할까?
처음에는 전체 너비를 계산해야 하나 고민했다.
하지만 굳이 전체 길이를 계산할 필요는 없다.
.tab-menu-item {
margin-right: 16px;
}
.tab-menu-item:last-child {
margin-right: 0;
}- 마지막 요소만
margin을 0으로 만들어주면 된다. - 리스트 사이 간격만 주면 되기 때문이다.
배운 float 적용시키기
.tab-menu-item {
float: left;
}
.tab-menu::after {
content: '';
display: block;
clear: both;
}모든 <li> 에 float 을 주자 부모인 <ul> 의 높이가 0이 되었다.
가상요소를 만들어 마지막 자식처럼 동작하게 해서 부모가 그 자식을 기준으로 높이를 계산하게 한다.
코드
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Float 1</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<ul class="tab-menu">
<li class="tab-menu-item">
<a href="#">Summary</a>
</li>
<li class="tab-menu-item active">
<a href="#">Emails</a>
</li>
<li class="tab-menu-item">
<a href="#">Files</a>
</li>
<li class="tab-menu-item">
<a href="#">Mentions</a>
</li>
</ul>
</body>
</html>css 코드
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "Roboto", sans-serif;
letter-spacing: -0.02em;
background-color: black;
}
a {
font-size: 18px;
line-height: 20px;
color: #8492a6;
text-decoration: none;
}
.tab-menu {
max-width: 540px;
background-color: white;
border-bottom: 1px solid #E5EAEF;
padding-left: 0;
list-style-type: none;
}
.tab-menu::after {
content: '';
display: block;
clear: both;
}
.tab-menu-item {
float:left;
margin-right: 16px;
}
.tab-menu-item a {
display: block;
padding: 16px 20px;
}
.tab-menu-item:last-child {
margin-right: 0;
}
.tab-menu-item.active {
border-bottom: 2px solid #2860E1;
}
.tab-menu-item.active a {
color: #2860E1;
font-weight: 500;
}이번 실습에서 배운 것
✔ 브라우저 기본 스타일이 있다. (예) <li>
✔ 클릭 영역은 <a> 태그가 결정한다.
✔ 간격은 전체 계산보다 “마지막 요소 정리”가 더 깔끔하다.
느려도 천천히 꾸준히 !