1. 부트스트랩 Navbar 구경하기

https://getbootstrap.com/docs/4.4/examples/navbars/

Navbar Template · Bootstrap

Never expand navbar를 따라 만들어보자. 일단 css를 쭉 살펴봐야겠다.

 

이 요소는 미디어쿼리가 사용되지 않았다. 딱 forminline과 form-control에만 사용됨

 

상속되는 부모요소들 css부터 찾아본다.

 

1. 전체, 태그, 가상 클래스, 가상 요소 선택자 스타일부터 본다.

 

최상위 요소 가상 클래스 선택자 :root

별거없다.

가상 요소 * *::before *::after

전체 태그들 앞뒤와 전체 태그에 box-sizing: border-box를 줬다.

html

별거없다.

body

전체 마진 0을 주고 글꼴 스타일좀 바꾸고 글을 왼쪽 정렬시켰다.

nav

display: block html5를 지원안하는 브라우저를 대비한 것 같다.

 

2. 클래스 선택자

 

navbar

position은 relative로 줬다 기본 속성값인 static에다 위치도 바꿀 수있다.

display는 flex 플렉서블 박스를 사용한다.

navbar는 플렉스 컨테이너가 되고 자식요소들은 플렉스 항목이 된다.

flex-wrap는 wrap을 줬다. 플렉스 항목을 여러줄에 표현한다. 

align-items은 center를 줬다. 교차축 중앙에 배치한다.

justify-content는 space-between을 줬다. 그래서 검색창이랑 로고가 서로 끝과끝에 있다.

 

nav-brand

display를 inline-block을 줬다. 솔직히 inline은 꼬리물기처럼 이상하게 나와서 박스모델이 적용되는게 보기좋다.

white-space는 nowrap 공백은 여러개가 있어도 1개로 취급하고 줄을 안바꾼다.

가상 클래스 :hover :focus

text-decoration을 none  a태그라 밑줄을 없앴다.

navbar-toggler

대부분 토글들은 aria 속성을 사용해서 css에는 별게 없다.

navbar-collapse

flex-basis를 100% 보통 flex 속성으로 flex-grow flex-shrink flex-basis를 묶어 쓰는게 좋다. 

이 플렉스 항목을 다음줄에 두고 싶어서 설정했다.

navbar-nav

display를 flex 자신을 플렉스 컨테이너로 만들었다.

flex-direction을 column 주축의 방향을 세로로 바꿨다.

list-style을 none으로 줬다. 역시 메뉴에 리스트 태그를 썼다.

nav-item

별거없다.

nav-link

display를 block

dropdown-toggle

white-space를 nowrap줘서 줄바꿈 없앰

가상요소 ::after에는 박스 테두리로 아이콘을 만듬

dropdown-menu

position는 absolute로 li의 .dropdown을 기준으로 옮길 수 있다.

display는 none으로 .show가 붙어야 block으로 보여진다.

form-inline

display를 flex 자신을 플렉스 컨테이너로 만듬

flex-flow는 row wrap을 줬다 flex-direction flex-wrap을 동시에 설정하는 속성 주축을 가로 여러줄 표시

form-control

vertical-align을 middle 줌 인라인 요소 수직정렬 방법