Node.js 버전

분류: 서식

카드 하나에 제목 + 설명 + 단일 선택 컨트롤만 담아, 환경 설정처럼 항목 하나를 고르는 단순한 설정 폼을 만들 때 사용하는 최소 구성입니다. card-body에는 form-select만 두고, card-footer에는 관련 문서로 이동하는 안내 링크를 배치합니다.

소스

<div class="card overflow-auto">
    <div class="card-body">
        <h3 class="card-title">Node.js 버전</h3>
        <p class="card-subtitle">
            빌드 단계 및 서버리스 함수에서 사용되는 Node.js 버전입니다.
            변경 사항을 적용하려면 새로운 배포가 필요합니다.
        </p>
        <select class="form-select">
            <option>14.x</option>
            <option>12.x</option>
        </select>
    </div>
    <div class="card-footer">
        <a href="#">Node.js 버전</a>에 대해 더 알아보기
    </div>
</div>

사용된 주요 클래스

클래스	역할
card-title	카드 상단의 제목(h3) 스타일
card-subtitle	제목 아래에 표시하는 회색 보조 설명 텍스트
form-select	드롭다운(<select>)의 기본 스타일

실전 예제 페이지

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/서식-node-js-버전.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗

참고 자료

• Form elements
• Cards