whatisthis?

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