프론트엔드 웹 개발에 큰 영향을 미치는 것으로 알려진 부트스트랩 프레임워크는 최근 개발자가 시각적으로 매력적이고 반응성이 뛰어나며 기능이 풍부한 웹사이트와 애플리케이션을 제작할 수 있는 다양한 혁신적 기능과 개선 사항이 포함된 버전 5.3.0을 출시했습니다.
다크 모드 토글
주목할 만한 부트스트랩 5.3.0 추가 기능 중 은 다크 모드를 위한 토글입니다. 이 토글을 사용하면 웹사이트 사용자가 밝은 모드와 어두운 모드를 손쉽게 전환할 수 있으므로 다양한 조명 조건에서 웹사이트나 애플리케이션을 원활하게 사용할 수 있습니다.
앞서 언급한 기능은 HTML 버튼 또는 앵커 태그에 “data-bs-toggle=’dark-mode'” 속성을 통합하여 활성화할 수 있습니다.
이 개념에 대한 데모는 아래에 제공됩니다.
<button type="button" class="btn btn-primary" data-bs-toggle="dark-mode">
Toggle Dark Mode
</button>
글꼴 배율 유틸리티
최신 버전의 부트스트랩(버전 5.3.0)에는 사용자가 특정 글꼴 크기를 직접 지정하지 않고도 미리 정해진 배율에 따라 텍스트의 크기를 쉽게 수정할 수 있는 글꼴 배율 유틸리티 모음이 도입되었습니다
이러한 유틸리티를 다른 부트스트랩 타이포그래피 클래스와 함께 사용하여 웹사이트 또는 플랫폼 전체에서 확장성과 일관된 타이포그래피를 구현할 수 있습니다.
글꼴 크기 조정 유틸리티를 구현하는 몇 가지 예시적인 사례는 다음과 같습니다:
<p class="fs-1">This is the largest font size</p>
<p class="fs-2">This is a slightly smaller font size</p>
<p class="fs-3">This is a medium font size</p>
<p class="fs-4">This is a small font size</p>
<p class="fs-5">This is the smallest font size</p>
거터 유틸리티
부트스트랩의 최신 버전인 5.3.0에는 거터 유틸리티라는 새로운 기능이 포함되어 있습니다. 이 도구는 부트스트랩 그리드 시스템 내에서 열 사이에 거터를 통합하는 효율적인 수단을 제공하므로 맞춤형 CSS 코딩이 필요하지 않습니다.
거터를 사용하는 방식을 설명하는 데모가 제공되었습니다.
<div class="row gx-3">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
본 사례에서는 GX-3 카테고리를 사용하여 거터 공간을 통합합니다.
업데이트된 양식 컨트롤
체크박스 및 라디오 버튼
최신 부트스트랩 버전 5.3.0에서는 사용성과 접근성을 향상시키는 체크박스 및 라디오 버튼의 세련된 스타일이 도입되었습니다. 이러한 개선 사항에는 사용자가 이러한 입력 유형과 쉽게 상호 작용할 수 있도록 더 넓어진 히트 영역과 더 눈에 잘 띄는 초점 표시기가 포함됩니다.
다음은
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">Default checkbox</label>
</div>
새로 도입된 라디오 버튼 디자인을 활용하는 방법을 설명하기 위해 데모를 제공했습니다.
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1">
<label class="form-check-label" for="radio1"> Option 1 </label>
</div>
입력 요소에 특정 모양을 부여하기 위해 ‘.form-check-input’ 클래스를 활용하는 방법과 함께 제공되는 라벨에 스타일링 목적으로 ‘.form-check-label’ 클래스를 사용하는 방법에 유의하시기 바랍니다.
선택 상자
부트스트랩 5.3.0의 선택 상자는 향상된 균일성과 사용자 경험을 촉진하는 새로운 스타일을 추가하여 개선되었습니다. 새롭게 디자인된 선택 상자는 탭 타겟을 늘리고 초점 표시기를 더욱 눈에 잘 띄게 하여 사용자에게 원활한 상호 작용 경험을 제공합니다.
다음은 새로 도입된 선택 상자 스타일을 활용한 데모입니다.
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
.form-select 클래스를 활용하면 선택 상자 자체에 스타일링 기법을 적용할 수 있습니다.
유효성 검사 피드백
부트스트랩의 최신 버전인 5.3.0 버전에는 양식 컨트롤에 대한 보다 유익하고 직관적인 유효성 검사 피드백 스타일을 제공하여 사용자 경험을 향상시키는 혁신적인 기능이 포함되어 있습니다. 이 기능을 통해 웹사이트 개발자는 방문자가 양식에 잘못된 정보를 입력했을 때 이를 명확하게 표시할 수 있어 실수를 더 쉽게 이해하고 수정할 수 있습니다.
다음은 새로운 유효성 검사 방법의 활용 데모입니다.
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control is-invalid" id="exampleInputPassword1" placeholder="Password" required>
<div class="invalid-feedback"> Please provide a valid password. </div>
</div>
.is-invalid 클래스의 존재는 입력 필드가 유효하지 않은 상태임을 의미하며, .invalid-feedback 클래스의 표시는 최종 사용자에게 오류에 대한 메시지를 전달한다는 사실에 유의하시기 바랍니다.
이러한 새로운 디자인을 구현하면 웹사이트와 애플리케이션에 사용자 친화적이고 통일된 양식을 쉽게 만들 수 있어 접근성과 일관성을 보장할 수 있습니다.
부트스트랩 5.3.0의 흥미로운 개선 사항
부트스트랩의 최신 버전인 5.3.0은 널리 사용되는 CSS 프레임워크의 대폭적인 업그레이드로, 여러 가지 새로운 기능과 개선 사항이 포함되어 있습니다. 다크 모드 토글, 확대된 글꼴, 거터용 추가 유틸리티 등이 추가되어 개발자에게 고급 웹사이트 및 소프트웨어 프로그램을 구축할 수 있는 확장된 리소스를 제공합니다.