Web development (25) 썸네일형 리스트형 로그인 페이지 만들기_ CSS 기본 1️⃣ HTML 부모-자식 구조 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안에 내용물도 모두 영향을 받는다. 빨간색 div 안에, 초록색/파란색 div가 들어있다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하게 된다. 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리인 것이다. 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀌게 된다. 2️⃣ CSS 기초 안에 로 공간을 만들어 작성한다. mytitle라는 클래스(class)를 가리킬 때, .mytitle { ... } 라고 써줘야 한다. DOCTYPE html> Document .myti.. 로그인 페이지 만들기_1. html 1️⃣ 간단한 로그인 페이지 만들기 HTML기초 코드들을 적절히 조합해 간단한 로그인 페이지를 만들어보자. Open with Live Server를 열어 같이 비교하며 고쳐간다. login.html 파일을 만들어 html:5 기본코드로 뼈대를 준비한다. DOCTYPE html> Document 로그인 페이지 ID : PW : 로그인하기 tags.html 파일을 참고해서 login.html 파일을 완성해보았다. html 구조 1️⃣ 폴더 및 파일 만들기 바탕화면에서 [폴더] 만들기 > [폴더]에서 [frontend 폴더] 만들기 > [frontend 폴더] 안에 [tags.html 파일] 만들기 2️⃣ HTML과 CSS의 개념 HTML은 뼈대, CSS는 꾸미기 HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드! 웹의 전반을 HTML을 통해서 작성할 수 있다! CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드! HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 생기게 된 것. HTML 코드 내에 CSS 파일을 불러와서 적용. 또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에 많은 경우 웹디자이너나 퍼.. VS Code(Visual Studio Code) 1️⃣ VS Code(Visual Studio Code) : (마이크로소프트 사에서 개발한 코드 에디터) 코딩 프로그램 문서작업을 할 때 한글, 데이터작업을 할 때 엑셀을 쓰는 것처럼 코딩을 할 때 VS Code를 사용 웹(web) 개발 ✅ 1. 웹 브라우저 원리 : 서버/클라이언트/웹의 동작 개념 1) “뉴스” 부분에 마우스 오른쪽 클릭을 눌러 검사 탭을 열어준다. 2) 오른쪽에 뜨는 것은 개발자 도구, 개발자 도구에서 “뉴스” 라고 쓰여있는 부분을 더블클릭하고 “웹개발”이라고 바꿔쓰고 엔터 3) “뉴스”가 웹개발로 바뀐것을 볼 수 있다. ✅ 2. 웹의 동작 개념 : 브라우저는 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 것 1) 브라우저는 그려주는 역할 우리가 보는 웹 페이지는 모두 서버에서 미리 준비해두었던 것을 “받아서” 브라우저에서 볼 수 있도록 “그려주는” 역할을 수행한다! 즉, 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 일만 수행한다. 2) 요청은 서버가 만들어 놓은 API 라는 창구.. fetch / 포스트 리스팅 API 붙이기 / 별 붙이기 fetch("http://spartacodingclub.shop/web/api/movie").then(res => res.json()).then(data => { let rows = data['movies'] $('#cards').empty() rows.forEach((a) => { let title = a['title'] let desc = a['desc'] let comment = a['commene'] let star = a['star'] let image = a['image'] let star_image = '⭐'.repeat(star) let temp_html = ` ${title} ${desc} ${star_image} ${comment} ` $('#cards').append(temp_html.. Github 업로드 일부 적용 오류 를 변경해서 올리는 부분에서 VS-Code로 Open With Live Server로 보았을 땐 정상적으로 변경된 것을 확인 할 수 있는데 Github에 올리고 URL(https://webcreastory.github.io/mypage3-2/) 확인해보니 가 변경되어 있지 않은 이전 페이지 그대로 이더라구요. 왜 온도가 변경되지 않은 것일까요? Github에 비슷한 페이지를 올려서 그런건지, 어떻게 정상적으로 적용하여 github에 올릴 수 있는지 확인 결과 $(document).ready(function () { fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => { let n.. Fetch 반복문 조건문 function q1() { fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => { let rows = data['RealtimeCityAir']['row'] $('#names-q1').empty() rows.forEach((a) => { let gu_name = a['MSRSTE_NM'] let gu_mise = a['IDEX_MVL'] let temp_html = `` if (gu_mise > 40) { temp_html = `${gu_name} : ${gu_mise}` } else { temp_html = `${gu_name} : ${gu_mise}` } $('#names-q1')... console.log(변수) [자료형:리스트] let a = ['사과','수박','감','딸기'] console.log(a) 변수 순서대로 불러내기 : 0부터 시작~ let a = ['사과','수박','감','딸기'] console.log(a[0]) 변수의 총 갯수는 ? let a = ['사과','수박','감','딸기'] console.log(a.length) 웹 브라우저 기본 원리 01. 웹 브라우저 원리 1) 서버/클라이언트/웹의 동작 개념 (1) 네이버 웹페이지 분석 : 뉴스 부분에 마우스 오른쪽 클릭을 눌러 검사 탭 열어주기 # 검사 탭 - 개발자 도구에서 “뉴스” 이라고 쓰여있는 부분 더블클릭 > “웹크리에이스토리”라고 바꿔쓰고 엔터 (2) 웹의 동작 개념 # 브라우저 : 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 일 # 우리가 보는 웹 페이지 : _ 모두 [서버]에서 미리 준비해두었다가 “받아서” [브라우저]에서 볼 수 있도록 “그려주는” 역할 수행 # 요청은 서버가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청을 보내는 것 예) 주소 창에 주소를 입력하고 엔터를 입력하는 것 # 우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, >.. 이전 1 2 3 다음
