# Pro-tips

## 상황 별 BreakPoint 적용하기

Breakpoints는 `min-width` 기준으로 생성되기 때문에 상황에 따라 모든 값을 넘겨줘야 할 필요가 없는 경우도 있습니다.

{% tabs %}
{% tab title="CASE 1" %}
모든 BreakPoint의 값이 다를 경우 \[ width = base : 10px sm : 20px, md : 30px, lg : 40px]

```javascript
Array Syntax : ["10px", "20px", "30px", "40px"]
Object Syntax : { base: "10px", sm: "20px", md: "30px", lg: "40px" } 
```

{% endtab %}

{% tab title="CASE 2" %}
연속된 두 Breakpoint의 값이 같을 경우 \[ width = base, sm : 10px, md: 20px, lg: 30px]

```javascript
// 배열 방식으로 적용 할 경우 null 값을 던져 의미 없는 CSS 생성을 막아줍니다. 
Array Syntax : ["10px", null, "20px", "30px"] 
Object Syntax : { base: "10px", md: "20px", lg: "30px" }
```

{% endtab %}
{% endtabs %}

##