CodePly , navbar

https://www.codeply.com/p

Codeply

 

Codeply는 인터넷에서 바로 사용할 수 있는 IDE이다.

 

 

들어가서 최신버전의 부트스트랩을 사용해보자.

 

 

부트스트랩 공식문서를 보면, nav, ul, li 마다 class 명이 각각이라는 것을 확인 할 수 있다.

 

 

 

 

위와 같은 식으로 li 태그를 복사 붙여넣기를 했다.

수직으로 Contact, Pricing , Download가 나왔는데

나는 수평으로 되길 원한다.

 

 

 

수평이 가능하게 된 이유는 붉은색 class를 사용했기 때문이다.

navbar-expand-lg

lg는 크기가 작아질 경우에 수직으로 변경되는 반응형이다.

 

부트스트랩에서 지원하는 다양한 색상들

 

 

navbar dark는 글자색 (dark라서 검은색일 것 같지만, 알고보면 회색이다.)

bg dark 는 배경색을 나타낸다.

 

 

이제 반응형으로 화면크기가 작아지면 토글로 바뀌게 하려면 어떻게 해야할까? 위 그림 처럼 말이다.

 

 

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

위 코드는 토글 박스를 의미한다.

 

 

이때 토글박스에 넣고 싶은 카테고리를 div class="collapse navbar-collapse" 에 넣어주고,

id를 꼭 지정해주어야 한다.

 

 

코딩하면서 짜증날때..

수많은 이유가 있겠지만 지금 내가 짜증나는이유는..

코드는 똑같은데 왜 결과물에서 차이가 날까? 

꼭 원인을 찾고야 말겠다.