220530) 부트스트랩(2)

학습한 내용

부트스트랩 실습

<class 정리>

<nav class="navbar bg-dark navbar-dark navbar-expand-sm">
    <div class="container-fluid"> 
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
            <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
        </ul>
    </div>    
</nav>

nav: 간단한 수평메뉴
.nav-link 같이 쓰면 navbar 색깔이 바뀐다
active : 활성화상태
disabled : 클릭할 수 없게 비활성화

flex-column : 항상 세로 메뉴
nav-pills : active에 테두리 넣기
row 행
col 열

<hr class="d-sm-none"> <!-- 선을 모바일 사이즈에서 나타냄-->

• nav-toggle 만들기

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <!-- <a class="navbar-brand" href="">My Company</a> -->
            <a class="navbar-brand" href="">
                <img src="https://getbootstrap.kr/docs/5.1/assets/brand/bootstrap-logo.svg" width="30" height="24">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav">
                    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Freebies</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">Log In</a></li>
                </ul>
            </div>
        </div>
    </nav>

navbar-expand-sm: sm에서 수직 정렬
container-fluid : 좌우로 꽉찬 레이아웃 (width: 100%)
fixed-top 맨 앞에 고정

---

학습한 내용 중 어려웠던 점 또는 해결못한 것들

col-md-2 라는 클래스는
어디는 2를 쓰고 어디는 7을 쓰고 하는게 처음에는 숫자가 감이 잘 안왔었다.
12에서 1이라도 모자라면 정렬에 빈공간이 생기는걸 보고... 12를 등분해서 숫자를 쓰는걸 나중에 알았다.

해결 방법

메뉴가 들어가자마자 펼쳐져 있어서 어디가 문제인지 찾아보니

 <div class="collaose navbar-collapse" id="navbarCollapse">

id 부분에 "navbarcollapse"라고 소문자로 작성하는 바람에 이상하게 보였던 것이었다...

학습 소감

부트스트랩은 뭔가 간단한거 같으면서도 만들고 싶은대로 잘 안되는거같다. 좀더 연구를 해봐야겠다.