비전공자 개발일기

0% @import url('https://fonts.googleapis.com/css?family=Ubuntu'); * { box-sizing: border-box; } body { font-family: 'Ubuntu', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .bg { background: url('./1.jpg') no-repeat center center/cover; position: absolute; top: -30; left: -30; width: calc(100vw + 60px); height: calc(100vh + ..

배너 닫기 const banner = document.getElementById("banner"); const img = banner.getElementsByTagName("img"); const toggle = document.getElementById("toggle"); const sound_btn = document.getElementById("sound_btn"); // 배너의 높이 값 변수 let banner_height = getComputedStyle(banner).height; let cast = [] // 풍선 객체 // 풍선 객체 생성 함수 function set_balloon(num) { // 풍선의 속성 값을 랜덤으로 생성 let x = Math.floor(Math.random() ..

Desktop Style 3D Page page1 page2 page3 page4 const wrapper = document.querySelector(".wrapper"); const page = document.querySelectorAll(".page"); const indicator = document.getElementById("indicator"); let indicator_li = indicator.querySelectorAll("li"); let yDeg = 0; let indicator_num = 1; let indicator_length = page.length; let w = page[0].offsetWidth; let page_angle = 0; let page_vector = 0;..

class Codelab extends React.Component { render() { let text = "I'm IRONMAN" let style = { backgroundColor: "aqua" } return( {text} ); } } class App extends React.Component { render() { return( ) } } ReactDOM.render(,document.querySelector("#root")) ------------------------------------------------------------------- class Codelab extends React.Component { render() { return( Hello {this.props.name..

계산기 caption { font-size: 32px; margin: 20px; } table { width: 320px; text-align: center; margin: 10px auto; } table, th { background: #333; } th { padding-right: 10px; height: 80px; } td { height: 75px; text-align: center; } th > input { width: 100%; border: none; background: #333; color: #fff; text-align: right; font-size: 48px; } td > input[type = "button"] { width: 100%; height: inherit; colo..

TV Show Search Search const form = document.querySelector("#searchForm") form.addEventListener("submit", async (e) => { e.preventDefault(); const searchTerm = form.elements.query.value; const res = await axios.get(`https://api.tvmaze.com/search/shows?q=${searchTerm}`); // console.log(res.data[0].show.image.medium); makeImages(res.data); form.elements.query.value = ""; }) const makeImages = (show..

BULMA https://bulma.io/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free. bulma.io CSS만을 위한 프레임워크 1. JQuery를 사용하지 않기 때문에 Bootstrap보다는 조금은 이해가 쉬운 클래스 2. 쉬운 CUSTOMIZE 3. 내가 작성한 CSS와 충돌이 없음 4. 브라우저 호환성이 낮음 npm install bulma TAILWIND https://..

map() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map find() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find findIndex() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex filter() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global..