heyday2024 님의 블로그

DOM( Document Object Model ) 이란? HTML, XML 문서의 프로그래밍 interface로, 쉽게 말해 HTML문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조!DOM은 nodes와 objects로 문서를 표현함.TO-DO-LIST할 일을 추가할 수 있는 투두리스트 웹페이지.https://todolistforonlytoday.netlify.app/ 투두리스트 todolistforonlytoday.netlify.app기능할일을 입력창에 입력하고,추가버튼(+)을 누르면 할일이 추가됨.추가된 항목은 delete버튼, 할일 내용, 체크박스를 포함하고 있음.delete 버튼을 누르면 항목 사라짐.const inputArea = document.getElementById("text..

https://koreanfood-menu.netlify.app/ 한식 메뉴 렌더링하기 koreanfood-menu.netlify.app 한식 메뉴를 렌더링 해보기주어진 데이터를 가지고, 데이터를 화면에 표시했다. 메뉴판 느낌으로 스타일링하고, 각 객체는 각각의 가격, 카테고리, 설명을 포함하고 있다. 카테고리별로 메뉴를 볼 수있고, 검색 기능을 사용해서, 입력한 키워드를 포함하는 요소를 보여줄 수 있다. 특징각 메뉴를 카테고리 별대로 볼 수 있도록 하는 기능을 추가했다. (드롭다운 메뉴)음식을 bootstrap에서 가져온 cards 코드를 이용해 정갈하게 나열했다.filter과 includes 메소드를 이용해서 특정 키워드를 사용자가 입력한 후 검색버튼을 누르면 검색어를 포함한 메뉴가 보이도록 하는 기..

숫자 기억 게임랜덤으로 생성되는 숫자를 사용자가 기억하는 게임. https://practicenumbergame.netlify.app/ 숫자 기억 게임3. 정답과 획득한 점수를 확인해보세요.😊 입력한 숫자가 맞으면 점수가 올라가고, 틀리면 점수를 획득하지 못합니다. 20점에 도달할 때까지 문제는 계속됩니다. 특정 점수 도달 시 숫자가 길어practicenumbergame.netlify.app넷리파이로 걍 배포해봄. 허술한 숫자 기억 게임 해보실분~~~~🙌🙌(반응형 아니라서 모바일에서 열지 마셔요... 눈감..감아...)  게임로직:시작버튼을 누르면 사용자는 1000~9999 사이에 랜덤으로 생성된 숫자를 보게되고, 시작 버튼이 사라짐과 동시에 제출버튼과 입력란이 생긴다. // 1000~9000 범위..

아래 코드는 fetch를 사용해서 미세먼지 API로 정보를 얻고, 미세먼지가 40이 넘어갈 때는 클래스를 추가하여 빨간색으로 표시함.   이전에 만들었던 album 표지에 서울 미세먼지 상태 표현. 현재 서울의 미세먼지 : 나쁨 span 태그는 HTML에서 인라인 요소 정의하는데 사용되고, 텍스트나 다른 요소를 스타일링하거나 특정 동작을 적용할 때 유용. 레이아웃에 변화를 주지 않고도 특정부분을 강조할 수 있음.  // 페이지가 열릴때 혹은 새로고침되었을 떄 이미 미세먼지 API가져와서 서울 미세먼지 상태 표시해야함: $(document).ready(함수 내용); 쓰기!! $(document).ready(function () { let url..

서버 --> 클라이언트 : JSON 데이터를 받음(text 데이터를 긁어오는 방식) 클라이언트 --> 서버: GET 요청API: Application Programming Interface, 어떤 응용 프로그램에서 데이터를 주고 받기 위한 방법.  API 유형REST API (Representational State Transfer): HTTP를 사용해 자원(Resource)을 CRUD (Create, Read, Update, Delete) 방식으로 처리.SOAP API (Simple Object Access Protocol): XML을 기반으로 한 메시징 프로토콜을 사용해 데이터 교환을 처리.GraphQL: Facebook에서 만든 쿼리 언어로, 클라이언트가 원하는 데이터 구조를 정확히 정의해 서버에서..

복습:  jQuery는 JS를 더 쉽게 조작할 수 있게 남이 만들어 놓은 코드 모음, 라이브러리. fetch? 인터넷을 통해 데이터를 요청하고 받아오는 과정!(fetch는 짧은 코드로 데이터를 가져올 수 있음.) function openClose() { $("#postingBox").toggle(); }요소의 id가 postingBox이고 특정버튼을 클릭했을때 해당 요소를 display="none"시키고 싶음.이를 위해 jQuery toggle 매소드 이용함.  https://api.jquery.com/toggle/ .toggle() | jQuery API DocumentationDescription: Display or hide the matched elements. No..

브라우저에 동적인 기능을 추가하기 위해 Javascript를 씀!  1) let으로 변수(와 해당하는 값) 선언, 두개에 다른 문자열 더하면 하나의 문장으로 생성 가능.  2) 리스트 [], 딕셔너리 {}let a = ['사과', '배', '수박'];console.log(a[0]);let person = {'name':'bob', 'age':30, 'height':180};let name = person['name'];console.log(name); //bob  3) 반복문(리스트와 주로 같이 쓰임), 조건문let age = 15;if(age let ages = [1,2,3,4,5,6];ages.forEach(el => {console.log(el)});  4) 함수function hey(){alert..

오늘은 Bootstrap으로 netflix가 아닌 jiflix를 만들어봤다 ㅋㅋㅋㅋ 우선 bootstrap을 사용하기 위해 아래와 같은 코드를 헤드안에 삽입했고,  구글 폰츠에서 Gowun Dodum 폰트를 이용했다.@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");* {font-family: "Gowun Dodum", sans-serif;} 부트스트랩에서 cards, jumbotron, buttons, floating labels 등을 검색하고 적절한 스타일을 선택했다. 그 후 각각 해당되는 코드를 가져와서 조금씩 수정함으로서 웹페이지를 만들어보았다. 굉장히 사용하기 간편했고, 웹페이지 또한 보기 좋은(..

Google fonts 사용해서 원하는 폰트 스타일 입히기.https://fonts.google.com/?preview.layout=grid Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com  html 내부 코드에 css 코드 작성할 때 style 태그 이용.Google font에서 제공하는 @import ... 코드를 style 태그 안에 넣어주고, css에서 *는 모든 요소에 적용한다는 의미.* {안에 구글 폰트에서 제공하는 font-family 코드} 이용해서 모든 font에 스타일 적용. Bootstrap: 오픈 소스 프론트엔드 프레임워크로, 글..

프론트엔드(frontend): 사용자가 보는 부분을 만드는 영역 (클라이언트)UI 구현동적 웹 기능 구현API 요청 및 데이터 처리사용자 경험 개선  백엔드(backend): 사용자가 봐야할 부분을 제공해주는 영역. (서버/데이터)웹 서버 로직 구현API 구현 및 데이터 반환DB 구축 [API(Application Programming Interface)를 활용해서 클라이언트와 서버는 서로 데이터를 주고 받음. ] HTML, CSS, JS로 화면을 만드는데, 이 서비스가 커질수록 느려지고 복잡해진다. 그래서 더 빠르고 효율적인 기술을 활용하기 위해 사용하는 자바스크립트 라이브러리 중에 하나가 React 이다. 웹개발을 위해 발전된 프론트엔드 기술들1세대: HTML/CSS, JS, DOM, Event  |..