# tabs

4개의 포스트
post-thumbnail

안트 디자인 antd tabs 응용하기

각각 탭을 누르면 로그인 창과 회원가입 창으로 변환하도록 만들 예정이다. 우선 antd를 이용하여 tabs 디자인을 가져와 활용할 것이다. npm install antd로 모듈을 설치한다. 그리고 https://ant.design/components/form에서 사용할 폼을 가져온다. 이 경우 map을 돌려 내용이 content of tab Pane1, content of tab Pane2만 나온다. ![](https://velog.velcdn.com/images/jntantmsemt/post/d2a65b0a-91ab-4

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

Front-end 국비지원 #047일

반응형 디자인 2-6 디자인호텔스 >결과 >푸터도 마찬가지로 반응형으로 줄어들게 만들었다. >HTML JQuery JQuery tabs 1. webst_tab >결과 >탭메뉴를 제작한다. 마우스 클릭은 물론 tab을 눌러 해당 공지사항 전부 탭하여 이동이 되는지 확인한다. (웹 접근성) 을 위함이다. > HTML >script 2. attr_tab 1-1 >결과 ![](https://velog.velcdn.com/images/nuyhes/post/4a176735-46

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

Front-end 국비지원 #043일

반응형 디자인 2-2 디자인호텔스 >결과 > 반응형 디자인 2-1에서는 모바일 메뉴를 만들고 left:100% 로 화면 영역 밖으로 빼네는 작업을 했고 오늘 그 메뉴가 나오는 모습까지 만들게 되었다. >HTML >SCSS >script > left로 -100% 가 있던 모바일 메뉴를 제이쿼리로 나오게 구현하였다. 하지만 모바일 메뉴만 오른쪽으로 밀려 나오는 것이 아니라 기존에 있는 헤더도 같이 밀려서 나가야 한다. JQuery JQuery Menu 1-7 >결과 ![](https://

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

React MUI(Material UI) Tabs custom style 적용

Tabs Style 적용 tabs backgroud color 설정 AppBar 컴포넌트에 style 설정 tabs의 indicator color 설정 Tabs에 TabIndicatorProps style 설정 클릭된 탭 글자 색상 변경 useStyles에서 customStyleOntab, activeTab 설정 Tab에서 삼항 연산자를 사용해서 value 값에 따라서 기본 탭을 설정하거나, 액티브 탭을 설정. customTab 전체 코드 실행 화면 참고 자료 [https://codesandbox.io/s/elegant-tu-lxi1g?file=/src/App.js](https://codesandbox.io/s/elegant-tu-lxi1g?file=/

2021년 12월 3일
·
0개의 댓글
·