강의 실습/웹 프론트엔드를 위한 자바스크립트 첫 걸음37 프로젝트 적용하기 6. 크롬익스텐션 적용하기 지금까지 개발한 웹 페이지를 크롬 익스텐션으로 적용해서 시작화면으로 사용해본다. 우선 웹 페이지에 배경색을 입혀주기 위해 css에서 원하는 이미지의 주소를 body에 background-image로 넣어준다. - main.css ... body { margin: 0 auto; width: 100%; font-family: 'Noto Sans KR', sans-serif; /* background-image: url("https://source.unsplash.com/user/hbin12212/likes"); */ /* background-image: url("https://images.unsplash.com/photo-1563283805-d8bf898cd83d?crop=entr.. 2023. 11. 14. 북마크 아이템 추가하기 5. 북마크 아이템 추가하기 북마크 바에 여러 아이템을 추가해보고 추가한 아이템 리스트들을 표시하고 또 삭제하는 기능을 구현해본다. - index.html 북마크 닫기 북마크 열기 + 북마크 추가 이름 주소 취소 추가 index.html에서 class이름이 bookmark-bar인 요소 안에 class이름과 id값이 bookmark-item-add-btn인 div를 작성하고, 그 아래에는 새로운 북마크를 추가할 수 있는 입력폼과 추가버튼을 만들어준다. class 이름과 id 값이 bookmark-item-input-form인 div 안에 class 이름이 bookmark-input인 div를 만들고, 그 안에는 새로운 북마크의 이름과 주소를 넣을 수 있는 input 폼들을 class 이름이 new-boo.. 2023. 11. 13. 북마크바 만들기 4. 북마크 바 만들기 북마크 탭은 열고 닫을 수 있고, 북마크를 추가하는 버튼과 추가한 북마크들을 볼 수 있는 탭이다. index.html에서 class 이름이 main-container인 div 아래에 class이름과 id가 bookmark-open인 div와 class이름과 id가 bookmark-close인 div를 만들고, 각각의 div 안에는 id가 bookmark-open-btn인 div와 bookmark-close-btn인 div를 넣어주고, 텍스트로는 북마크 닫기, 북마크 열기를 작성한다. 그리고 그 아래에는 bookmark-bar라는 class 와 id 를 갖는 div를 만들어주고 주석으로 "북마크 바" 라고 작성한다. 그 다음 bookmark-toggle.js 파일을 만들고 html .. 2023. 11. 11. API를 사용해 명언 설정하기 3. 명언 설정하기 명언 api를 사용해 명언을 나타내본다. index.html에서 class와 id가 quote인 div 요소를 main-wrapper div의 아래에 추가한다. 주석으로 이라고 표시를 해주고, js 폴더 안에 quote.js 파일을 만들고 index.html의 body 태그 제일 아래에 스크립트를 추가한다. - index.html quote.js 에서는 api를 통해 받아온 명언을 웹 페이지에 나타내주는 기능을 개발한다. - quote.js const API_URL = "https://random-quote.hyobb.com/"; // https://port-0-random-quote-4uvg2mleme84ru.sel3.cloudtype.app/ const quoteElement = .. 2023. 11. 10. 검색바 만들기 2. 검색 바 만들기 검색어를 입력하면 구글의 검색 결과 창으로 이동하는 기능을 개발해본다. index.html 에서 main-wrapper div 안에 class 이름이 search인 div를 작성해주고, 그 안에는 id 이름이 search-input인 input 태그를 작성 한다. input 태그에는 placeholder로 "검색어를 입력하세요" 라는 문구를 작성해주고, 그 다음 js 폴더에 search.js 파일을 만들고, index.html의 body 태그 아래에, 생성한 search.js 를 html 문서에 포함시킨다. - index.html 코드를 저장하고, go live 버튼을 눌러 코드를 실행하면, 화면에 "검색어를 입력하세요" 라는 글자가 적힌 input 폼이 나타나있는 것을 볼 수 있다.. 2023. 11. 9. 디지털 시계 개발하기 1. 시계 만들기 vscode에 들어가서 탐색기를 통해 newtab 이라는 폴더를 만들고 선택한 뒤, index.html 파일을 작성한다. - index.html body태그 안에는 class이름이 main-container인 div를 만들어준 다음, "크롬 시작화면"에서 사용될 오늘의 날짜와 현재 시간을 알려주는 디지털 시계를 만들어볼 것이기 때문에 먼저 js라는 폴더를 만들고 clock.js라는 자바스크립트 파일을 만들어준다. main-container div의 안에 main-wrapper라는 class이름을 갖는 div를 만들고, 그 안에는 today-info라는 div와, class와 id이름이 date, time인 div 두 개를 작성한다. 마지막으로 코드를 구분하기 쉽게 주석으로 "날짜와 요일.. 2023. 11. 8. 요소의 레이아웃을 결정하는 방법-display 2. display display는 HTML 요소들을 어떻게 보여줄지를 결정하는 속성으로, 실제로 정말 많이, 그리고 유용하게 사용하는 속성이며 웹을 개발하기 위해 꼭 알고 있어야 하는 속성 중 하나이다. display 속성에는 none, block, inline, inline-block 그리고 grid, flex 등의 다양한 값들이 있다. 1) block, inline, inline-block, none class 이름이 속성값-setting 으로 되어있는 모든 요소들은 CSS 상에서, width 와 height 의 값을 각각 300px, 200px 으로 설정한다. - 예제 html block block-setting inline inline-setting inline-block inline-block.. 2023. 11. 7. 요소를 배치하는 방법-position 1. position position 속성은 웹 문서 상에 요소를 배치하는 방법을 지정한다. position 속성의 값으로는 static, relative, absolute, fixed, sticky 가 있고, top, right, bottom, left 속성으로 요소를 배치할 최종 위치를 결정한다. - 예제 html 1) static - 예제 css .yellow { position: static; } .blue { position: static; } .green { position: static; } 모든 웹 요소들은 기본적으로 position 값이 static 이다. static의 경우, 웹페이지에 노랑 파랑 초록 순서로 쌓이게 된다. 2) relative - 예제 css .yellow { posi.. 2023. 11. 7. 프로젝트 미리보기 및 코드 주소 1. 크롬 시작 화면 만들기 실제 웹 페이지를 개발해본다. 개발한 웹페이지는 가장 마지막에 크롬익스텐션으로 변환해, 크롬 창을 켤 때마다 시작화면으로 사용할 수 있도록 설정까지 해 볼 예정이다. 웹 페이지를 개발하기 전에 먼저 개발할 웹페이지를 살펴보면, 오늘의 날짜와 현재 시간을 나타내는 시계를 만들어보고, 검색어를 입력하면 검색 결과 페이지로 이동하는 기능도 만들고, api를 통해 명언 데이터를 받아와서 화면에 나타내보고, 마지막으로 북마크를 추가하고 삭제하는 기능까지 개발해 볼 예정이다. 이번 웹 페이지를 개발하면서 css 중 제일 많이 사용하는 display 속성과 position 속성을 배우고 본격적으로 웹 페이지를 개발해본다. 2. 프로젝트 코드 주소 참고 https://github.com/h.. 2023. 11. 6. 이전 1 2 3 4 5 다음