syleemomo의 IT 블로그 syleemomo의 IT 블로그

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; /* 컨테이너에 플럭스박스 적용 */..

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..

* 연습과제 0 import './App.css'; import Modal from './Modal'; import Button from './Button'; import { useState } from 'react'; function App() { const [open, setOpen] = useState(false) const openModal = () => { setOpen(true) } const closeModal = () => { setOpen(false) } return ( Add Todo You want to add new todo ? todo name: todo description: Add Close ); } export default App; * 연습과제 1 import './App...

* 연습과제 1 import './App.css'; import React, { Component } from 'react'; import youtubeVideos from './youtubeVideos' import Button from './Button' class App extends Component { state = { index: 0 } decreaseIndex = () => { const nextIndex = this.state.index - 1 this.setState({index: (nextIndex { const nextIndex = this.state.index..

* 연습과제 1 import './App.css'; import React from 'react' import styled, { css } from 'styled-components' const Button = styled.button` all: unset; color: white; cursor: pointer; border-radius: 5px; font-weight: bold; margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; &:hover{ opacity: 0.7; } /* 버튼의 크기 설정 */ ${props => { const size = props.size || 'medium' switch..