프론트엔드 정복하기

medium.com/@thexap/how-to-setup-bulma-css-framework-with-react-under-5-minutes-a3d8c2c33a87 How To Setup Bulma CSS Framework With React Under 5 Minutes For my next React project I decided to use a CSS framework. Before that I was using Styled-components to style my components. medium.com ** app.scss 파일에서 각각의 sass 파일을 불러오기 전에 @import '~bulma/sass/utilities/_all.sass'; 위를 먼저 불러와줘야, 각 sass 파일의 변수들을..

bootstrap 모달을 열 때 모달창 뒤에 검은 화면이 생성된다. 이 검은 화면 요소는 어디에 위치해 있을까? 다음과 같이 body태그 맨 끝에 'modal-backdrop'이라는 클래스를 가지고 생성된다. ... ... ... 만약 모달창이 연달아서 여러 개 생성될 경우, 나중에 생성된 모달창의 backdrop이 기존의 backdrop에 이어서 body 태그 맨 끝에 생성된다. ... ... ... //먼저 생성된 모달의 back //나중에 생성된 모달의 back 모달창을 연달아 여러 개 띄울 경우, 문제가 하나 생긴다. 흰색 모달 박스를 띄운 후 => 버튼을 클릭하면 => 하늘색 alert모달창이 흰색 박스 위에 뜨도록 하고 싶었다. 즉, 하늘색 alert모달창의 backdrop에 흰색 모달박스가 ..

Grid System이란?) 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총 12분할) -class명 : .col-lg-(1~12) // 1200px보다 클 때 - .col-md- // 992px보다 클 때 - .col-sm- // 768px보다 클 때 - .col-xs- // 768px보다 작을 때 .col-lg-12 : 꽉 채우겠다. .col-lg-6 : 절반만 채우겠다.

* min 압축파일 .min.css 파일은 띄어쓰기 없이 압축해 놓은 파일이다. >> '.min'을 지워주면 띄어쓰기가 된 파일을 확인할 수 있다.

AntDesign - Grid system Col, Row *** col : 1-24 값 ex ) : 너비가 같은 3개의 열 row : [ horizontal, vertical ] >> hor : 컨텐츠간 좌우 간격 / ver : row간 상하 간격 (px) ***반응형 {xs:8, sm:16, md:24, lg:32} ex) 배열 활용 [ horizontal, vertical ] [ 16, {xs:8, sm:16, md:24, lg:32} ] antDesign 사이트 참고 https://ant.design/components/grid/#header Card 1) import {Card} from 'antd'; : 일반 태그처럼 간단하게 사용. ex) boolah -Card 속성값 : antdesign ..

1. Material UI 2. React Bootstrap 3. Semantic UI 4. Ant Design 5. Materiaize ... 4. Ant Design : 중국에서 만든 것, 다루기 쉬움, 용량이 큰 것이 단점