처음부터 차근차근

웹 개발을 하면서 데이터를 주거나, 받는 API를 자주 볼 것이다. 이를 위해서는 서버-클라이언트 통신와 API를 알아야 한다. - 서버와 클라이언트의 이해 레스토랑을 예시로 들어보자. 레스토랑에서 우리는 손님으로써 주문을 한다. -> 웹으로 따지면 이것은 주문, 즉 요청을 하는 주체를 Client라고 한다. 주문을 받아서 주문에 맞게 음식을 내어주는 사람을 요리사라고 한다. -> 이것을 담당하는 부분을 Server라고 한다. 즉, 서버는 특정 서비스를 제공하는 '서비스 제공자'의 역할을 하고 클라이언트는 서비스를 요청하는 '서비스 소비자'의 역할이다. 클라이언트와 서버는 서로 정보를 주고 받는 관계이다. - API란 무엇인가? API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 ..

- append = '추가하다' 해당 함수를 통해 리스트, 딕셔너리를 추가할 수 있다. function checkResult() { let fruits = ['사과', '배', '감', '귤', '수박'] $('#q1').empty() fruits.forEach((a) => { let temp_html = `${a}` $('#q1').append(temp_html) }) checkResult를 예시로 들어보면 과일 5개가 list로 저장되어 있는 함수에서 반복문을 통해 list에 있는 항목을 추가하고 있다. 먼저 반복문에 let temp_html = ``(백틱) 백틱 내부에 원하는 html 태그를 안에 넣어주고, 그 안에 ${a(반복문에서 넣어주고 싶은 변수)} 그리고 그 밑에 $('#원하는 ID').a..

- 반복문 forEach 리스트, 리스트-딕셔너리 형식의 자료를 반복해서 자료를 뽑을 때 쓰이며, 해당 자료.forEach((a) => { ~~~~~~~~내용~~~~~~~~ }) 으로 사용할 수 있다. 예시로 해당 ages의 리스트 항목 만큼 반복되는 것을 확인 할 수 있다. 이때 반복문 내부에서의 변수는 ages => a로 알 수 있다. let ages = [12,15,20,25,17,37,24] ages.forEach((a)=>{ if (a > 20) { console.log('성인입니다') } else{ console.log('청소년입니다') } }) - 조건문 if // else 조건에 맞춰 실행을 다르게 해주는 조건문은 python과 굉장히 유사하다. 조건문에 활용되는 연산자의 경우에는, Jav..

jQuery를 사용하는 이유는?? - Javascript만 사용하면 복잡하니까 jQuery도 사용하는 것! - jQuery는 미리 작성된 Javascript 코드 라이브러리다. 예시로 - document.getElementById("element").style.display = "none"; 로 javascript는 작성해야 하지만 jQuery로 보다 직관적으로 쓸 수 있다. $('#element').hide(); jQuery를 사용방법은 먼저 improt를 해준다 python의 라이브러리와 비슷한 개념으로 알면 된다. 연습으로 먼저 text를 삽입하는 방법을 알아보자 DOCTYPE html> 자바스크립트 문법 연습하기! .button-part { display: flex; height: 50px; } ..

2주차는 javascript를 배운다. 웹개발은 먼저 - HTML은 뼈대, CSS는 꾸미기, Javascript는 움직이기! 이렇게 배웠으며, Javascript는 웹을 움직이게 할 수 있는 코드이며, JQuery를 대부분 사용한다. - 이때 JQuery는 남들이 만든 코드 모음, 라이브러리이며 HTML 뼈대를 선택해서 쉽게 조작할 수 있도록 해준다. Javascript란? - 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다. - Java와 Javascript는 큰 차이가 없다. Javascript 사용방법은 - 먼저 안에 로 공간을 만들어 작성한다. - 예시로 함수를 만들어보면 function hey(){ alert('안녕!'); } script 안에 해당 함수를 만들어 놓고 사용하고..

- Bootstrap이란?? 예쁜 CSS를 미리 모아둔 라이브러리 같은 것이다. - Bootstrap 시작하기 CSS 파일 분리와 원리가 동일하다. 부트스트랩 시작 템플릿 doctype html> 스파르타코딩클럽 | 부트스트랩 연습하기 이걸로 시작해보죠! 와 를 통해 먼저 Bootstrap을 불러온다. - Bootstrap 사용하기 https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 해당 웹..

Python과 같이, 모든 프로그래밍 언어에는 주석이 사용된다. 주석은 1) 필요 없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용 주석 사용 방법은 1. 주석 처리하고싶은 라인들을 선택 2. Ctrl(or command) + / 파이썬도 동일하게 주석 처리가 가능하지만, 주석 표현 방법은 다르다. Python : # 이후 주석 처리 HTML : ~ 부분일 경우 으로 표현되며, 둘 다 초록색으로 주석 처리됨 CSS : 내 주석처리의 경우 /*.mypic { width: 100%; height: 500px; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0..

CSS에서 구글 웹폰트 입히는 방법은 간단하다. 1. 먼저 사용할 웹 폰트를 찾는다. 해당 주소로 들어가면 자기가 사용하고자 하는 폰트를 찾아 볼 수 있다. https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 사용할 구글 폰트를 클릭 후 Styles을 설정(Light, Medium, Bold 체 설정) 이후 Selected families 설정에서 Use on the Web, @import 항목으로 체크 3. 태그 안에 @import 부분을 먼저 추가한다. 이때, import를 하여 font를 불러오는..

HTML은 뼈대, CSS는 꾸미기, Javascript는 움직이기 CSS는 꾸미기의 기초로 자주 쓰이는 CSS에 대하여 알아보자. 배경관련 background-color background-image background-size 사이즈 width height 폰트 font-size font-weight font-family color 간격 margin -> 테두리와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정하는 것 padding -> 내용과 테두리 사이의 간격인 패딩 영역의 크기를 설정하는 것 만약 Content를 해당 웹페이지 가운데다가 둘려면 div로 구역을 나눈 뒤, margin : auto로 둔 다음 사용할 수 있다. 예시로 margin: 20px(위) auto(오른쪽) 0px(아래) ..

※ 코딩을 처음 배울때는, 이 코드를 하나 하나 다 안다는 것이 아닌, 얼개를 이해하고, 복사 후 붙여넣는 작업을 잘하는 것과, 에러가 났을 때 해결할 줄 아는 것이 중요하다. HTML이란? HyperText Markup Language의 약자로써, CSS와 함께 웹페이지의 뼈대가 되는 기초이다. HTML은 웹 페이지를 만드는 데 사용하는 언어이며 매우 쉽게 배울 수 있다. 모든 태그는 미리 정의되어 있으며, 각각의 태그와 속성을 사용하기만 하면 끝! 현재는 HTML:5 format을 사용하며, 웹 페이지의 뼈대를 담당하고 있다. 안에 공간을 만들어 작성하며, 내가 지정하고자 하는 클래스를 가르키면서 적용이 가능하다. 예시로 1주차 로그인 아이디를 만드는 것을 배워보자. 먼저 ~ 내부에 class를 만든..