목록반응형 (2)

PINKYETI

[React] Component 라이브러리 활용하여 반응형 메뉴바(NavBar) 만들기 (Ant-Design)

안녕하세요. 오늘은 Ant-Design 이라하는 React Component 라이브러리를 활용하여 페이지를 만들어보도록 하겠습니다. HTTP 디자인에서 BootStrap 이라는 라이브러리를 활용하여 디자인 하듯이 Ant-Design(antd) 라이브러리를 활용하면 쉽게 리액트 디자인을 할 수 있습니다. 먼저 해당 라이브러리 활용을 위해 아래 명령어를 통해 설치해줍니다. >> npm install antd 라이브러리 설치 후, package.json 에서 설치 확인을 해줍니다. 1. antd 라이브러리 공식 홈페이지 참조antd 에서 제공하는 컴포넌트를 확인하기 위해 공식 홈페이지를 참고해줍니다. 기본적인 Button, Table 등부터 Menu, Dropdown 등의 컴포넌트도 활용할 수 있고 별도 ic..
# Dev Note/[Frontend] 2023. 9. 8. 20:54
[JavaScript] 반응형 웹 페이지 슬라이드 2단 메뉴바 만들기 (+HTML/CSS, 드롭다운 x)

안녕하세요. 핑크예티입니다. 최근 웹개발 프로젝트를 진행하며, Front-end 개발을 맡게 되었는데요, 잘 모르는 영역이라 쉽지 않더라고요. 반응형 웹페이지 구현을 시작하다가 메뉴바 구현부터 막혀서 고생을 좀 했습니다. 최근 웹페이지에서 흔하게 볼 수 있는 형태의 2단 메뉴바 구성은 구글링을 통해서도 찾아보기 힘들더라고요. 그래서 제가 작성했던 방법을 공유하고자 펜을 들게 되었습니다. 성격 급하신 분들은, 전체 코드 & 메뉴바 예시부터 보고가세요. - 메뉴바 예시 HTML 삽입 미리보기할 수 없는 소스 - 전체 코드 - 메뉴바 템플릿은 BootStrap 예시를 참고하여 작성 - BootStrap/jQuery HTML 연동은 cdn으로 연결 - .sub-menu Class를 선언하여 Sub Menu St..
# Dev Note/[Frontend] 2022. 4. 22. 04:03
이전 Prev 1 Next 다음