김기지의 코딩노트

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

◎통신 시작하기 서버와 통신한다는 것은? = 데이터를 보내주고 서버로부터 데이터를 가져오는 것. 우리가 보는 네이버나, 다른 페이지는 잘 정리되어 있는 데이터지만 그렇지 않은 것도 있다. ↓ 서울시가 제공하는 현재 서울의 미세먼지 수치 http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 우리가 평소 보는 페이지와 다르게 정리가 되지 않은 모습이다. 이같은 데이터를 보기 편하게 해주는 프로그램이 있다. https://chrome.google.com/webstore/detail/json-viewer/aimiinbnnkboelefkjlenlgimcabobli?hl=ko JSON Viewer Validat..

◎ JQuery -웹 사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 모음집 -장점 ① 코드의 가독성이 좋다. ② 자바스크립트를 모두 알지않아도 웹 사이트 제작을 용이하게 해준다. ● 사용방법 ① JQuery 사용을 선언한다 → ② 이름표를 붙인다 → ③ 이름을 가리키고, 원하는 동작을 입력한다 ① 사용 선언하기 입력 입력한 이름 홍길동 (1) 값 받아서 띄우기 입력칸에 값을 넣고 버튼을 누르면 그 값이 메세지창으로 띄워지게 하자. 코드를 살펴보면 버튼에 동작이 걸려있고 버튼을 누르면 메세지창이 뜨게 입력되있다. 여기서 입력된 값을 가져오려면? 태그의 id값을 가져와 값을 가져오는 동작인 (.val())을 입력해주자. (2) 숨기기 / 보이기 숨기는(없애는) 동작은 ...

띵동코딩의 로그인 페이지를 만들어보자. 기본적인 틀과 이미지 파일이 들어있는 뼈대는 코드스니펫을 사용했다. 여기서부터 시작!! 구역을 나누어보자. 이미지의 위치와 크기는 지정되어있으므로 건들이지 않고 1번 구역부터 꾸며주자. 우선 텍스트가 왼쪽에 몰려있으므로 오른쪽에서 여백을 쭉 밀어준다. 문단 사이의 간격을 떨어뜨리고 글자의 크기를 키워준다. .wrap > p { margin-right: auto; font-size: 24px; line-height: 35px; font-weight: 450; margin-top: 10px; } 얼추 비슷한거같으니 버튼을 꾸며보자. 버튼의 크기를 맞춰준 후 배경색과 글자의 속성을 바꾼다. 테두리는 없애주고 모서리도 둥글게 맞춰주고 상단 여백도 띄어주자. 버튼에 커서를 ..

오늘 배울것은? 1) 함수 2) 조건문 3) 반복문 1) 함수 -함수 만들기 function 함수이름(받을 미지수) { 실행 되길 원하는 동작 작성 } (콘솔에서 작성 시 줄바꿈은 shift+enter) -함수 호출하기 함수이름(미지수) ex) console.log가 먼저 돌고 return이 나중에 입력되었다. 함수를 설정한 후 변수값을 주어 안의 미지수값을 다르게 하면 console.log값이 result안에 들어가고 result값을 출력하면 7이 나온다. 2) 조건문 -조건문 입력하기 if (조건) { 위 조건을 충족한다면, 해당 문이 실행됨 } else if (조건) { 위 조건을 충족한다면, 해당 문이 실행됨 } else { 위 조건들을 만족시키지 못한다면, 해당 문이 실행됨 } ex) 함수에 조..

◎자바스크립트 : 웹페이지를 움직이게 하는 근육. (웹페이지의 동작을 만들수있음) ● 자바스크립트 맛보기 자바스크립트를 사용하려면 동작을 실행시킬 공간이 필요함. (전에 만든 로그인 페이지를 가져와 실행했다.) -버튼을 누르면 메세지창이 뜨게하기 먼저 자바스크립트는 안의 버튼을 클릭했을 때 실행이 되도록해야하기때문에 에 onclick="hey()"를 넣어준다. 저장 후 페이지를 띄워 버튼을 누르면? 메세지창이 뜬다. 여기서 마우스 오른쪽을 누르고 검사에 들어가면 '콘솔'이라는 창이 있는데, 이 곳은 자바스크립트와 이어진 곳으로 자바스크립트를 설정할때 마다 창을 새로고침해서 테스트를 하는 번거로움을 덜어주기 위한 곳이다. 그럼 콘솔창을 통해 기초적인 문법 연습을 하자. ○ 자바스크립트 문법 기초 1) 변수..

