본문 바로가기

TIL

[TIL-117] 위코드 16일차: 위스타그램 - 로그인 페이지 JS Javascript location.href = "이동할 페이지"; 개념 location 객체의 href 속성 값에 특정 페이지 주소를 입력하면, 입력한 페이지로 이동시켜준다. 사용법 function moveToMain(event) { event.preventDefault(); location.href = "main.html"; } btnLogin.addEventListener("click", moveToMain); cf) location.replace 더보기
[TIL-116] 위코드 15일차: 위스타그램 - 로그인 페이지 HTML 개념 태그에는 alt 속성이 있는데, 이미지가 로딩되지 않을 때 alt에 적어둔 값이 표시된다. 시각장애인의 경우 alt의 내용을 통해 이미지가 어떤 것인지 알 수 있다. 따라서 alt가 매우 중요하므로 src보다 먼저 작성한다. Javascript 삼항 조건 연산자 개념 조건부 삼항 연산자는 세 개의 피연산자를 취할 수 있는 유일한 연산자이다. ?(물음표)와 :(콜론)을 사용하여, 조건문 ? 참일 때 : 거짓일 때 의 형태로 작성한다. 조건을 제시하고 이 조건이 참일 때, 거짓일 때 실행할 코드를 뒤이어 씀으로써, if를 사용한 조건문을 줄여서 쓸 수 있다. 사용법 function inactiveBtn() { btnLogin.style.backgroundColor = "#c5e1fb"; btn.. 더보기
[TIL-115] 위코드 14일차: enemyRain 게임 - 유령 잡기 Javascript clearInterval() 개념 setInterval 함수의 반복 실행을 멈추려면, setInterval()을 변수에 할당해주고 멈추고 싶을 때 clearInterval(변수);를 실행하면 된다. 사용법 function moveGhost() { const ghostsArr = document.getElementsByClassName("ghost"); const ghostsLeng = ghostsArr.length; if (ghostsLeng > 0) { for (let i = 0; i < ghostsLeng; i++) { const ghost = ghostsArr[i]; let ghostTop = parseInt(ghost.style.top); if (ghostTop < 536) {.. 더보기
[TIL-114] 위코드 13일차: enemyRain 게임 - 내려오는 유령 Javascript setInterval() 개념 setInterval() 함수는 특정 동작(함수)를 특정 시간마다 실행시켜준다. setInterval(함수, ms 단위 초) 형태로 사용한다. 예시 function createGhost() { const ghostDiv = document.createElement("div"); ghostDiv.className = "ghost"; ghostDiv.style.left = `${Math.floor(Math.random() * 756)}px`; document.querySelector("#bg").appendChild(ghostDiv); setInterval(moveGhost, 1000); } setInterval(createGhost, 5000); setIn.. 더보기
[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-112] Javascript 클래스 객체지향 언어: 클래스 객체지향 클래스를 이용하여 사물/물체(object)들을 객체(object)로 정의해서 프로그래밍하는 것이 자연스럽다. 더 편하고 유연한 프로그래밍을 할 수 있다. 개념 클래스는 연관 있는 데이터를 묶어놓는 컨테이너라고 생각하면 된다. 데이터가 들어있지는 않고 데이터를 받을 수 있는 템플릿이다. 즉, 클래스는 객체의 틀만 만들어둔 것이고, 이 틀에 데이터를 넣어 찍어낸 객체가 인스턴스이다. 클래스는 정의만 한 것이라 메모리에 올라가지 않는다. 반면, 실제 데이터가 들어간 객체는 메모리에 올라간다. 구성 : 속성(field), 함수(method). 데이터 클래스 : fields로만 구성된 클래스. 캡슐화 : 클래스 안에 내부에서만 보이는 변수와 외부에서도 보이는 변수로 나눔. 사용법 .. 더보기
[TIL-111] 노마드코더 그림판(JS) 클론코딩 #2.4~#2.7 (완강) #2 자바스크립트 브러시 사이즈 range 에 "input" 이벤트 event.target.value로 input의 range 값 구함. ctx.lineWidth 값을 range 값으로 override. filling mode mode 버튼 fill : 전체 캔버스에 색상 채움. paint : 캔버스에 선 그림. "fill"이라 써있는 버튼 클릭하면 "paint"로 바뀌게 함. filling 변수 만들어, false/true 껐다켰다 함. fill 실행 fillRect(x, y, w, h) : width와 height로 결정된 사이즈로 (x, y) 위치에 색칠된 사각형 그림. fillStyle : line을 위한 strokeStyle로는 사각형의 색깔을 바꾸지 못함. 이미지 저장 캔버스 > 우클릭 : ".. 더보기
[TIL-110] 노마드코더 그림판(JS) 클론코딩 #1.0~#2.3 #1 셋업 + 스타일 레포지토리 만들기 README 파일 추가 .gitignore는 node로 추가 내 pc에 복제 : git clone https://github.com/JUNSEULGI/paintjs (레포지토리 주소) 꼭 명령어로 안 해도 됨. 프로젝트 셋업 index.html에 app.js(에 로)와 styles.css(에 로) 연결. 깃 커밋하기 git add . git commit -m "Initial Commit" [에러] 깃헙 계정이 연결되어있지 않은 듯... 더보기 더보기 *** Please tell me who you are. Run git config --global user.email "you@example.com" git config --global user.name "Your N.. 더보기

티스토리툴바