본문 바로가기

html+CSS+JS

[쫌쫌따리 스터디] 초간단 오픈채팅방 복기 사이트 만들기 완성!!
html+CSS+JS/html+CSS 2023. 5. 1. [쫌쫌따리 스터디] 초간단 오픈채팅방 복기 사이트 만들기 완성!! 몇개월 전, 카톡이 오류가 생겼는지 갑자기 멈추면서 아무것도 안 되고, 이게 반복됐습니다... 고민 끝에 다시 설치했지만 싹 다 날아가버린 오픈카톡 내용... 온라인 타로나 상담 내용 등 복기해두고 싶은 내용들이 있다 보니 상대방에게 부탁해서 txt파일을 받는데는 성공했지만... 보는데 눈알이 빠질 것 같았습니다... 거기다 대화분량이 어마무시해서ㅠ 그래서!! 카톡 오픈채팅 내보내기 한 txt를 카톡 화면처럼 볼 수 있도록 만들어 보았습니다 아래처럼!! 킹지's 카톡 복원 편하게 보기 majestic-torte-16c3b9.netlify.app 코드 숨긴 건 하나도 없습니다!! 헤더 우측의 버튼을 눌러서 주간 모드, 야간 모드로 나눠서 볼 수 있고 (색상 팔레트는 순전 내 취향:3) 처음부터 볼지, 끝부..
[쫌쫌따리 스터디] 피하기 게임(dodge) 만들어보기 #1 - player 캐릭터 움직이게 만들기
html+CSS+JS 2023. 4. 9. [쫌쫌따리 스터디] 피하기 게임(dodge) 만들어보기 #1 - player 캐릭터 움직이게 만들기 계산기, 계산기 수학게임, ㅋ톡 대화 보기에 이어서 테트리스보다 이게 더 쉬우니 한 번 만들어보는게 어떻겠냐는 말을 들어 이번 쫌쫌따리 스터디로는 피하기 게임을 만들어보려 합니다. 피하기 게임은 형태가 참 다양합니다. 세로로 움직여서 오른쪽에서 날아오는 무언가를 피하는 게임도 있고, 무수히 쏟아지는 공을 바닥에서 캐릭터가 달리면서 피하기도 하고 랜덤으로 사방에서 쏟아져 나오는 총알(?)을 우주선을 상하좌우로 움직여 피하기도 합니다. 저는 우측처럼 상하좌우 랜덤으로 움직이고, 피해야 하는게 시간이 갈수록 많이 나오는 걸 하려고 합니다. 우주선말고 다른 귀여운 거 없을까 싶어서 고민하다가 슬라임을 플레이어 캐릭터로 하고, 쏟아져 나오는 검정하트(unlike)를 피하는 거로 만들려고 해요. 기능 요점 1. 슬..
스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #11 - 메소드/for…in 반복문/for…of 반복문/다차원 배열
html+CSS+JS 2021. 12. 14. 스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #11 - 메소드/for…in 반복문/for…of 반복문/다차원 배열 #11회차 메소드, for…in 반복문, for…of 반복문 1. 메소드(Method) - 객체의 속성 값에 함수가 할당된 경우, 해당 속성을 메소드(method)라고 부릅니다 // 형태 // {메소드 이름(methodName): function(){동작 부분}, {methodName: function(){동작 부분},}; let insa = { sayAn: function(){ console.log('안녕!'); }, sayHaseyo: function(name){ console.log(`안녕하세요, ${name}!`); }, sayHello: function(){ console.log('헬로!'); } }; // 실행시 형태 // objectName.methodName(); insa.sayAn(); ..
스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #10 - 객체/속성값 접근/속성 추가,수정,제거,포함 여부
html+CSS+JS 2021. 12. 14. 스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #10 - 객체/속성값 접근/속성 추가,수정,제거,포함 여부 #10회차 객체, 객체 다루기 1. 객체(Object) - String, Number, Boolean 과 같은 데이터 유형 중 하나라고도 볼 수 있음 - 자바스크립트의 거의 모든 문법에 녹아있음 // 형태 // { 이름(key): 값(value), 이름(key): 값(value) } { name: 'KingJI', bornYear: 2021, isVeryFantasic: true, worstDay: null, bestDay: { title: '오늘은', description: '햅삐' } } 1) 속성 이름(key)과 값(value)을 뭉쳐서 속성(property)라고 부름 (ex. 위에서 0번째 속성 = name: 'KingJI') 2) 이름(property name = key) - 문자, 밑줄(_),..
스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #9 - 배열, 배열 메소드(splice, indexOf, shift,pop,push,unshift 등)
html+CSS+JS 2021. 12. 9. 스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #9 - 배열, 배열 메소드(splice, indexOf, shift,pop,push,unshift 등) #9회차 (사실 복습을 안 해서 내용이 훅 건너뜀... 가능하면 나중에 복습하겠소...) 배열과 배열 관련 메소드 1) 배열 - 객체 중 하나. 값들의 나열을 한번에 저장하는 종류의 객체. index(순서)를 요소 name처럼 사용 가능 let emotion = ['love', 'like', 'dislike', 'hate', 'happiness', 'sadness']; console.log(emotion[0]); // love console.log(emotion[4]); // happiness * index는 0부터 세기 때문에 0번째, 1번째, 2번째 순서라고 생각하면 편하다. 2) 배열 메소드 - 요소 추가&제거 메소드: splice(startIndex, deleteCount, item) : star..
스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #8 (if문, else문, else if문, switch문)
html+CSS+JS 2021. 8. 8. 스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #8 (if문, else문, else if문, switch문) #8회차 if문, else문, else if문, switch문 1) if문 조건에 맞으면(true값을 나타내면) 행동문이 실행된다. if(조건 내용) { 조건이 맞는 경우, 실행되는 코드(행동문) } ex) 물의 온도(변수 temperature)가 100℃ 이상인 경우, 물이 끓습니다. let temperature = 89; if(temperature >= 100) { console.log('물이 끓습니다.'); } temperature를 89로 해두었기에 if문의 조건인 100보다 크거나 같다는 조건에 부합하지 않아 행동문이 실행되지 않습니다. let temperature = 105; if(temperature >= 100) { console.log('물이 끓습니다.'); } temperature를 1..
스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #7 (할당 연산자, 함수 실행 순서, return문 이해, 변수의 scope(영역), 상수(const))
html+CSS+JS 2021. 8. 7. 스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #7 (할당 연산자, 함수 실행 순서, return문 이해, 변수의 scope(영역), 상수(const)) #7회차 할당 연산자, 함수 실행 순서, return문 이해, 변수의 scope(영역), 상수(const) 1) 할당 연산자 - 등호를 사용하면 좌측에 우측의 값을 할당해주게 된다. 즉, 등호는 같은 것을 뜻하는 '일치'와는 다르게 사용된다. let x = 5; // x의 값은 5 x = x - 2 ; // x의 값은 5 - 2 = 3 x = x + 1; // x의 값은 3 + 1 = 4 console.log(x); // 따라서 콘솔에는 4가 출력이 된다. - 복합 할당 연산자 : 자주 쓰이는 사칙연산(+, - , *, /, %, **)을 더 간략하게 쓸 수 있는 연산자. 동일한 값을 나타내는 연산자 ( let x = 8; ) x에 할당되는 값 x = x + 2 x += 2 9 x = x - 3 x -=..
스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #6 (형변환(2), 백틱으로 문자에 변수 포함하기, null/undefined)
html+CSS+JS 2021. 8. 4. 스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #6 (형변환(2), 백틱으로 문자에 변수 포함하기, null/undefined) #6회차 형변환(2), 백틱으로 문자에 변수 포함하기, null/undefined 1) 형변환(2) - 사칙연산(+, - , *, /, %, **) 중 string을 잇는 역할을 하는 '+'를 제외하고는 모든 형태를 숫자로 받아들인다. - 관계 비교 연산(=)에서도 도출되는 값만 boolean값일 뿐, 내부의 형태는 전부 숫자로 받아들인다. - 같음 비교 연산(===, !==, ==, !=)에서는 형태까지 일치하는지, 값만 동등한지 여부에 따라 다른 boolean값이 나온다 console.log(1 === '1'); false console.log(1 === true); false console.log(1 == '1'); true console.log(1 == true); true 2) 문자열 사이에 변..

티스토리툴바