본문 바로가기

전체 글130

wecode 사전스터디(8/4) 로그 개발한 것/배운 것 vanilla Javascript 30days 프로젝트 - 03. Playing with css variables and JS 개요 : spacing, blur, base color 요소를 설정시, 하단 이미지의 css 스타일이 함께 변경되는 웹페이지 개발 필요 기능 1) html + css Update Variables with Spacing: Blur: Base Color :root { --base: #ffc600; --spacing: 10px; --blur: 0px; } img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } body { text-align: center; backgr.. 2020. 8. 4.
wecode 사전스터디(8/3) 로그 개발한 것/배운 것 vanilla Javascript 30days 프로젝트 - 02.JS + CSS Clock 개요 : 현재 시간을 실시간으로 받아와서 시계를 표기 개발 필요 기능 1) html + css (시침, 분침, 초침의 기본 css 및 시간 변수에 따라 css 개발 필요) 2) 자바스크립트 - 시간 함수 (Date) - 시간 함수에 따른 css 변경 const secondHand = document.querySelector(".second-hand"); const minuteHand = document.querySelector(".min-hand"); const hourHand = document.querySelector(".hour-hand"); function setDate() { const.. 2020. 8. 4.
wecode 사전스터디(8/2) 로그 개발한 것/배운 것 vanilla Javascript 30days 프로젝트 시작 - 01.drum kit 개요 : 유저의 키보드 입력에 맞춰 특정 사운드를 재생(+해당 키 아이콘의 디자인을 transition)하는 웹사이트 개발 필요 기능 1) html + css (key의 기본 css 및 key 입력시의 변경되는 css 개발 필요) 2) 자바스크립트 - key 입력시 음악 파일 재생 기능 - 음악 재생 후 기본값으로 복귀하는 기능 function removeTransition(e) { e.target.classList.remove("playing"); } function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.k.. 2020. 8. 2.
wecode 사전스터디(7/31) 로그 개발한 것/배운 것 vanilla Javascript를 사용한 영화 예약 사이트 완성 배운 개념 1. 자바스크립트 spread operator (참고) ... 문법을 사용하여 배열의 요소들을 그대로 가지고 올 수 있는 자바스크립트 기능 const arr1 = [1,2,3,4,5]; const arr2 = [...arr1,6,7]; console.log(arr2); //output = [1,2,3,4,5,6,7]; 2. .forEach와 .map의 차이점 .forEach : 배열의 각 요소에 대해 지정한 함수를 수행 .map : 배열의 각 요소에 대해 지정한 함수를 수행 후 새로운 배열을 return 3. JSON.stringfy 객체 또는 숫자값을 string 타입으로 변경할 수 있는 기능. 반대로 JS.. 2020. 8. 1.
자바스크립트 객체(object) 자바스크립트 객체 (object) 객체 객체란 여러 속성을 하나의 변수에 저장할 수 있는 데이터 타입이며, key:value 구조로 정의할 수 있다. 객체의 생성 (예시) let jisungPark = {'height': 178, 'team': 'Manchester United', 'country': 'Korea'}; let jisungPark = {}; jisungPark['height'] = 178; jisungPark['team'] = 'Manchester United'; jisungPark['country'] = 'Korea'; var jisungPark = new Object(); jisungPark['height'] = 178; jisungPark['team'] = 'Manchester Uni.. 2020. 7. 30.
wecode 사전스터디(7/29) 로그 개발한 것/배운 것 html, css, vanilla javascript를 이용하여 영화 예약 사이트를 만드는 프로젝트 수행 영화 예약 사이트 만들기 1. html 더보기 Pick a movie: Avengers:Endgame ($10) Joker ($12) Toy Story4 ($8) The Lion King ($9) N/A selected occupied You have selected 0 seats for a price of $0 2. CSS 더보기 @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap"); * { box-sizing: border-box; } body { background-color.. 2020. 7. 29.
wecode 사전스터디(7/28) 로그 개발한 것/배운 것 개강 전에 Vanilla Javascript로 이것저것 만드는 연습을 해야겠다고 생각해 udemy강의를 새로 수강하였다. 회원가입 폼 만들기 1. html 더보기 Register With Us Username Error message Email Error message Password Error message Confirm Password Error message Submit - 폼 내에는 총 4개의 label, input, 그리고 에러 메시지를 표기하는 small이 존재한다. 2. css 더보기 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap"); :root { --suc.. 2020. 7. 28.
github 관련 링크들 github 사용에 있어서 도움을 받은 컨텐츠들을 저장하는 게시글 1. https://www.zerocho.com/category/Git/post/580f633046f4fe09815b72a5 (Git) Git 저장소 생성(init), 최초로 commit하기 안녕하세요. 이번 시간에는 진행중인 프로젝트에 git 저장소를 생성하고, 최초로 commit을 해보겠습니다. 깃 명령어를 사용하는 방법은 여러가지가 있지만 저는 주로 명령프롬프트(CMD)를 사용합니 www.zerocho.com 터미널에서 신규 git 저장소를 생성하고 신규 commit과 commit한 사항을 저장소에 push하는 방법에 참고 2. https://velog.io/@recordboy/%EA%B9%83%ED%97%88%EB%B8%8C-%ED.. 2020. 7. 28.
wecode 사전스터디(7/27) 로그 개발한 것/배운 것 Tap 페이지 만들기 3주차 자바스크립트 과제로, html, css 페이지를 만들고, 자바스크립트로 tab을 구현하여 특정 버튼을 클릭시 해당 버튼에 맞는 내용으로 전환하는 기능을 구현하였다. (유튜브 링크) 1. HTML 더보기 about Coding sentence examples. He was using coding more advanced than any she'd ever seen. history vision goals history I'm baby wolf pickled schlitz try-hard normcore marfa man bun mumblecore vice pop-up XOXO lomo kombucha glossier bicycle rights. Umami ki.. 2020. 7. 28.