CSS 생소한 개념들 정리

• will-change : 컴퓨터에게 애니메이션이 일어날 것임을 미리 알려주어서 애니메이션이 더욱 부드럽게 일어나도록 함.
• 클래스명 > 식별자 : 클래스 바로 밑에 있는 식별자를 직접 선택하게 함.

    <form class="reply">
        <div class="reply__column">
            <i class="far fa-plus-square fa-lg"></i>
        </div>
        <div class="reply__column">
            <input type="text" placeholder="Write a message..."/>
            <i class="far fa-smile-wink fa-lg"></i>
            <button>
                <i class="fas fa-arrow-up"></i>
            </button>    
        </div>
    </form>

.reply__column:last-child > i {
  right: 40px;
  top: 10px;
}

.reply__column:last-child i 로 작성하면 button 안에 있는 i까지 스타일이 적용된다. 따라서 last-child 바로 밑에 있는 i만 스타일을 적용하고 싶을 때는 >로 직접 가리킬 수 있다.

• 클래스 선택자를 여러 개 사용할 때도 있다. 가령 전체적으로 적용되는 속성을 사용하되 어느 한 부분만 다른 스타일을 적용해야 할 때... 이럴 땐 class="선택자1 선택자2" 처럼 띄어쓰기를 사용해서 선택자들을 구분할 수 있다. CSS에서 두 선택자 모두 가진 클래스에게만 스타일을 적용하고 싶을 때는 .선택자1.선택자2 처럼 공백 없이 나열한다.