AA, BB, CC 항목을 갖는 네비게이션 바.
( 창 크기가 일정크기 이하로 작아지면, 네비게이션바의 AA, BB, CC는 토글버튼으로 교체된다. )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부트스트랩 테스트</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
<br />
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand">navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<div class="navbar-nav">
<a class="nav-link">AA</a>
<a class="nav-link">BB</a>
<a class="nav-link">CC</a>
</div>
</div>
</div>
</nav>
</body>
</html>
부트스트랩 예제를 공부하기 앞서, <head>섹션에 있는 CDN 버전을 꼭 확인하기를 바랍니다.
CDN에 버전이 있는것을 몰랐던 저는, 공식예제를 붙여넣어 실행하는데도 같은결과가 나오지않아 당황했습니다....
Q) 위의 네비게이션바에서 container-fluid와 container-md를 적용했을 때의 차이점은 무엇인가?
container-md와 같이 사이즈를 정의하면 토글버튼이 동영상과 같이 움직인다.
창크기를 키울 때, 토글버튼이 일정크기까지 자신의 위치에 있다가 이동한다.
(계속 잡아당기는데도 안당겨지는 것이 억지로 한번씩 당겨오는 느낌)
container-fluid는 토글버튼이 변하는 창크기에 맞춰 항상 오른쪽 정렬된다.
Q) aria-controls, aria-expanded, aria-label 속성은 왜 쓰는가?
aira 속성들은 웹접근성을 높이기 위해 사용되는 속성이다. (기입하지 않아도 동작상에 문제는 없다)
예를 들면, 장애를 가진 이들은 스크린리더를 통해 웹페이지를 음성으로 안내받을 수 있어야 하는데,
이 때 스크린리더가 참고하는 자료인 것이다.
aria-controls는 토글버튼이 참조하는 자료의 id
aria-expanded는 토글버튼이 펼침 상태인지 접힘 상태인지 나타낸다. false가 접힘.
aria-label은 토글버튼의 네이밍정도로 이해할 수 있다.