# navbar

10개의 포스트

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

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개의 댓글
·