:root{ --num-of-column: 6; } h3, p{ margin: 0; } .card-container{ display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 2rem; } .card-container .card{ width: calc(100vw / var(--num-of-column)); height: 15rem; background: #eee; box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3); padding: 1rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1rem; }..

home instagram google github html 코드를 위와 같이 작성한다. 폰트아우썸 아이콘을 이용하여 드롭다운 메뉴를 만든다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3); } 이렇게 하면 아래와 같이 드롭다운 디자인이 완성된다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box..

기본 개념은 리액트 파일을 빌드(여러파일을 하나의 파일로 합치는 과정)하면 기본적인 html, css, javascript 파일이 build 폴더에 생성되고, 해당 폴더 안의 파일들을 깃허브 저장소에 업로드하면 된다. 1. 깃허브 저장소 이름을 BrowserRouter 컴포넌트의 basename 으로 설정해준다. 2. package.json 파일에 homepage 주소를 설정해준다. 3. public/index.html 의 head 부분에 base 태그를 추가해준다. 4. 루트폴더에서 npm run build 를 한다. 5. build 폴더로 이동하여 build 폴더의 코드를 깃허브에 업로드한다. 6. 깃허브에서 깃허브 페이지를 설정한다. dongjin 은 깃허브저장소 이름의 예시이다. "homepage..

const theme = { brandColor1: "#BE2525", brandColor2: "#BE0000", }; const backcolor = { bgColor1: 'orange', bgColor2: 'yellow' } const params = [theme, backcolor] // strings 는 문자열이 있는 부분만 추출해서 배열에 저장함 // values 는 함수나 객체가 있는 부분만 추출해서 배열에 저장함 function css(strings, ...values) { console.log(strings) console.log(values) return strings.reduce((res, str, i) => { // 문자열이 있는 부분은 그냥 연결하고 함수나 객체가 있는 부분은 함수를..

index.html 에 위 코드를 추가하자! .track.earth{ width: 400px; height: 400px; border-radius: 50%; border: 2px solid #ccc; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } .sun{ width: 100px; height: 100px; background-color: orange; border-radius: 50%; } 위와 같이 하면 하나의 궤도가 생기고 태양이 아래와 같이 궤도의 중심에 위치하게 된다. 하지만 다른 궤도도 마찬가지로 원의..

Loading ... index.html 파일에 로딩 애니메이션을 보여주기 위한 div 요소를 추가한다. .loading{ width: 200px; height: 200px; border: 15px dotted orange; border-radius: 50%; border-top: 15px dotted white; border-right: 17px dotted orange; border-bottom: 20px dotted orange; border-left: 30px dotted orange; /* loading 의 부모요소 중에서 position 이 static 이 아닌 */ /* 요소의 위치를 기준으로 loading 의 위치가 결정됨 */ position: absolute; left: 50%; top..

aaa bbb ccc index.html 을 위와 같이 작성하자! container 라는 div 엘리먼트 내부에 item 이라는 3개의 div 엘리먼트가 있다. body{ margin: 0; padding: 0; } .container{ border: 1px solid red; } .item{ border: 1px solid blue; } style.css 를 위와 같이 작성하자! div 엘리먼트는 블록요소이기 때문에 웹 화면에서 한줄 전체를 다 차지한다. 그리고 스택처럼 세로로 쌓인다. * 컨테이너에 flexbox 적용하기 body{ margin: 0; padding: 0; } .container{ border: 1px solid red; display: flex; /* 컨테이너에 플럭스박스 적용 */..

* 히로쿠 파트 1. 히로쿠 가입하기 2. 히로쿠 저장소 생성하기 3. 로컬 PC 에 heroku-cli 설치하기 4. .git 폴더가 위치한 곳에서 heroku 원격주소 등록하기 5. 히로쿠 로그인하기 * 몽고 아틀라스 파트 1. 몽고 아틀라스 가입하기 2. 프로젝트 생성하기 3. 데이터베이스 생성하기 4. username, passoword 설정하기 5. cloud IP 주소 설정하기 6. 컬렉션 생성하기 7. 데이터 추가하기 8. 몽고 아틀라스 주소 확인하기 * index.js 파트 1. master 브랜치로 이동하기 2. cors 의 origin 옵션을 * 로 설정하기 3. 몽고 아틀라스 주소로 몽고 DB 접속주소 변경하기 4. 포트번호 동적으로 변경하기 5. package.json 파일의 scr..

* 연습과제 1 db.inventory.updateMany({status: "D"}, [{$set: { "status" : ["$size.h", "$size.w"] }}]) 달러($)와 점(.)는 size 도큐먼트의 프로퍼티 값을 조회한다. $를 사용하려면 반드시 {$set: } 부분을 배열([])로 감싸줘야 한다. * 연습과제 2 db.inventory.updateMany({status: "A", qty: {$lt: 50}}, { $set: { "size.h" : "big" } }) * 연습과제 3 db.inventory.updateOne({qty: 100}, {$set: {item: "아이템"}}) * 연습과제 4 db.inventory.updateMany({}, {$set: {users: ["vic..

import React from 'react' import { useParams, NavLink, useSearchParams, useLocation } from "react-router-dom"; // import posts from '../postData' import './Post.css' function Post({ movies }){ const params = useParams(); let [searchParams, setSearchParams] = useSearchParams() const applyActiveColor = ({ isActive }) => (isActive ? {color: 'orangered'} : {}) const changeQueryString = (e) => { cons..