[CSS] tip정리 (-ing) in cocoa talk

1. 굳이 모든 태그에 클래스나 아이디를 줘야할까

 <div class="screen-header__icons">
          <span><i class="fa-solid fa-magnifying-glass fa-lg"></i
</span>
          <span><i class="fa-solid fa-music fa-lg"></i></span>
          <span><i class="fa-solid fa-gear fa-lg"></i></span>
        </div>    

    위 태그에서 span에 css적용하고 싶으면 

        .screen-header__icons span {
  padding-left: 25px;
}

screen-header__icons라는 클래스 옆에 span을 한번 더 써주면 된다!!

2.부모 태그와 자식태그 좀 더 공부해볼 필요 있는듯

<div class="user">
  <span>2</span>
  <i class="fas fa-chevron-right fa-xs"></i>
</div>

여기서 class user에 flex를 적용하면 span과 i 가 영향을 받는다.
근데 class user가 위 부분에서는 flex의 영향을 받고 싶지 않다고 하면

<div class="user">
  <div>
  <span>2</span>
  <i class="fas fa-chevron-right fa-xs"></i>
  <div>
</div>

div로 한번 더 감싸주면 된다
그럼 원래 부모였던 class "user"의 영향을 받지 않게 된다

3. html 영역 구분할 때

위와 같이 세 곳으로 나누는 건 좋다
근데 일단 div로 나눠준 뒤에 그 안에 span이나 아이콘을 넣어주는 것이 수정할 때 편하다. 특히 영역을 세 곳으로 분리시키는 것이 위치 변경할 때 용이하다.

<header class="alt-header">
  <div class="alt-header__column">
    <a href="chats.html">
      <i class="fas fa-angle-left fa-3x"></i>
    </a>
  </div>
  <div class="alt-header__column">
    <h1 class="alt-header__title">BYEONGHYUN</h1>
  </div>
  <div class="alt-header__column">
    <span><i class="fas fa-search fa-lg"></i></span>
    <span><i class="fas fa-bars fa-lg"></i></span>
  </div>
</header>

이런 식으로 같은 class명의 div로 나눠준다!