김기지의 코딩노트

○ Javascript복습 - 버튼을 클릭한 수가 짝수인지 홀수인지 나타내보자. 1주차에서 만든 영화기록페이지에서 실행해보자. 먼저 버튼에 동작을 연결해보자. 영화 기록하기 연결이 잘 되었다면 이제 함수를 만들어보자. 클릭한 수를 담는 변수를 선언한 후 홀/짝을 구분한다. 2로 나누었을때 나머지가 0이면 짝수, 1이면 홀수라는 조건을 달아준다. let count = 0 function hey() { count += 1 if (count %2 == 0) { alert('짝수') } else { alert('홀수') } } ◎ JQuery : HTML요소들을 조작하는, 편리한 javascript를 미리 작성해둔 라이브러리 (like 부트스트랩) ● jquery 사용하기 https://www.w3schools..

◎ 팬명록을 만들어보자 숙제는 해설영상 없이 스스로 해보았다. 우선 상단부분부터 만들어보자. html을 구성하고 css를 설정한다. 김기지 팬명록 구역의 크기를 맞춰주자. 배경이미지를 넣고 글자의 속성도 바꿔준다. background-image: url("포스터1.jpg"); background-position: center 45%; background-size: cover; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; 이제 포스팅박스를 만들자. 지난 시간에 만든 영화 기록하기 포스팅박스를 참고해보자. 먼저 구역을 정해보자. 포스팅박스 구역의 크기를 정한 후 중앙으로 옮겨준..

◎ Javascript : 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어 안의 이 함수가 버튼이 클릭할때 작동되기 위해 버튼에 동작을 달아준다. 영화 기록하기 로컬파일로 가서 버튼을 클릭하면 메서지창이 뜬다. 여기서 검사의 콘솔창을 통해 의 설정을 이어서 실행할 수 있다.(저장은 되지 않음) 콘솔창에 hey()를 입력해보자. 콘솔창은 개발자들이 자바스크립트의 테스트 시에 발생하는 번거로움을 해결하기 위해 만들어졌다. 콘솔창을 통해 자바스크립트의 기초 문법을 배워보자. ○ 변수 : 값을 담는 것 변수를 선언할 때는 let을 사용한다. 문자열을 넣어줄때는 ' ' 로 묶어줘야 인식이 가능하다. 여기서 사칙연산도 가능하고 문자열의 더하기도 가능하다. ○ 자료형 : 값이 커져 변수를 선언하기에 복..

◎ 부트스트랩 - 예쁜 css를 모아둔 것 ●시작템플릿 다른 사람이 미리 작성한 css를 내 HTML파일에 적용한다는 점에서, 부트스트랩 적용은 css파일분리와 원리가 동일하다. (다만, css파일이 인터넷의 어딘가에 있다는 점이 다름) https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr 본 수업에서는 코드스니펫에 미리 세팅이 되어 그대로 사용했지만, 부트스트랩을 사용하기 위해서는 css링크 스타일시트와 js의 script를 붙여줘야한다. (나중에 자바스크립트를..

◎수업 목표 1. 서버와 클라이언트의 역할에 대해 이해하기 2. HTML, CSS의 기초지식을 이해하고 부트스트랩 활용하기 3. Javascript 기초 문법 익히기 ○ 서버/ 클라이언트/ 웹의 동작개념 네이버페이지를 해킹해보자 네이버 시작 페이지의 상단 메뉴 중 '사전'을 '안녕'으로 바꾸어보자. 사전에 커서를 댄 후 검사창에 들어가면 페이지의 html속성이 나오는데 그 중 텍스트를 바꾸면 된다. 이 변화가 모든 화면에 표시되는걸까? 아니다. 웹페이지는 서버에서 받은 모든것을 그려주는 것으로 네이버라는 페이지는 우리가 전원을 끄거나 창을 닫아도 존재하게된다. 따라서 우리가 보는 웹페이지는 각자 부여받은것이다. 어떻게 요청한걸까? 서버가 만들어 놓은 "API"라는 창구에 요청을 전송하면 그 정보를 받아 ..