๋ชฉ๋ก2022/02 (81)
whatisthis?
https://mywebproject.tistory.com/228(private) ์ง๋๋ฒ์ float ์์ ๋ก ์ ์ํด๋ณธ ๊ฒ์ flex-box๋ก ๋ง๋ค์ด๋ณด์! float ์ด์ฉ์ ๐ป * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; letter-spacing: -0.02em; } a { font-size: 18px; line-height: 20px; color: #8492A6; text-decoration: none; } ul { list-style-type: none; padding-left: 0; } .tab-menu::after { content: ''; display: block; clear: left; } .tab-menu ..
Interior Sheets Project - ๋์์ธ ์์ Figma Created with Figma www.figma.com ์์ง ๋ฐฑ์๋+DB์์ ์ ํ์ง ์์ ํ๋ก ํธ์๋+๊ฐ๋จํ js๋ง ์ ์ฉํ ๋จ๊ณ์. (22.02.24 ๊ธฐ์ค) ์๋๋ ๊ฐ ํ์ด์ง์ ๋ก์ง์ gif๋ก ์ ์ํ ๊ฒ ๐ป 1 / ๋ก๊ทธ์ธ ํ๋ฉด 2/ ๋ฉ๋ด์ฐฝ (๋ก๊ทธ์ธ ์ฑ๊ณต์)
220221 day 1 HTML audio ํ๊ทธ play, stop ๋ฒํผ์ ๋งํฌ์ ํด controls๊ฐ ์๋ ๋ฒํผ์ผ๋ก ์ ์ดํ๊ฒ ํ๋ค. (์คํ์ผ ์ ์ฉ์ ์ํด) index.html Your Browser Does NOT support the audio format! Now Playing ... 0:00 app.js // DOM obj const audioContainer = document.querySelector("#audioContainer"); const playBtn = document.querySelector(".playBtn"); const stopBtn = document.querySelector(".stopBtn"); const timeStamp = document.querySelector("...
Rainy-player - ์์ ์ ์๊ธฐ๊ฐ : 5์ผ (2022-02-21 ~ 02-25) - 1์ธ ํ๋ก์ ํธ HTML CSS JavaScript (์ถํ React๋ก ๋ณ๊ฒฝ) Design (Figma) - skill javaScript (Event Listener) Audio Object CSS Animation SVG (path ์ด์ฉ animation) MediaQuery Figma (icon ์ ์, ๋์์ธ draft) ๐ ๋ชฉํ - figma ์ฌ์ฉ๋ฒ ์ตํ๊ณ , svg ํ์ผ ๋ค๋ค๋ณด๊ธฐ. - css ์ ๋๋ฉ์ด์ ๊ธฐ๋ฒ ํ์ฉ - audio ํ๋ ์ด์ด ๋์์ธ (button๊ณผ onclick) - ๋น์๋ฆฌ ์์ loop๋ก ๊ณ์ ์ฌ์. - player์๋ ์ฌ์ ์๊ฐ ๊ณ์ฐํด์ ๋์ค๊ฒ ํจ. (Date ๊ฐ์ฒด๋ก ๊ณ์ฐ)..
CSS At-rules - ์์ฃผ ์ฌ์ฉํ๋๊ฒ๋ง ์ ๋ฆฌ. - ๋๋จธ์ง at-rules๋ ์๋ ์ธ๋ฑ์ค ์ฐธ์กฐ! 1 . @charset @charset CSS at-๊ท์น์ ์คํ์ผ ์ํธ์ ์ฐ์ด๋ ๋ฌธ์ ์ธ์ฝ๋ฉ์ ์ง์ ํ๋ค. ์คํ์ผ ์ํธ์ ์ฒซ ๋ฒ์งธ ์์์ฌ์ผ ํ๋ฉฐ ์ด๋ค ๋ฌธ์๊ฐ ์ ํ๋์ง ์์์ผ ํ๋ค. >> ์ฆ, ๋งจ ์ฒ์์ ๋์์ผํจ. @charset "utf-8"; 2. @font-face @font-face ๋ฅผ ์ฌ์ฉํ์ฌ ์นํ์ด์ง์ ํ ์คํธ์ ์จ๋ผ์ธํฐํธ(online fonts)๋ฅผ ์ ์ฉํ ์ ์๋ค. @font-face ๋ฅผ ์ฌ์ฉํ์ฌ ์นํ์ด์ง ์ ์์๊ฐ ์ํ๋ ํฐํธ๋ฅผ ์ฌ์ฉํ ์ ์๊ฒํจ์ผ๋ก์จ, ์ปดํจํฐ์ ์ค์น๋ ํฐํธ๋ง์ ์ฌ์ฉํด์ผํ๋ ์ ์ฝ์ด ์์ด์ง๊ฒ๋์๋ค. @font-face at-rule ์ CSS์ top-level์์ ๋ฟ ์๋๋ผ, CSS..
FlexBox css. FlexBox (display: flex) - (ไธ) FlexBox ๐ก key points dispaly: flex ์ ์ธ ๊ฐ๋ก์ ๋ ฌ? ์ธ๋ก์ ๋ ฌ? (flex-direction) ๋ฌด์กฐ๊ฑด ํ์ค์์ ๋ค ์ ๋ ฌ? (flex-wrap) ์์ดํ ์ ๋ ฌ(align-items, justify-contents) 1 / ํ๋ ์ค๋ฐ์ค ์ฌ์ฉ ์ ์ธ - ์ ๋ ฌํ๊ณ ์ ํ.. mywebproject.tistory.com ๐ก key points dispaly: flex ์ ์ธ ๊ฐ๋ก์ ๋ ฌ? ์ธ๋ก์ ๋ ฌ? (flex-direction) ๋ฌด์กฐ๊ฑด ํ์ค์์ ๋ค ์ ๋ ฌ? (flex-wrap) ์์ดํ ์ ๋ ฌ(align-items, justify-contents) flex๋ฅผ ํ๋ฉด ๋๊ฐ์ ์ถ์ด ์๋์ผ๋ก ์๊น. (๋์ ๋ณด์ด์ง๋ x) flex-dire..
FlexBox ๐ก key points dispaly: flex ์ ์ธ ๊ฐ๋ก์ ๋ ฌ? ์ธ๋ก์ ๋ ฌ? (flex-direction) ๋ฌด์กฐ๊ฑด ํ์ค์์ ๋ค ์ ๋ ฌ? (flex-wrap) ์์ดํ ์ ๋ ฌ(align-items, justify-contents) 1 / ํ๋ ์ค๋ฐ์ค ์ฌ์ฉ ์ ์ธ - ์ ๋ ฌํ๊ณ ์ ํ๋ ์์๋ฅผ ๊ฐ์ธ๋ ๋ถ๋ชจ(=container)์๊ฒ ์ ์ธํจ. display: flex; ํน์ display: inline-flex; flex๋ ์ฐ์ ์ 'box'์ ํ์ ์ด๋ค. inline-flex๋ ์ธ๋ผ์ธ๋ธ๋ญ๊ณผ ๋น์ทํ๊ฒ ๋์ํจ. 2 / ๊ฐ๋ก or ์ธ๋ก ์ ๋ ฌ (flex-direction) ๊ฐ๋ก row(default) ์ธ๋ก column +) ๊ทธ ์ธ์๋ row-reverse์ column-reverse๊ฐ ์๋ค. flex๋ฅผ ํ๋ฉด ๋๊ฐ์ ์ถ์ด..
React JS - Movie App project Detail.js (์์ ) import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; function Detail() { const [loading, setLoading] = useState(true); const [info, setInfo] = useState([]); const { id } = useParams(); const getMovie = async () => { const json = await ( await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`) ).json()..
1 / gh-pages ํจํค์ง ์ค์น npm i gh-pages 2 / package.json ์์ , "homepage": "https://thisisyjin.github.io/ReactJSPractice" ๋๋ถ๋ถ์ ์ด๋ ๊ฒ ์ถ๊ฐํ๊ณ , "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "deploy": "gh-pages -d build", โโ "predeploy": "npm run build" โโ }, scripts ๋ถ๋ถ์ deploy์ predeploy ๋ฅผ ์ถ๊ฐํจ. 3 / ํฐ๋ฏธ๋์ npm run deplo..
> id๋ผ๋ ์ด๋ฆ์ prop ์๋ก ๋ง๋ฌ Home.js import { useEffect, useState } from "react"; import Movie from "../components/Movie"; function Home() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const json = await ( await fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ) ).json(); setMovies(json.data.movies)..