져니's Life

2020.03.29(월) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 열두번째날 CSS *{ margin: 0; padding: 0; } ul,li{ list-style: none; } a{ text-decoration: none; } img{ display: block; line-height: 0; } #wrap{ width: 100%; } #header_wrap{ width: 100%; background-color: red; } #header{ width: 1200px; margin: 0 auto; height: 100px; background-color: blue; } #snb_wrap{ width: 100%; height: 200px; position: absolute; backgroun..

2020.03.24(수) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 아홉째날 어제 오후시간에 해보라고 하셨던건데 난 결국 못했다ㅠ 배열에 대한 개념이 정립이 안되어있어서 그랬던 듯하다 li = document.querySelectorAll('#puppy > li'); -> querySelectorAll을 사용하면 puppy안에 있는 정보들을 각 속성값 형식 그대로 배열 형식으로 변환해준다. img들은 Element형식이었기때문에 [Element,Element,Element] 다음과 같은 형태로 가져오는 것! setInterval(moving,2000); ->내가 설정한 함수를 2초마다 실행해주도록 설정한것이다! (2000=2초, 3000=3초,4000=4초) * 결과물

2020.03.23(화) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 여덟째날 어제는 creatElement와 appendChild를 사용하여 html 요소를 추가해보았다. 그래서 오늘은 삭제하는 것을 배워보았다. (대문자 소문자 구분해서 쓰는 것이 중요중요! 안그러면 작동 안할 수 있음!!!!) To do list content1 content2 content3 box_input = document.querySelector('#box_input'); -> input box 아이디 값을 받아서 변수에 담았다. content = document.querySelector('#content'); -> 내용 출력하는 영역 설정 li = document.createElement('li'); -> 내용 출력..

2020.03.22(월) 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 일곱째날_오후 오늘 자바스크립트 처음 배웠는데 굉장히 많은걸 배운 느낌이다ㅠ 머릿속에서 모든게 정립이 안된 느낌,,, 용어 정립도 하나도 안됐다ㅋㅋㅋㅋㅋㅜㅜㅜㅜ to do list sample1 sample2 sample3 liElement = document.createElement('li'); -> li 엘리먼트 추가생성 liElement.innerHTML = document.querySelector('#Box_input').value; -> li엘리먼트 안에 Box_input안의 내용 값 넣어줌 document.querySelector('#content').appendChild(liElement); -> ???? 꼴의 내용..

2020.03.22 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 일곱째날 오늘은 자바스크립트에 대해 처음 배운 날 자바스크립트와 HTML을 비교하자면 자바스크립트는 동적이고, HTML은 정적이다. 처음에 이게 무슨 소리지? 싶었는데 javascript를 써서 1+3을 표출했을때와 html을 써서 1+3을 표현했을때의 결과값이 다음과 같이 다른 것을 보고 바로 감이 잡혔다. 그리고 이어서 alert('hello world'); console.log('console hello') 이걸 넣어보았다. alert는 경고창을 띄우는 것, console.log는 디버깅 할때 자주 사용한다고 함 최근에는 디버깅할때 유용한 다른 툴이 생겨서 그걸 더 많이 사용하지만 console도 유용하긴 함 alert를 넣으니..

2020.03.17 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 넷째날 팀원들이랑 같이 경일게임아카데미 사이트에서 포트폴리오까지 완성하라는 미션을 받았다. 나포함 팀원 4명 중 2명은 이미 사전수업을 들으셨고, 교수님이 평소에 잘하시는 분들이라고 항상 칭찬하셨던 분들이였다. 그래서 오늘 다른 팀보다 조금 빠르게 포트폴리오까지 완성하고 밑에 있는 레이아웃까지 완성했다. 아쉽게 사이트 하단에 있는 회색띠 부분에서 자꾸 에러가 나서 끝까지 완성은 못했음ㅠㅠ 원본사이트랑 팀원들이랑 만든사이트 비교영상 배운점 2가지 1. 네이밍의 중요성 class나 id로 네이밍을 지정해줄때 아무렇게나 짓는 것이 아니라 내용, 그리고 다른 네이밍들과 어떤 연관관계가 있는지, css에서 적용이 필요한 부분이 어디까지인지를 ..

