css를 다루면서 정리하기 - 1

기초적인 CSS는 어느정도 다룰 수 있지만, CSS에서 제공하는 애니메이션이나 요소를 지정하는 효율적인 방법에 대해서는 그다지 다루지 않았었다.

 

최근 Chzzk 플랫폼의 커스텀 오버레이 채팅창을 만지며 배우게 된 부분을 정리하고 가려고 한다.

 

1. 태그

태그의 경우 아무것도 붙이지 않고 호출한다

body {
  font-family: var(--custom-font-family, "GangwonEduPowerExtraBoldA");
}

 

2. 클래스 ( Class )

기본적으로 Class를 지정할땐 .class 를 사용한다. 

<div class="live_overlay_item live_overlay_message">

//이 경우 css에서는 .live_overlay_item live_overlay_message 로 호출한다.//

 

3. 아이디( ID )

id의 경우에는 #id를 사용한다.

<div id="chatBox">

#chatBox {
  border-radius: 32px;
  line-height: 80px;
  margin-top: 44px;
  padding: 28px 40px 24px;
}

 

 

 

4. 괄호, 띄어쓰기 ( > ) 

 

괄호( > )는 직계 ( child )에만 속성을 적용할 때 사용한다.

반면 띄어쓰기는 하위에 있다면, 직계가 아니더라도 선택할 수 있다.

 

즉 유연하고( space ), 엄격한( > ) 정도의 차이라고 할 수 있겠다.

.live_chatting_message_container__vrI-y .live_chatting_message_text__DyleH img {
  margin: unset;
}

.live_chatting_message_container__vrI-y > .live_chatting_message_text__DyleH > img {
  margin: unset;
}

//css 코드가 존재한다고 가정할 때,


<div class="live_chatting_message_container__vrI-y">
  <div class="live_chatting_message_text__DyleH">
    <img src="image.jpg"> <!-- 두 경우 모두 해당된다. -->
  </div>
</div>

<div class="live_chatting_message_container__vrI-y">
  <div>
    <div class="live_chatting_message_text__DyleH">
      <img src="image.jpg"> <!-- 이 경우 괄호는 해당되지 않는다. -->
    </div>
  </div>
</div>

 

5. 대괄호 ( [ ] )

대괄호 내부의 태그를 선택할때 사용한다.

* ( 포함된 전체 ) , ^ ( 지정된 문구로 시작되는 시작 ) , $ ( 지정된 문구로 끝나는 ) 를 통해 구체적인 범위를 지정 할 수 있다.

[class*="live_chatting_username"] {
  opacity: 0;
  display: none;
}

//해당 코드는 "live_chatting_username" 이 포함된 class 전체에 적용된다//

 

 

 

그 외에 태그를 띄어쓰기 없이 사용하여 범위를 구체적으로 좁혀 작성이 가능하다.

<div class ="live_chatting_username_container__m1-i5 
	live_chatting_username_is_message__jvTvP 
	live_chatting_username_is_ellipsis__5DqoB" > 
    


[class*='live_chatting_username_container']
[class*='live_chatting_username_is_message']
[class*='live_chatting_username_is_ellipsis'] {
	color: red;
    }

 

포함하기만 하면 상관없기때문에 선택이 가능하다.

다만 뒤에 붙는 m1-i5 와 상관없이 모든 태그를 전부 선택하기 때문에 ( * 는 포함하기만 하면 선택하므로 )

주의가 필요하다.