E민

1. 클라이언트 - 서버 이해하기 2. Fetch [클라이언트→서버]: GET 요청 이해하기 서버 > api API는 은행 창구와 같은 것!, 서버는 ~은행 @@지점 // 다음부터 첫번째 / 전까지 => 서버 위치 첫번째 /부터 ?전까지 => 창구 이름 ? 뒤부터~ => 창구에 가져가는 데이터 (~는 ~다. -> 주민등록 번호는 9999..다.) https://movie.daum.net/moviedb/main?movieId=68593 위 주소는 크게 두 부분으로 쪼개짐 "?" 기준으로 앞 부분이 뒷 부분이 [영화 번호] * 서버 주소: https://movie.daum.net/moviedb/main?movieId=68593 * 영화 정보: movieId=68593 GET 방식으로 데이터를 전달하는 방법 ..

jQuery + fetch 로 웹페이지 제어 마스터하기! CSS - Bootstrap 남들이 만든 코드 모음, Javascript - JQuery도 남들이 만든 코드 모음, 라이브러리! $("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택 $("element") 지정된 태그명을 가지는 모든 요소를 선택 'fetch'는 인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미. Fetch는 짧은 코드로 데이터를 가져올 수 있음. 추억 앨범, 제이쿼리 적용1 postbox 열고 닫기 '추억 저장하기' 버튼을 누르면 '포스트 박스'가 나타나고 다시 '추억 저장하기' 버튼을 누르면 '포스트 박스'가 사라지도록 만들어 보자! #타이틀 아래에 코드 붙여넣기 (스파르타플릭스에서 복사해와서) 나만의 추억앨범 # ..

HTML = 뼈대 CSS = 꾸미기 Javascript = 움직이기 ! 프로그래밍 언어 5가지 1.변수 2.자료형 3.함수 4.조건문 5.반복문 Javascript 기초 문법 1 - 변수 이해 변수 변수 : 값을 담음(문자,숫자,..) => 값을 담아서 한 번에 관리하기에 용이! (치환 느낌?) console.log() : 검사->콘솔 _ 콘솔창에 뜨게 해주세요 변수 이름 : 내가 기억하기 쉽게 지정 ex) let name = 'bob'; let age = 28; let a = 'hello'; console.log(a); let a = '대한'; let b = '민국'; console.log(a); console.log(b); let a = '대한'; let b = '민국'; console.log(a+b..

스파르타플릭스 제작을 위한 기초 작업 index.html 스파르타 폴더 -> 스파르타플릭스 폴더 새로 만들기 VS코드 -> 파일 열기 -> 스파르타플릭스 -> 새파일 -> index.html title html:5 -> title 지정 스파르타플릭스 부트스트랩 CDN, 폰트 #헤드-타이틀 아래에 부트스트랩 CDN 복붙 스파르타플릭스 #헤드-타이틀-CDN 아래에 폰트 주소 복붙 #헤드-스타일-* { } 폰트 적용 * { font-family: "Hahmlet", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } ##결과 스파르타플릭스 * { font-family: "Hahmlet", serif; font-optical-sizing..

Visual Studio Code 입문 VS 코드 시작하기 바탕화면에 폴더 추가 -> 그 안에 또 다른 폴더 만들기 VS코드 -> 열기 -> 속 폴더 선택 -> 오른쪽 마우스 -> 새 파일 -> html:5 (기본값) 입력 DOCTYPE html> Document => 크게 헤드와 바디로 나뉨 * 헤드 : 페이지 속성, CSS 등 * 바디 : 페이지 내용 기초 태그 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼..

: 제목태그 1~6 글자크기 큰 순서대로 1~6 : 문단태그 (paragraph) 자동 줄 바꿈x : 줄 바꿈 태그 빈 요소 태그 (닫는태그x) : 더미태그_자동 text 완성 기능 영어만 지원 ex) lorem5 : 순서가 없는 목록태그 (un ordered list) ul 부모태그 li 자식태그 : 순서가 있는 목록태그 (ordered list) ol 부모태그 li 자식태그 : 정의형 목록태그 / : 정의할 목록의 제목태그 : 정의할 목록의 내용태그 dl 부모태그 dt,dd 자식태그 : 주석태그 ctrl+/ : 강조태그_진하게 : 강조태그_눕혀서 : 이동태그 : 하이퍼링크 태그_현재 페이지에서 바로 열림 a 태그 클릭시 어떤 일이 일어나는지 title 태그로 설명하는 게 좋음, 웹 접근성을 높임 ex..

HTML이란? Hypertext Markup Language의 약자로, 웹 페이지와 웹 페이지 내의 컨텐츠를 구조화하기 위해 사용하는 코드 (웹 페이지를 만드는 가장 기본적인 언어) *element 요소 : 컨텐츠를 감싸는 태그(tag)라는 속성을 사용 와 같이 열린태그, 닫힌태그 한 쌍으로 구성 *attribute : 속성 *value : 값 *content : 내용 HTML의 기본구조 본문 제목 본문 단락 : 문서의 시작과 끝을 나타냄 : 문서에 필요한 외부파일, 해당 문서의 설정을 지정하는 영역 문서 이름은 영문으로 작성, 띄어쓰기x : 입력한 내용이 브라우저 상에 출력되는 영역 (파일 저장시 파일명.html 로 저장)