# navbar

heavenlyview

사용: html, css, javascriptKeyword: jQuery, $, on, 간단 설명: 맨 위에 Navbar UI를 만들고 오른쪽 상단 메뉴 단추를 클릭하면 숨겼던 서브 메뉴가 나오는 형식의 코드를 작성하였다. jQuery를 써서 긴 자바스크립트 문법을

heavenlyview

사용: html, css, javascript주요 키워드: 부트스트랩, css탈부착, classList.add(), classList.toggle(), querySelector(), querySelectorAll() 맨 위에 Navbar UI를 만들고 오른쪽 상단 메뉴

rlawogks2468

Nav바를 만들면 오른쪽에 링크 버튼을 만들게 되는데 이왕만드는거 이쁘게 만들고 싶어서 마우스 올리면 밑줄이 생기게 만들어 봤다.

kse3447

반응형 웹페이지 작업 중 최상단 헤더 부분을 만들어보았다!

nuyhes

HTMLCSS결과HTMLCSSScriptCSS에 javascript로 적용하기 위해 .shrink라는 클래스를 classList를 사용하기 위해 넣어 두었다.스크롤이 내려가면 로고가 바뀌어야 하므로 변수를 지정하고 변할 img 파일 경로를 넣어둔다.조건문을 만들어 sc

ysys889

bootstrap navbar fixed-top setting

minsu2344

Next의 Link는 to가 아닌 href 프로퍼티로 경로 설정style, className등을 설정 불가a태그를 따로 만들어 style 및 className 등 설정useRouter를 사용하면 location 정보(현재 경로, 이전 페이지 등)를 얻을 수 있음rout

space_dog

0. 커스텀 헤더의 필요성 모든 어플리케이션에는 다른 페이지로 이동하게 해주는 헤더가 들어간다. (아닌가?) React로 웹 어플리케이션을 구축할 때는 항상 상단에 고정되도록 했다. 사실 상단에 계속 고정되게 하는 네비게이션 바는 css를 아시는 분들이라면 모두 가능할

dygreen

아이콘을 활용하여 메뉴바를 제작할 때 알아두면 유용한 것들을 소개해 보겠습니다여기서 class="indent" 는 css setting file에 만들어 놓은 속성으로text-indent(글자 들여쓰기) 속성을 최대한 많이 주어 화면상에 보이지 않고,제작자가 쉽게 알아

chaeshee0908

BootstrapNavbar 컴포넌트 생성

minkuk90

하단 네비게이션 컴포넌트를 BottomNav.jsx 라는 이름으로 파일을 생성하고 아래와 같이 타이핑한다.위와 같이 button이라는 글자가 5개 생겼다.BottomNav.jsx에 css를 적용할 BottomNav.css파일을 생성하고 아래와 같이 타이핑한다.네비게이션

daekyeong

다른 프로젝트를 시작하기 전에 아직 CSS 지식이 부족하기도 하고, 코드를 줄이기 위해 Bootstrap이라는 라이브러리를 사용하여 디자인을 해보자. 1. React-Bootstrap ⭐ React-Bootstrap을 설치하면 버튼디자인 메뉴디자인 직접할 필요없이 B

rand_guy

여태까지는 Flex-grow를 Navbar의 모든 메뉴의 사이즈를 비율로 조정할 때, 사용했다.하지만 특정 메뉴의 사이즈만 브라우저의 크기에 반응하도록 만들 때, 반응하길 원하는 메뉴에만 flex-grow를 설정하면 크기에 맞춰서 사이즈가 커졌다가 작아졌다가 한다.

ire4564

프로젝트를 하면서 부트 스트랩을 이용해서 네비게이션 바를 직접 만들어 보았다. 본래 있는 부트스트랩의 Nav바는 내가 원하는 대로 정렬이 힘들어서 새로 만들었다.아직까지 부트스트랩을 반응형으로 하는 것은 완벽하게 할 수 없었다. 공식 사이트를 참고해서 더 공부해 봐야겠

zerozoo-front

flex를 이용해 태그들을 row 정렬을 한다.align-items를 이용해 center를 맞춰준다.원하는 자식 태그를 기준으로 위 사진과 같이 정렬하려면HOME 태그의 margin-right:auto; 혹은about 태그의 margin-left:auto;를 설정해준다

gytlr01

한동안 merng 풀스택에만 집중해서 UX/UI에 대한 신경을 써야할 것 같아서 차근차근 side project를 진행하기로 하였다. 첫번째로 Dropdown 튜토리얼을 해보았는데 리액트로 어느정도 퀄리티 있게 구현하기 위해서는 생각보다 많은 테크닉이 필요했다.svg파

noyo0123

css float한거 영역 채우기 clearfix img float 속성을 적용한 요소의 부모요소에 ::after를 사용해주면 된다. span과 ul태그를 감싸는 div 태그에 ::after를 추가하였습니다. 레퍼런스 : CSS / float를 clear하는