본문 바로가기
Svelte/CSS

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

by 올엠 2022. 5. 8.
반응형

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

반응형

'Svelte > CSS' 카테고리의 다른 글

CSS - Select 비활성화, 기본값 설정  (0) 2022.05.08
CSS - grid 기본 이해, 2차원 배열하기  (0) 2022.04.26
CSS - element 요소 정리  (0) 2022.04.03
CSS 마침표 "."의 의미  (0) 2022.04.02
Sass(SCSS)란, 사용법  (0) 2022.03.29
MVC - .Net razor how to selection dynamic CSS  (0) 2020.10.28

태그

, ,

댓글0