전체 글

[드림코딩 : browser101] 게임 만들기 실전 1 🍝

HTML 일단 게임 화면이 보이는 창과 시작 버튼. 시간 버튼. 남은 당근의 개수 가 필요할 것이다. HTML 0:10 10 + .game 안에 bug와 carrot이 나올 공간 박스를 마련해주었다( 아래 삽입) CSS background-position: center; background-size: cover; background-repeat: no-repeat; 이렇게 하나하나 쓸 필요 없다 background: url(img/background.png) center/cover no-repeat; background를 이렇게 편하게 모아서 쓸 수 있다. 편의를 위해 ground에 background color을 주고 진행했다. JS 해야 할 일 1. 시작 버튼 - 버튼을 누르면 버튼의 모양이 바뀐다 ..

[FISH-NEWS] 프로젝트 기록

주저리 날씨가 갑자기 추워져서 능률 떨어지는중 여름아가지마... 가을옷 좋기는 한데 너무 추워... 2주에 한번씩 기력회복을 위해 3일간 푹 쉬어주는데 이번은 쉬고 나서도 너무 힘들어서 페이스를 다시 돌리기가 힘들었다. 저번주 금~일을 쉬고 월요일은 대충 보내고 화요일은 식재하러 가서 코딩할 시간이 많지 않았다. + 수요일에 쓰고 있었는데 동생이 방에 와서 노느라 못썼다 ㅎ 내가 만드는 프로젝트도 재미있지만 수업을 듣고 새로운 것을 배우는 것도 너무 재미있어서 수업듣기에 많은 시간을 할애해서이기도 하다. 오늘 목표 오랜만이어서 그런지 목표는 생각하지 않고 했다 대충 생각한 목표는 breaking 부분에 있는 문제들을 해결하는 것 문제 1. breaking 부분 안에 들어있는 이미지 사이즈가 각각 달라서 ..

[FISH-NEWS] 프로젝트 기록

주저리 요즘 해가 잘 안든다... 드림코딩 엘리 새로운 강의를 오늘부터 수강해서 프로젝트는 남는 시간에 잠깐씩 만지려고 했는데 생각보다 오늘 강의 할당량을 빨리 끝내서 살짝 만졌다 해봤자 한시간정도지만 오늘 목표 큰 목표는 없이 부족하거나 이상한 부분을 정리하는 것을 목표로 두었다 문제 상황 1. main_left : gentleman's fashion부분 꿀렁거림 영상을 보면 알 수 있듯이 :hover과 active 클래스가 들어가는 곳에 마우스를 가져다대면 꿀렁거린다 문제 해결 과정 #mainNews__left .mainNews__item .active, #mainNews__left .mainNews__item h3:hover{ border:3px solid white; background-color..

[FISH-NEWS] 프로젝트 기록

주저리 오늘 나쁘지 않았다 생각보다 js부분을 빠르게 했다 css가 문제였지 js는... 최소한 가동은 되는구나... 코드가 얼마나 깨끗하고 효율적인지의 문제는 덮어두고 일단 가동이 된다! 나는 아직 주니어조차 아니고 그냥 걸음마중인 아기나 다름없기 때문에 작은 성과에도 큰 칭찬을 해줘야 한다. 어쨌든 칭찬! 오늘 목표 오늘의 목표는 game section을 뺀 나머지 부분 css를 동적으로 만들고 js 중 breaking 부분만 하는 것이 목표였다 진행 상황 css는 분명 완벽하지는 않지만 어느 정도 동적으로 잘 구현되었다. 스마트폰에서 화면이 깨지는 것은 js까지 마무리 한 다음에 다시 손보기로 했다. 하지만 생각보다 breaking 부분을 빠르게 마무리하고 main left 부분까지 완료했다. 문제..

[FISH-NEWS] 프로젝트 기록

주저리 최대 5일 안에 완성하려고 했는데 할 수 있겠지..? 요즘 너무 약속이 많아서 그런지 하루종일 코딩에만 집중하거나 쉴 수 있는 시간이 없었다 수면의 질도 낮음. 어제 저녁에 정말 힘들었는지 임파선염도 도지고 여튼 몸상태 쓰레기... 하지만 나는 항상성이 강한 사람이기도 하고 몸상태 때문에 해야 할 일을 못하는 상황을 정말 싫어해서 웬만하면 그냥 하지만 오늘은 너무 힘들어서 공부하다 말고 책읽다가 낮잠잤다 자고 일어나니까 그나마 할만해져서 다행 휴 오늘 목표 딱히 오늘 목표같은게 없었는데 내일부터는 하루 목표를 정하고 해야 할 것 같다 진행 상황 CSS breaking 부분까지 반응형으로 완료 내일 game 부분을 뺀 나머지 부분 css도 끝내는게 목표다 문제상황 1. js를 활용해서 반응형으로 만..

[FISH-NEWS] 프로젝트 기록

주저리 일단 글을 계속 안 쓰기는 했는데 지속적으로 공부를 하기는 했다 HTML CSS같은 경우는 어느 정도 궤도에 올랐다고 생각하지만 JS는 글쎄 조금 더 노력해야 할 것 같다 일단 목표는 이번 달 안으로 궤도에 진입하는 것이기는 하지만 될런지 지금까지 해 온 것처럼 하면 잘 될 것 같기는 하다 드림코딩 앨리와 노마드코더 무료강의들을 일단 열심히 수강했고 이제 강의를 구매해서 들을 예정 어쨌든 지금까지 배운 내용들을 바탕으로 혼자 프로젝트를 하나 수행해보기로 했다. 처음 코딩이란 걸 접해보고 HTML에 을 처음 작성했을 때 열의에 차서 혼자 이것저것 만들어봤는데 지금 보면 음.. 분명 두 달 전 정도밖에 되지 않았지만 아주 부끄러운 퀄리티다 당연하게도 깃허브 연동은 꿈도 꾸지 않았다 이상이 높은 편인지..

[프론트앤드 공부기록] Javascript 기초 4

16. 객체와 메소드의 관계 const user = { name : 'Mike', sayHello : function(){ console.log(`Hello, I'm ${user.name}`); // 이렇게 user.name을 넣을 수는 있지만 문제가 발생할 수 있음. 그럴 때에는 this라는 키워드를 쓰면 된다. } } user.sayHello(); //로 호출하면 이 user가 sayHello 메소드의this가 된다 // "Hello, I’m Mike" 예제 sayHello = function(){ console.log(`Hello, I'm ${this.name}`); } let boy = { name : 'Mike', sayHello, } let girl = { name : 'Jane', sayHe..

[프론트앤드 공부기록] Javascript 기초 3

11. 함수(function) function sayHello(name){ console.log(`Hello, #{name}`); } function : 함수 sayHello : 함수명 name : 매개변수. 매개변수는 없을수도, 하나일 수도, 두 개 이상일 수도 있다. 두 개 이상이면 쉽표로 구분한다. ex) console.log(name1, name2, name3) function sayHello(name){ let msg = `Hello, 감자야`; if(name){ msg = `Hello, ${name}` } console.log(msg);}sayHello(); //"Hello, 감자야" - sayHello라는 함수명을 가진 함수를 실행시킨다. 그 내용은 msg를 보여주는것. msg는 `Hello..