개발/Web16 Grid 중복 적용, Nested Grid 예시 코드 설명 Grid를 중첩하는 예시 코드입니다. Grid는 width를 12개의 col으로 나누어 사용합니다. 내부적으로 다시 만든 Grid container도 이전에 할당된 col에 상관없이 자기를 기준으로 12개의 col으로 나눕니다. 예시 코드 및 스샷 예시 코드 ... ... ... 스샷 참조 React Grid component - Material UI The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. mui.com 2022. 10. 22. Multi Collapse 구현 방법, 예시 코드 설명 material-ui에서 제공하는 component API 중 List의 Collapse에 대한 이야기입니다. 아래 예시는 List와 Collapse로 Sidebar를 구현한 것입니다. (Multi List, Multi Collapse) 예시 코드 open에 대한 state를 List 또는 Object로 선언하고 사용합니다. List로 선언 및 사용하는 state const [open, setOpen] = React.useState([false, false]); const handleClick = (i) => { const o = { ...open }; o[i] = !o[i]; setOpen(o); }; 반환하는 JSX handleClick(0)}> {open[0] ? : } handleClick(.. 2022. 10. 22. material-ui RadioGroup row 수직 정렬 ( vertical align ) 설명 FormLabel에 material-ui의 RadioGroup에서 row속성일 때, FormLabel과 FormControlLabel을 수직 정렬하는 방법입니다. 해결방법 FormLabel에 style 속성을 다음과 같이 추가합니다. style={{ display: "flex", alignItems: "center", }} display와 alignItems 가 동시에 있어야만 동작합니다. 적용 전 스샷 및 코드 적용 전 스샷 적용 전 코드 회원 유형 적용 후 코드 및 스샷 적용 후 스샷 적용 후 코드 회원 유형 참조 CSS center and vertical alignment I have used the bootstrap material UI to construct a sign up form, I.. 2022. 10. 22. google font 사용법, react font 적용 방법 (전체 적용, 부분 적용) font 적용 방법 방법은 크게 두 가지가 있습니다. 1. font 파일을 내가 관리합니다. 2. font 파일을 구글이 관리합니다. 특별한 이유가 없다면 두 번째(구글) 방법을 선택합니다. google font 사용법 1. 다음 사이트에 접속합니다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 font를 검색하여 클릭합니다. (3 style은 Regular, Bold와 같은 style 개수를 말합니다.) 3. 스크롤을 내려 원하는 style를 추가합니다. (+버튼을 클릭해서) 4. 오른쪽 상단의 버튼을 누릅니다. (자동으로 나올 수도 있습니다.) 5. 로 .. 2022. 10. 22. CSS border이 안보여요! 한 줄 요약 border-style의 default value가 none이라서 안 보이니, border-style을 solid로 설정하자. 문제 코드 문제 코드 실행 결과 문제 원인 border-style의 default 값이 none이라서 border-width 등 다른 property를 설정해도 적용되지 않음. 해결 방안 다음 코드 추가 border-style:solid; 수정한 코드 수정한 코드 실행 결과 귀여운 캬루가 박스에 갇혔다ㅠ 2021. 7. 20. JS closure JS closure에 대해 알아봅시다. JS closure 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효 범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. -mozilla- 위 설명과 같이, JS에서 함수는 함수 선언 당시의 어휘적 환경(사용가능한 지역 변수 등)과 항상 함께 다닙니다. 이런 방식으로 함수를 처리하는 것이 왜 유용할까요? JS closure 을 사용하는 이유 클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메서드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다. 결론적으.. 2021. 3. 31. 이전 1 2 3 다음
