CSS - Select 비활성화, 기본값 설정

Select는 CSS에서 특정 요소를 지정하거나 선택하는데 사용하기 유용한 컴포넌트이다.
이를 보다 효과적으로 사용할 수 있는 옵션 2가지에 대해서 정리해 보도록 하겠다.

1. 비활성화

특정 옵션의 경우 화면 표시에 표시만하거나, 조건에 따라서 비활성화하는 방ㄱ으로 사용할 수 있다.
사용은 옵션에 disabled를 선언해 주는 것으로 간단히 사용할 수 있다.

<script>
    let type = ''
    const types=[
        'Test',
        'Test1',
        'Test2'
    ]
</script>

<select bind:value={type}>
    <option value="" disabled>Category</option>
    {#each types as t (t)}
        <option value={t}>{t}</option>
    {/each}    
</select>

위 코드를 적용해 보면, 아래와 같이 기본적으로 Category를 보여줄 수 있다.

그리고 해당값은 실제 선택할 수 없도록 하여, 사용자의 잘못된 사용을 막을 수 있다.

2. 기본값 지정

다음은 자주 사용되는 값인 경우 기본적으로 선택하여 사용할 수 있도록 도움을 주는 옵션으로 selected를 통해서 선언할 수 있다.

<script>
    let type = ''
    const types=[
        'Test',
        'Test1',
        'Test2'
    ]
</script>

<select bind:value={type}>
    <option value="">Category</option>
        {#each types as t (t)}
            {#if t === 'Test' }
                <option value={t} selected> {t}</option>
            {:else}
                <option value={t}>{t}</option>
            {/if}
        {/each}    
</select>

selected로 지정하면 기본적으로 선택이 된 상태로 실행이 되기 때문에 기본값을 변경하고자 할 때 유용하다.
만약 별도의 설정을 하지 않으면, 가장 먼저 입력한 값이 기본값이 된다.