className 조건문

style vs. className
React에서 HTML 요소에 스타일을 적용하는 2가지 방법
🪬 style 속성

<div style={{ backgroundColor: 'blue', color: 'white' }}>
  Hello
</div>

🪬 className 속성

// CSS 파일에서
.blue-text {
  color: blue;
  font-size: 20px;
}

// React 컴포넌트에서
<div className="blue-text">
  This text is blue and 20px.
</div>

동적으로 className 설정

<li className={`text-2xl ${i === 0 ? "font-bold border" : ""}`}>
  {item}
</li>

position

💡 position이 relative, absolute, fixed, sticky 중 하나일 때만 top, left, right, bottom과 같은 위치 속성들이 적용된다.

filter

이미지나 요소에 시각적 효과를 주는 CSS 속성 (:=포토샵 필터)

• drop-shdow그림자, blur흐림, brightness밝기, contrast대비

.icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
  /*                  x   y  blur  색상 */
}