1. relative(부모요소): 기존 엘리먼트의 위치를 기준으로 움직임 기본설정을 이렇게 해놓은 상태에서 css에서 box2에 position:relative; left: 50px; 요걸 추가해서 결과값을 보면 파란색 박스만 왼쪽에서 50px 떨어진 결과를 볼 수 있다. position:relative; 를 설정해주면 left,right,top,bottom 값에 픽셀을 지정해줘서 움직이면 된다. relative는 기존의 box2엘리먼트가 위치해 있던 곳을 기준으로 위치가 변경되는 것이 특징이다. 2. absolute(자식요소) : 브라우저를 기준으로 움직임 absolute는 브라우저를 기준으로 위치가 조정되는데 만약 바로 위의 상태에서 포지션만 relative에서 absolute로 바꾸게 되면 위와 똑..

2020.03.16 블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 셋째날_오후 오후에는 경일게임아카데미 사이트 배너 밑에 있는 내용들을 만들어보기 시작했다. 빨간색 박스가 이번에 만든고 교수님이 작은 상자들일수록 만드는게 복잡하다 하셨는데 진짜 그랬다. 위에 로고~배너까지 만드는데 사용한 코드보다 저 쪼매난 네모들 정보 적고 효과 주는데 더 긴 길이의 코드들이 사용됐음 학교소개 교육과정 취업정보 커뮤니티 상담신청 Game Architecture "게임 기획" "게임기획자를 위한 정석 Class" 바로가기 Game Programming "게임 프로그래밍" "게임 프로그래밍을 위한 정석 Class" 바로가기 Game Artworks "게임 원화" "게임 원화를 위한 정석 Class" 바로가기 Progr..

2020.03.16블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 셋째날_오후 오늘 오전수업은 어제 배웠던 것들을 무한 반복해보는 시간이다.교수님이 어제 설명해주셨던 div 개념을 그림판으로 다시 작성해보았다. 맨 처음 wrap이라는 영역으로 한번에 감싸주고 wrap안에서 header와 visual로 나눠줌그리고 header안에서 logo와 gnb로 나눠주면 된다.각각 안의 내용과 효과들은 결과물을 보면서 변경해가면 되는 부분이다. 학교소개 학교소개 커뮤니티 학교소개 학교소개 그리고 지난번에 배우면서 a href 의 개념을 정확히 숙지하지 못해서 찾아보았다. a가 태그이고, href가 속성이란건 대충 링크 연결할때 쓰인다는건 알겠는데 완전히 숙지는 안된 상태..... electronic-moongch..

경일게임 아카데미 사이트를 보고 따라 만들어보기 시작했다. 이때 중요한 개념 하나를 또 배웠는데 바로 ./ 과 ../ 요 두개다. 옛날에도 컴퓨터 시간에 / 는 파일경로를 표시하는 용도로 사용되는걸 자주 봐왔다. HTML에서도 똑같았다. 그런데 .으로 시작하는게 생소했는데 교수님이 설명해주시길 . -> 자기 자신을 표현하는 형태, 경로설정할때 자주 사용됨 .. -> 현재위치에서 밖으로 나올때 학교소개 교육과정 취업정보 커뮤니티 상담신청 교수님이 실력은 똑같은 코드를 여러번 쳐보고 안보고 칠 수 있을 정도가 되야한다고 하셨다. 그래서 두번째는 홈페이지 봄서 기억에 의존해서 해보깅,,,,그런데 첫번째에는 잘만 뜨던 비주얼1 이미지가 두번재 할때 갑자기 안떴다....무엇이 문제일까,,,,혼자 15분동안 고민하..