float-01 연습
초기 코드
<!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">
<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>* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: 'Roboto', sans-serif;
letter-spacing: -0.02em;
}
a {
font-size: 18px;
line-height: 20px;
color: #8492a6;
text-decoration: none;
}li 성형시켜주기
list-style-type
li를 쓰면 항상 이렇게 못생긴 점들이 생긴다.
list-style-type: square;로 설정을 해주면
이렇게 네모가 된다.
얘를 아예 없애주고 싶다면
list-style-type: none;으로 설정해주면 된다!
li는 항상 옆에 padding이 생김!
이렇게 땡땡이를 지우고 나니 왼쪽에 디폴트로 padding이 40 붙어있는 것을 볼 수 있다.
얘도 지워주자!
ul {
list-style-type: none;
padding-left: 0;
}
가로배치 해주기
지금까지 배운 것들 중에서,
가로 배치와 관련된 것이 무엇이 있었을까?
- Inline 요소
- Inline Block
- Float
여기서 3가지 옵션이 있는데, 일단 1번은 padding 위아래 값을 줄 수 없으므로 탈락!
그리고 2번, 3번 옵션이 남는데 float 챕터이므로 float으로 구현해주도록 하자!
.tab-menu-item {
float: left;
}
li 요소들의 display 속성을 확인해보면 list-item이라고 나와있는데, 그냥 block이라고 생각하면 된다!
ul 태그 height 고쳐주기
ul은 자식들이 모두 붕 떴기 때문에 높이가 0이 되었다.
이렇게 개꿀 방법을 써도 되지만!
.tab-menu {
overflow: hidden;
}조금 더 정석적인 방법으로,
맨 마지막 자식으로 가상 요소를 넣어주어서 부모(ul)의 height가 가상 요소까지 포함한 높이가 되도록 해주자!
.tab-menu::after {
content: '';
display: block;
clear: left;
}
::after 이라는 가상 요소가 생겨서,
ul이 자식 요소들의 높이의 합을 감지할 수 있게 되었다!
가상 요소를 쓸 때 주의할 점 (암기)
- 반드시 content는 빈 문자열이라도 써야 한다
- clear를 쓸 때에는 반드시
display: block속성을 주어야 한다.
여백 넣어주기
우측 margin값 넣기
.tab-menu-item {
float: left;
margin-right: 16px;
}이렇게 우측 margin 값을 넣어주도록 한다!
padding 넣기
여기서 padding을 li와 a 둘 중 어디에 넣을지 골라야 한다.
여기서는 a태그에 넣어 주어야 한다.
li태그에 padding을 넣어줄 경우, a의 크기가 줄어들어서 딱 a의 content 영역 (글씨 부분)을 눌러야먄 클릭이 된다.
.tab-menu-item a {
padding: 16px 20px;
}읭? 근데 anchor 태그가 inline이네...
a태그의 display가 inline으로 설정되어 있어 content의 크기가 잡히지 않고 있다.
.tab-menu-item a {
display: block;
padding: 16px 20px;
}border 넣어주기
border 넣는 규칙
border: 굵기 스타일 색;ul에 border 넣어주기
.tab-menu {
border-bottom: 1px solid #e5eaef;
background-color: white;
}(단순히 잘 보일 수 있도록 body의 background-color를 black으로 해 주고 ul의 background-color를 white로 넣어줌)
클릭 색 바뀌게 하기
클릭하면 selected 클래스 넣어주기
클릭 된 li 요소에 selected 클래스늘 넣어주면 (js로 처리)
파란 색이 되도록 css를 넣어준다.
<li class="tab-menu-item selected">
<a href="#">Emails</a>
</li>.tab-menu-item.selected a {
color: #2860e1;
font-weight: 500;
}
border-bottom도 파란색 들어가도록 해주기
.tab-menu-item.selected {
border-bottom: 2px solid #2860e1;
}(a태그에 넣어도 무방함)
width 맞춰주기
디자인 시안을 확인
디자인 시안에서 보면 width가 540px이므로,
.tab-menu {
max-width: 540px;
border-bottom: 1px solid #e5eaef;
background-color: white;
}이렇게 max-width를 넣어주도록 하자!
완성된 화면
