# navbar

17개의 포스트
post-thumbnail

[얼렁뚱땅] 간단한 Navbar 만들기 & 서브메뉴 만들기 (2) - jQuery 곁들여서 코드 줄이기

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

2023년 5월 20일
·
0개의 댓글
·
post-thumbnail

[얼렁뚱땅] 간단한 Navbar 만들기 & 서브메뉴 만들기 (1)

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

2023년 5월 20일
·
0개의 댓글
·
post-thumbnail

React로 nav바 밑줄 애니메이션 만들기

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

2023년 1월 13일
·
0개의 댓글
·
post-thumbnail

CSS 반응형 헤더

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

2022년 12월 14일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #040일

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

2022년 12월 11일
·
0개의 댓글
·

Bootstrap에서 네비게이션 바 fixed-top 설정 오류

bootstrap navbar fixed-top setting

2022년 12월 8일
·
0개의 댓글
·

[Next] Link와 useRouter를 이용하여 Navbar 만들고 꾸미기

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

2022년 10월 11일
·
0개의 댓글
·

애니메이션 적용된 네비게이션 바 만들기

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

2022년 4월 9일
·
0개의 댓글
·
post-thumbnail

[HTML,CSS] menu bar 제작시 알아두면 유용할 태그 및 속성들

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

2022년 3월 25일
·
0개의 댓글
·

[React] Navigationbar 만들기

BootstrapNavbar 컴포넌트 생성

2021년 12월 18일
·
0개의 댓글
·
post-thumbnail

92일차

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

2021년 12월 15일
·
0개의 댓글
·
post-thumbnail

[RP] 2. React-Bootstrap, navbar

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

2021년 10월 9일
·
0개의 댓글
·
post-thumbnail

[CSS] navbar의 특정 메뉴만 반응형으로 작동하기

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

2021년 9월 9일
·
0개의 댓글
·
post-thumbnail

React Bootstrap. Navbar & Button

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

2021년 8월 9일
·
0개의 댓글
·
post-thumbnail

flex를 이용해 nav bar 정렬 tip

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

2021년 4월 13일
·
0개의 댓글
·

react Navbar Dropdown Tutorial

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

2020년 10월 7일
·
0개의 댓글
·
post-thumbnail

자주 쓰는 html,css

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

2019년 12월 19일
·
0개의 댓글
·