whatisthis?

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

React JS - Movie App project (part 2) { fet.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://mywebproject.tistory.com/355" data-og-url="https://mywebproject.tistory.com/355" data-og-image="https://scrap.kakaocdn.ne.. mywebproject.tistory.com 🔺 지난시간 진행사항 - props 이용 - component 구분 (App.js / Movie.js / Home.js / Detail.js) - 디렉터리 구분 (components / route) 1/ 우선 React Router을 설치해..