이번에는 북마크 탭을 만들어보겠습니다. 북마크탭은 북마크를 추가하는 버튼과 추가한 북마크들을 볼 수 있는 탭입니다. 먼저 html에서bookmark-open(북마크 바가 열린상태)과 bookmark-close(북마크 바가 닫힌상태)를 만들어주고 각각 안에 btn을 하나씩 만들어줍니다. 그리고 그 아래에 boomark-bar(북마크 바)도 생성해줍니다. 북마크 닫기 북마크 열기 css 먼저 css를 설정해주겠습니다. bookmark-open의 스타일은 가로길이를 240px, padding은 위아래로 15px 양옆으로 30px 그다음 글자크기를 xsmall로 설정, 요소의 높이를 20px로 설정해줍니다. 북마크를 열고 닫는 버튼은 오른쪽 상단에 위치해야하고 class이름이 main-container인 요소의..
이번 포스팅에서는 명언 api를 사용해 명언을 나타내보겠습니다. html, API 먼저 index.html에 class와 id가 quote인 요소를 main-wrapper div의 아래에 추가해주겠습니다. 그리고 js폴더안에 quote.js 파일을 만들고 html에서 스크립트해줍니다. quote.js에는 api를 통해 받아온 명언을 나타내주어야 합니다. api주소를 상수에 할당해주고, 방금만든 div요소를 element에 할당해주겠습니다. const API_URL = "https://port-0-random-quote-4uvg2mleme84ru.sel3.cloudtype.app/"; const quoteElement = document.getElementById("quote"); getQuote 다음으로..
이번에는 구글의 검색 결과 창으로 이동하는 기능을 개발해보겠습니다. 먼저 저번시간에 작성했던 html 코드의 today-info div태그아래에 다음 코드를 추가해줍니다. 코드를 저장하고 실행해보면 화면에 "검색어를 입력하세요"라는 글자가 적힌 input폼이 나타납니다. 이전에 검색했던 기록들이 나오면 input태그에 autocomplete속성을 off로 설정해줍니다. 이제 search.js라는 파일을 하나 만들고 위의 input요소를 가져오겠습니다. const searchInput = document.getElementById("search-input"); 그 다음, 우리는 이 input 폼에 검색어를 입력하고 엔터를 누르면, 그 값을 검색한 결과 페이지로 이동시켜야하는 기능을 만들어야하기 때문에, 우..
아래의 코드처럼 index.html의 html파일을 만들어줍니다. 그 다음 clock.js라는 js파일을 만들고 위의 날짜와 요일의 클래스를 할당해주겠습니다. const dateElement = document.getElementById("date"); const timeElement = document.getElementById("time"); 날짜 먼저 dateElment에 오늘의 날짜와 요일을 계산하는 기능을 만들어보겠습니다. const dateElement = document.getElementById("date"); const timeElement = document.getElementById("time"); const getNowDate = () => { const nowDate = new D..
이번에는 실제 웹페이지를 개발해보겠습니다. 개발한 웹페이지는 크롬익스텐션으로 변환해, 크롬창을 열때마다 시작화면으로 사용하 수 있도록 함께 설정까지 할 예정입니다. 먼저 개발할 웹페이지를 살펴보겠습니다. 먼저 오늘의 날짜와 현재 시간을 나타내는 시계를 만들어보고, 검색어를 입력하면 검새 결과 페이지로 이동하는 기능도 만들고, api를 통해 명언 데이터를 받아와서 화면에 나타내보고 마지막으로 북마크를 추가하고 삭제하는 기능까지 개발해 볼 예정입니다. 참고자료 https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%..
display display는 HTML요소들을 어떻게 보여줄지를 결정하는 속성으로, 꼭 알아야하는 속성 중 하나입니다. display속성에는 none, block, inline, inline-block 그리고 grid, flex 등의 다양한 값들이 있습니다. class 이름이 속성값-setting으로 되어있는 모든 요소들은 오른쪽 코드처럼 width와 height의 값을 각각 300px, 200px로 설정해주겠습니다. 코드를 실행하면 다음과 같습니다. block 기본적으로 가로의 길이가 100%로 설정이되며, 한 줄의 하나만 div만 배치됩니다. block-setting이라고 적힌 div를 보면, 우리가 설정했던 길이와 높이의 값이 적용이 되어 표시되는 것을 알 수 있습니다. inline inline값은..
position position 속성은 웹 문서 상에 요소를 배치하는 방법을 지정합니다 static 오른쪽에 보이는 파란화면을 우리가 보는 웹페이지 라고 가정하겠습니다. 모든 웹 요소들은 기본적으로 postion값이 static 입니다. static의 경우, css를 다음과 같이 작성하면, 노랑 파랑 초로순서로 쌓입니다. relative position 값이 static 일 때의 위치를 기준으로, 웹 요소들의 위치를 변경하고 싶을 때, 값을 relative로 설정합니다. right 50px이 적용된 노랑 div는 static 속성일 때의 상태를 기준으로 오른쪽으로 50px 만큼 떨어져 있고 left 50px은 왼쪽으로 50px만큼 떨어져 있고 bottom 50px은 아래에서부터 50px만큼 이동된 것을 ..
localStorage local storage는 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 이 로컬스토리지를 사용하면, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있습니다. 이 로컬 스토리지는 보통 사용자의 로그인 정보나 설정 등을 저장하기 위해 사용됩니다. 예를들어, 사용자가 웹 페이지에서 로그인 정보를 입력해 로그인을 성공했다면, 해당 아이디를 로컬스토리지에 저장해, 사용자가 다음에 다시 동일한 페이지에 방문했을 때, 아이디 정보를 불러와서 이전에 입력했던 정보를 유지할 수 있습니다. 로그인과 비밀번호를 입력할 수 있는 input태그와 로그인버튼을 만들어보겠습니다. 로그인 그다음 js파일에서 input태그에 입력된 아이디와 비밀번호의 값을 가져와보겠습니다. const id..
input태그 아래의 html코드를 작성해, input태그를 작성해주겠습니다. 그리고 ex.js에 dom api를 사용해 input요소를 inputElement 변수에 담아보겠습니다. const inputElement = document.getElementById("input"); console.log(inputElement); addEventListener를 사용해 inputElement에 마우스를 올리면, 이 inputElement에 작성된 값을 가져오는 코드를 작성해보겠습니다. const inputElement = document.getElementById("input"); inputElement.addEventListener("mouseover",()=>{ console.log(inputEleme..
DATE객체 DATE객체는 특정 날짜의 시간과 오늘의 날짜와 시간을 알 수 있어 유용하게 사용되는 자바스크립트의 내장객체 입니다. nowDate라는 변수에, 생성자를 사용해서 Date 객체를 생성하고, "YYYY-MM--DD"의 형태로 "2023-12-21"을 전달해 nowDate 변수를 출력해보겠습니다. let nowDate = new Date("2023-12-21"); console.log(nowDate); 이렇게 Date객체에 특정 날짜를 전달하면, 그 해당 날짜의 연도, 월 일, 요일을 알 수 있습니다. 이번에는 아무런 값도 전달하지 않고 코드를 실행시켜보면 let nowDate = new Date(); console.log(nowDate) 오늘의 값이 나오게 됩니다. Date객체의 메서드를 사용..
요소노드생성 class이름이 clock인 div의 아래쪽에 새로운 요소를 추가해보겠습니다. createElement createElement 메서드를 통해 새로운 요소노드를 생성할 수 있습니다. class이름이 season이고, div로 이루어진 요소를 추가 해보겠습니다. const seasnsonElement = document.createElement("div"); 이 createElement의 매개변수로는, 생성할 요소의 태그 이름을 넣어줍니다. 그 다음 classList를 사용해 season이라는 class이름을 생성해주겠습니다. const seasonElement = document.createElement("div"); seasonElement.classList.add("season"); di..
요소 찾고 선택하기 먼저 다음 코드를 작성해줍니다. 02.10.금요일 15:03 위 코드의 브라우저 실행화면입니다. document.getElementById(id) 특정 요소를 찾을 때에는, 가장 먼서 문서노드 document에 접근해야하기 때문에, document를 작성해줍니다. getElementById는 말 그대로 특정 요소를 id값으로 가져온다는 의미이고, 실제로 특정 요소객체를 반환합니다. console.log(document.getElementById("date")); 실제로 id값이 date인 요소가 반환된 것을 볼 수 있습니다. 만약 동일한 id를 갖고 있는 요소가 여러개인 경우, 가장 위에 있는 첫 번째 요소만 반환하는 API입니다. dcoument.querySelector(cssSel..
웹이란 웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미합니다.(출처 - 위키백과) 이러한 웹에서 HTML로 작성된 페이지를 웹 페이지라고 하고, 이 웹페이지들이 여러개 모여있는 집합을 웹사이트라고 부릅니다. 웹 사이트란, http://google.com/과 같은 주소, url에 접속해서 볼 수 있는 웹 페이지들을 통틀어 말하는 말로, 흔히 말하는 홈페이지라고 할 수 있습니다. HTML과 CSS HTML : Hyper Text Markup Language의 약자로, 쉽게 말하면 브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할 CSS : Cascading Style Sheets의 약자로, 말 그대로 웹 페이지의 요소들을 꾸며주는 역할을 하는 sheet 입니..
API란 API란 Application Programming Interface로, "컴퓨터나 컴퓨터 프로그램 사이의 연결"이라고 나와있습니다. 클라이언트와 서버의 통신 API에 대해 이해하려면, 먼저 클라이언트와 서버의 데이터 통신 즉, 우리가 웹이나 앱을 이용할 때 어떻게 원하는 데이터를 요청하고 받을 수 있는지를 먼저 이해해야합니다. 커피숍과 클라이언트-서버 통신 이러한 과정은 우리가 커피숍에 가서 커피를 주문하고 마시는 과정을 떠올려보면 쉽게 이해할 수 있습니다. 1. 손님이 바리스타에게 원하는 커피를 주문 2. 바리스타는 주문받은 커피를 만들기 위해 필요한 원두를 파악하고, 창고에서 원두를 선택 3. 바리스타는 창고에서 선택한 원두를 가져옴 4. 선택한 원두로 커피를 제작하고, 완성된 커피를 손님..
저번시간에 배운 프로미스 객체에 대해 복습할 겸, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보겠습니다. delay라는 함수를 작성하고, delay함수에서는 setTimeout 함수에서 사용할 매개변수를 받습니다. 프로미스 객체를 반환하고 resolve함수를 호출해주고, delay함수 아래에는 start함수를 생성하고 delay함수를 호출했습니다. delay함수의 인수로는 2000을 넘겨 2초동안 지연하게 해주고, then 메서드를 사용해, "대기"라는 단어를 출력합니다. const delay = (ms)=>{ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(); },ms); }); }; const start = () => { delay(..