오늘 만들어볼 것은 (((파타고니아 클론코딩))) 파타고니아의 메인 페이지를 클론코딩해보자!! 클론코딩을 하기 전 계획을 세워보자. 1. 구역 계획하기 → 2. 부트스트랩 요소 찾아서 복사 붙여 넣기 → 3. HTML, CSS 수정하기 1. 구역 계획 크게 ①gnb구역 ②main구역 ③items구역 으로 나누었다. 구역을 나누었으니 ①gnb구역부터 시작하자. ①gnb구역 상단 메뉴바를 보면 구역이 2개로 나누어져있고, 이미지, 텍스트, 검색바, 아이콘으로 이루어져있다. 텍스트는 클릭이 되었을 때 다른곳으로 이동이 되어야한다. (여기서는 이동하지 않음) 그렇다면 태그를 사용하자. 먼저 html 요소를 배치한다. 우선 메뉴바의 위쪽을 배치하면 Climat Goals 푸른 심장 Worn Wear | 더보기 아..

이번 강의에서는 '부트스트랩'을 활용해보았다. ◎ 부트스트랩이란? html, css, javascript 작업의 부담을 덜기 위해, 트위터 개발자들이 만들어 놓은 프론트엔드 모음집 ○ 장점 - 복붙하면 사용할 수 있음 (개발 시간을 줄일 수 있다.) - 핸드폰, 태블릿, 컴퓨터에 따라 화면 크기가 자동으로 변함 ○ 단점 - 페이지 로딩 속도가 조금 느려질 수 있음 - 커스터마이징은 힘듬 부트스트랩을 둘러보자. → https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.k..

오늘은 그동안 배운 HTML과 CSS를 복습했다. '온라인 청첩장' 만들기~~ 내가 만들어 볼 결과물은 바로.. (https://bumkyulee20220610.github.io/mypage/index.html) 길이감에 압도를 당해버렸ㄷ... 뼈대는 띵동코딩에서 제공한 코드니스니펫(폰트, 가로길이 등 기본적인 속성이 입력되어 있음)으로 했다. cssc를 들어가기 전 세 가지 고려사항이 있다. 1. 구역을 먼저 계획할것. 2. 배경색, 폰트는 PINK 3. 자간 간격 설정은 letter-spacing을 사용할 것. 먼저 구역을 설정해보자. 크게 5가지로 나누었다. 우선 안에 들어갈 내용물을 에 넣어주자. 영희와 철수의 첫 시작을 축하해주세요 Save The Date 12.31.SUNDAY.PM.12:30..

◎브라우저의 역할 : 요청을 보내고 받은 HTML파일을 그려주는 일 오늘 만들 것 → 띵동코딩 로그인 페이지 클론 코딩을 하기 전 계획을 세우는게 좋다. 1. 구역 계획하기 → 2. HTML 쓰기 → 3. CSS설정하기 1. 구역을 나누어보자 -GNB : 어느 페이지에 들어가든 공통적으로 사용할수 있는 메뉴 바 -Main : 본문의 주 컨텐츠 -CTA : 사용자의 반응을 유도 하기 위한 버튼이나, 배너(하단에 고정되어 있음) 여기에 쓰일 태그를 매칭해보자 태그를 사용하는 이유? → 글자단위를 묶는 태그로 줄바꿈이 일어나지 않는다. 1) GNB구역 구역을 나누었으니 부분에 들어갈 내용물을 적어준다. css를 설정해야 하므로 명칭을 달아주자. 로그인 저장 후 출력해보면 이미지와 글자가 왼쪽에 붙어있다. 우선..