# navbar

[얼렁뚱땅] 간단한 Navbar 만들기 & 서브메뉴 만들기 (2) - jQuery 곁들여서 코드 줄이기
사용: html, css, javascriptKeyword: jQuery, $, on, 간단 설명: 맨 위에 Navbar UI를 만들고 오른쪽 상단 메뉴 단추를 클릭하면 숨겼던 서브 메뉴가 나오는 형식의 코드를 작성하였다. jQuery를 써서 긴 자바스크립트 문법을

[얼렁뚱땅] 간단한 Navbar 만들기 & 서브메뉴 만들기 (1)
사용: html, css, javascript주요 키워드: 부트스트랩, css탈부착, classList.add(), classList.toggle(), querySelector(), querySelectorAll() 맨 위에 Navbar UI를 만들고 오른쪽 상단 메뉴

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

Front-end 국비지원 #040일
HTMLCSS결과HTMLCSSScriptCSS에 javascript로 적용하기 위해 .shrink라는 클래스를 classList를 사용하기 위해 넣어 두었다.스크롤이 내려가면 로고가 바뀌어야 하므로 변수를 지정하고 변할 img 파일 경로를 넣어둔다.조건문을 만들어 sc
[Next] Link와 useRouter를 이용하여 Navbar 만들고 꾸미기
Next의 Link는 to가 아닌 href 프로퍼티로 경로 설정style, className등을 설정 불가a태그를 따로 만들어 style 및 className 등 설정useRouter를 사용하면 location 정보(현재 경로, 이전 페이지 등)를 얻을 수 있음rout
애니메이션 적용된 네비게이션 바 만들기
0. 커스텀 헤더의 필요성 모든 어플리케이션에는 다른 페이지로 이동하게 해주는 헤더가 들어간다. (아닌가?) React로 웹 어플리케이션을 구축할 때는 항상 상단에 고정되도록 했다. 사실 상단에 계속 고정되게 하는 네비게이션 바는 css를 아시는 분들이라면 모두 가능할

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

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

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

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

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

flex를 이용해 nav bar 정렬 tip
flex를 이용해 태그들을 row 정렬을 한다.align-items를 이용해 center를 맞춰준다.원하는 자식 태그를 기준으로 위 사진과 같이 정렬하려면HOME 태그의 margin-right:auto; 혹은about 태그의 margin-left:auto;를 설정해준다
react Navbar Dropdown Tutorial
한동안 merng 풀스택에만 집중해서 UX/UI에 대한 신경을 써야할 것 같아서 차근차근 side project를 진행하기로 하였다. 첫번째로 Dropdown 튜토리얼을 해보았는데 리액트로 어느정도 퀄리티 있게 구현하기 위해서는 생각보다 많은 테크닉이 필요했다.svg파

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