본문 바로가기

HTML

[쫌쫌따리 스터디] 초간단 오픈채팅방 복기 사이트 만들기 완성!!
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 어중간한 초급자 탈출하기 #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) 문자열 사이에 변..
스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #1~5
html+CSS+JS 2021. 7. 7. 스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #1~5 인프런에서 이벤트를 한다길래ㅎㅎ 무료 수업도 받았겠다, 회사 지원으로 코드잇 수업도 있겠다. 안 그래도 미루던 판국이라 스터디를 진행하기로 함. 스터디 리더에겐 5만포인트, 스터디원에게는 2만포인트 스터디 인원은 최소 3명 근데 이거 선착순 60팀인듯... 여튼 사람을 딱 3명까지만 모아서 스터디를 진행하기로 했다. 현재까지 5회를 진행했고 4회차부터 어라 싶었는데 5회차부터는 확실히 정리가 필요할 것 같아서 블로그 다시 부활... #1회차 스터디 규칙 확정 / html, css의 기본 복습 -1- (box모델, display, position) HTML과 CSS를 대충 알 것 같은데 Grid는 잘 모르겠고, 의 종류와 같은 걸 잘 모르겠고... jQuery도 배운 거 같은데 잘 못 쓰겠고... SASS..
[CSS] 이미지 중심점 바꿔서 회전 시키기 (transform:rotate, transform-origin)
html+CSS+JS/html+CSS 2019. 6. 27. [CSS] 이미지 중심점 바꿔서 회전 시키기 (transform:rotate, transform-origin) 선택자 {transform:rotate(회전값)} : 이미지나 박스에 한하여 회전값 주기. (회전값 단위=deg) 선택자 {transform-origin:중심점 위치 설정} : 회전 시, 회전 축 설정. left, right, top, bottom, center 설정 가능 마우스를 올렸을 때 돌도록 만들기 (선택자:hover)
[CSS] position: absolute, relative의 연관성
html+CSS+JS/html+CSS 2019. 6. 25. [CSS] position: absolute, relative의 연관성 position:relative 1 2 3 부모 요소에 position:relative가 들어가는가? 부모 요소에 position:relative가 안 들어간 경우(좌) 부모 요소에 position:relative가 들어간 경우(우)

티스토리툴바