본문 바로가기

위코드

[TIL-113] 위코드 12일차: enemyRain 게임 - 배경 이미지와 캐릭터 이동 CSS Image Sprite 개념 여러 개의 이미지를 합쳐서 하나의 이미지 파일에 저장하여, 그때그때 원하는 부분만 잘라서 사용하는 방식이다. 페이지에 여러 가지 이미지가 필요해도 브라우저가 해당 이미지 파일 하나만 다운받으면 되기 때문에 서버 요청 과정이 효율적이다. 또한 수시로 이미지가 바뀌어야할 경우, 아무리 로딩이 빨라도 새로운 이미지 파일을 받아오려면 시간이 걸려서 깜박여 보이는 효과가 발생하는데 이를 막아준다. 사용법 .front-face { background-position: 0 0; } .right-face { background-position: 35px 0; } .left-face { background-position: 70px 0; } .back-face { background-.. 더보기
[TIL-109] 위코드 8일차: JS replit 27~33 "ES6 추가 기능", "DOM" Javascript 화살표 함수 개념 arrow function은 function이라는 키워드 대신 => 를 사용하여 함수를 표현하는 방식이다. ES6에서 새로 나온 함수 표현법이다. 사용법 1. 함수명이 없는 함수 //ES5 function() {} //ES6 () => {}​ 2. 함수명이 있는 함수 //ES5 //함수 선언식(Function Declaration) function getName() {} //함수 표현식(Function Expression) const getName = function() {} //ES6 const getName = () => {}​ 화살표 함수에서 인자가 하나일 때는 소괄호를 생략할 수 있다. 예) const getName = (name) => { }; 만약 함수에 .. 더보기
[TIL-108] 위코드 7일차: JS replit 23~26 Javascript 스코프 개념 스코프는 변수가 쓰일 수 있는 범위를 의미한다. 종류로는 블록 스코프와 함수 스코프가 있다. 블록(block)은 { } (중괄호)로 감싸인 영역이다. function이나 for문, if문 등에서 { }가 하나의 블록인 셈이다. 이 블록 내부에서 정의된 const, let 변수는 블록 내부에서만 사용할 수 있는 블록 스코프에 해당하며, 이 변수를 지역변수(local variable)라고 부른다. 블록 밖은 global scope로, 이 영역에서 정의된 전역변수(global variable)는 코드 어디서든 접근 가능하다. namespace는 변수의 이름을 사용할 수 있는 범위이다. scope이기도 하지만 변수의 이름에 대해서 namespace라고 부른다. 전역변수를 남용하면.. 더보기
[TIL-107] 위코드 6일차: JS replit 22 Javascript Math 객체 개념 Math 안에 다양한 수학 계산 메서드가 담겨있다. 예를 들어 Math.random()은 0 이상 1 미만의 소수를 랜덤으로 만들어준다. (이때까지 1도 포함되는 줄 알았는데 0.999999999까지만 나온다고 한다.) 보통 이 값을 그대로 사용하기보단, 원하는 범위가 있을 때 그 최대값을 이 값에 곱하고 다시 Math 객체 안의 메서드를 이용해서 정수로 만든다. 참고) JavaScript Math Object https://www.w3schools.com/js/js_math.asp 사용법 예) 최소값(min), 최대값(max)을 받아 그 사이의 랜덤수를 return 하는 함수 function getRandomNumber (min, max) { const rando.. 더보기
[TIL-106] 위코드 5일차: JS replit 21 / 자바스크립트 세션 / 개발자 도구 Javascript new Date() 개념 new 연산자에 Date 생성자를 사용하여 날짜 객체를 생성할 수 있다. 그럼 컴퓨터는 GMT 기준으로 현재 시간을 알려준다. (한국 표준시는 GMT+0900이다.) 이 값을 그대로 사용하기보단, 이 값에 메서드를 사용해서 년/월/일/시/분 등 필요한 정보를 받아서 쓴다. 특정 날짜를 인자로 보내주면 해당 날짜의 Date 값을 받을 수 있다. 사용법 let rightNow = new Date(); let year = rightNow.getFullYear(); let month = rightNow.getMonth()+1; let date = rightNow.getDate(); let day = rightNow.getDay(); let currentHour = r.. 더보기
[TIL-105] 위코드 4일차: JS replit 8~20 Javascript 비교 연산자 개념 연산자 양쪽의 두 값을 비교한다. 비교 연산자에는 동치 연산자와 관계 연산자가 있다. 동치 연산자 : 같다는 의미의 ==, ===, 같지 않다는 의미의 !=, !== 가 있다. "=="는 느슨한 동등 비교 연산자로, 데이터 타입은 달라도(예. "3"과 3) 값이 같으면 성립한다. "==="는 좌항과 우항의 값이 데이터 타입까지 완벽히 같을 때 성립하는 일치 연산자이다. 보다 엄격하게 비교한다. 관계 연산자 : 숫자에 대해 크기를, 문자열에 대해 사전순을 비교하는 >, =, 더보기
[TIL-104] 위코드 3일차: JS replit 1~7 / HTML&CSS wrap-up Javascript 약속어 개념 console.log()나 alert()처럼 자바스크립트에 기본적으로 존재하는 함수가 있다. 이런 함수를 정의하는 데 쓰인 단어는 약속되어있다고 하여, 약속어라고 한다. 이미 존재하기 때문에 console이나 alert라는 이름로는 새로운 함수를 만들 수 없다. 매개변수와 인자 개념 함수를 선언할 때 함수 이름 옆 () 안에 매개변수(parameter)를 써두면 함수를 실행할 때 그 자리를 통해 외부의 값을 받아올 수 있다. 이로써 외부의 값을 매개변수로 저장하여 함수 안에서 다른 변수와 같은 방식으로 사용하여 코드를 작성할 수 있다. 그리고 함수가 실행될 때 () 안에 실제로 들어오는 값, 즉 외부에서 받아온 이 값을 인자(argument)라고 부른다. parameter.. 더보기
[TIL-103] 위코드 2일차: HTML&CSS replit 14~24 HTML table 개념 html 코드를 작성하여 표를 그리고 싶을 때 사용하는 태그이다. 은 , , 와 함께 사용한다. 사용법 Dog Cat 종 Canine Feline 짖는소리 Bark Meow Immature Puppy Kitten ↓ HTML 삽입 미리보기할 수 없는 소스 태그 안에 table row를 뜻하는 을 사용해 행을 만들고, 그 안에 table data를 뜻하는 를 사용해 각각의 셀을 완성하면 된다. 테이블 열의 제목을 쓸 행은 안에 table heading을 뜻하는 를 사용하면 된다. 서식도 자동으로 가운데 정렬과 굵게가 적용된다. 테이블 행의 제목을 쓰고 싶을 땐, 같은 를 사용하되 마찬가지로 을 사용해 행 단위로 표를 작성하면서 첫번째 셀 위치에(첫번째 data 앞) 입력하면 된다... 더보기

티스토리툴바