# tabs
안트 디자인 antd tabs 응용하기
각각 탭을 누르면 로그인 창과 회원가입 창으로 변환하도록 만들 예정이다. 우선 antd를 이용하여 tabs 디자인을 가져와 활용할 것이다. npm install antd로 모듈을 설치한다. 그리고 https://ant.design/components/form에서 사용할 폼을 가져온다. 이 경우 map을 돌려 내용이 content of tab Pane1, content of tab Pane2만 나온다. 
Front-end 국비지원 #047일
반응형 디자인 2-6 디자인호텔스 >결과 >푸터도 마찬가지로 반응형으로 줄어들게 만들었다. >HTML JQuery JQuery tabs 1. webst_tab >결과 >탭메뉴를 제작한다. 마우스 클릭은 물론 tab을 눌러 해당 공지사항 전부 탭하여 이동이 되는지 확인한다. (웹 접근성) 을 위함이다. > HTML >script 2. attr_tab 1-1 >결과 
Front-end 국비지원 #043일
반응형 디자인 2-2 디자인호텔스 >결과 > 반응형 디자인 2-1에서는 모바일 메뉴를 만들고 left:100% 로 화면 영역 밖으로 빼네는 작업을 했고 오늘 그 메뉴가 나오는 모습까지 만들게 되었다. >HTML >SCSS >script > left로 -100% 가 있던 모바일 메뉴를 제이쿼리로 나오게 구현하였다. 하지만 모바일 메뉴만 오른쪽으로 밀려 나오는 것이 아니라 기존에 있는 헤더도 같이 밀려서 나가야 한다. JQuery JQuery Menu 1-7 >결과 
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=/