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를 넣어주도록 하자!

완성된 화면

Author And Source

이 문제에 관하여(CSS - (2) Float - 3 : float-01 연습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@frenchkebab/CSS-2-Float-3-float-01-연습

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

CSS - (2) Float - 3 : float-01 연습