묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결웹 프론트엔드를 위한 자바스크립트 첫걸음
"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다
"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다.Chrome과 Safari에서 각각 테스트했으나 결과는 같았습니다.문제 해결 부탁드립니다.
-
미해결한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물 앨범 만들기 pushtState 관련
안녕하세요, 선생님.수업 잘 듣고 있습니다! 동물 앨범 만들기-3 수업을 듣다가 pushState메서드 사용할 때 가장 첫번째 값에 null을 넣는 이유가 궁금합니다!감사합니다! const tabBar = new TabBar({ $app, initialState: "", onClick: async (name) => { history.pushState(null, `${name}`, name); this.setState({ ...this.state, currentTab: name, photos: await request(name === "all" ? "" : name), }); }, }); ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물 앨범 만들기 사진 관련 문의
안녕하세요. 동물 앨범 만들기 부분을 듣고 있습니다. 올려주신 사이트에 들어가려고 하니까 '연결이 비공개로 설정되어 있지 않습니다' 라는 문구가 나와서 여러가지 방법을 사용해봤는데, 마지막에 불법 정보 유해 사이트쪽으로 넘어가지는데 혹시 어떻게 해결할 수 있을까요?⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
자바스크립트 첫걸음 교재 질문..
자바스크립트 첫걸음 교재 책을 구매했는데이 교재로 웹 프론트엔드를 위한 자바스크립트 첫걸음, 한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지교재로 이 두개 강의 같이 공부할수 있나요? 아니면 별도로 정리를 해야할가요
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
URL에 따라 리스트 불러오기 - getSortBy()와 getSearchWord()를 활성화 하면 리스트가 사라집니다
const getSortBy = () =>{ if(window.location.search){ const sortText = window.location.search.split('sort=')[1].split('&')[0]; console.log(`getSortBy : ${sortText}`); return sortText; }; return 'total'; }; const getSearchWord = () => { if(window.location.search && window.location.search.includes('search=')){ return window.location.search.split('search=')[1]; }; return ''; }; ... this.state = { startIdx: 0, sortBy : getSortBy(), searchWord: getSearchWord(), region: "", cities: "",}; 일단 문제가 되는 코드는 이 부분 입니다.이부분을 작성 한 이후로, 새로고침 하면 아래 시티리스트가 안나오다가상단 sort 또는 search 를 주석처리 하면 리스트가 출력 됩니다 전체 코드는 아래 git 주소를 같이 봐주시면 감사하겠습니다.https://github.com/KimDay366/onebite_js/tree/main/section09/Trip-Wiki 한시간째 똑같은 코드만 보고 있는데, 계속 봐도 저는 뭐가 문제인지 모르겠네요 ㅠㅠㅠ
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
DOM API-2 1분54초 경 질문드립니다.
안녕하세요 강의 잘 듣고 있습니다 좋은 강의 만들어주셔서 감사합니다!DOM API-2 1분54초 경 질문드립니다. let $type = document.createElement("div"); $type.className = "info-item"; $type.id = "type"; $type.textContent = "말티즈"; console.log($type); 이렇게 출력이 되고 div#type.info-itemlet $type = document.createElement("div"); $type.className = "info-item"; $type.id = "type"; $type.textContent = "말티즈"; console.log($type.outerHTML); 다음과같이 .outerHTML을 출력해야 강의와 같이 아래처럼 출력이 되는데<div class="info-item" id="type">말티즈</div>어떤 차이가 있는 걸까요? 환경설정을 어떻게 하면 강의처럼 그냥 console.log($type);만 출력해도<div class="info-item" id="type">말티즈</div>와 같이 웹사이트 콘솔창에서 볼 수 있을까요? ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물앨범 1-1-2
경로 에러가 나와서 혹시 제 파일구조 때문에 그런지 궁금하여 문의드립니다!일단 파일구조가 아래와 같은 방식으로 구성되어있습니다.(맨위에 lecture라고 따로있습니다 lecture/section06/src) 원래 강의코드koala.html<!DOCTYPE html> <head> <title>Animal Album</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css" /> </head> <body> <div id="app"> <div class="tab-bar"> <a href="/"><div>전체</div></a> <a href="/penguin.html"><div>펭귄</div></a> <a href="/koala.html"><div class="clicked">코알라</div></a> <a href="/panda.html"><div>판다</div></a> </div> <div class="content"></div> </div> <script src="./src/koala.js"></script> </body> 현제 제 코드<!DOCTYPE html> <head> <title>Animal Album</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css" /> </head> <body> <div id="app"> <div class="tab-bar"> <a href="index.html"><div>전체</div></a> <a href="penguin.html"><div>펭귄</div></a> <a href="koala.html"><div class="clicked">코알라</div></a> <a href="panda.html"><div>판다</div></a> </div> <div class="content"></div> </div> <script src="./src/koala.js"></script> </body> 이렇게 해야 화면에 동물사진이 나오는데 혹시 경로 상의 문제인지 아니면 파일구조상 때문에 이렇게 작성해야하는지 궁금하여 문의드립니다! 차후에 강의를 듣고 프로젝트를 할때 불편함을 느낄지.. 걱정되어 문의드립니다!
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
스프링 공부를 하다가 노드 백엔드도 경험해 보고 싶어서 자바스크립트 강의를 들으려는데
백엔드 부분을 위해 필요한 파트는 어디어디인가요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
node_modules 폴더가 생기지 않아요
npm init -y해서 package.json은 생겼는데 npm install express했을때 package-lock.json은 생겼는데 node_modules 폴더가 생기지 않네요 ㅠ
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
최종프로젝트 상세페이지 출력 오류 문의드립니다!
세션 9. 최종 프로젝트cityDetail 개발-2 에서https://trip-wiki-api.vercel.app/ 강사님이 알려주셨던 링크에는 상세페이지 이미지와 받는 정보가 없습니다! 어떻게 상세페이지를 출력할 수 있나요? Japan을 검색창에서 검색하고 상세페이지를 눌렀지만 아무런 정보가 출력되지 않고 있습니다! import Header from "./components/Header.js"; import RegionList from "./components/RegionList.js"; import CityList from "./components/CityList.js"; import CityDetail from "./components/CityDetail.js"; import { request, requestCityDetail } from "./components/api.js"; export default function App($app) { const getSortBy = () => { if (window.location.search) { return window.location.search.split("sort=")[1].split("&")[0]; } return "total"; }; const getSearchWord = () => { if (window.location.search && window.location.search.includes("search=")) { return window.location.search.split("search=")[1]; } return ""; }; this.state = { startIdx: 0, sortBy: getSortBy(), region: window.location.pathname.replace("/", ""), searchWord: getSearchWord(), cities: "", currentPage: window.location.pathname, }; const renderHeader = () => { new Header({ $app, initialState: { currentPage: this.state.currentPage, sortBy: this.state.sortBy, searchWord: this.state.searchWord, }, handleSortChange: async (sortBy) => { const pageUrl = `/${this.state.region}?sort=${sortBy}`; history.pushState( null, null, this.state.searchWord ? pageUrl + `&search=${this.state.searchWord}` : pageUrl ); const cities = await request( 0, this.state.region, sortBy, this.state.searchWord ); this.setState({ ...this.state, startIdx: 0, sortBy: sortBy, cities: cities, }); }, handleSearch: async (searchWord) => { history.pushState( null, null, `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWord}` ); const cities = await request( 0, this.state.region, this.state.sortBy, searchWord ); this.setState({ ...this.state, startIdx: 0, cities: cities, searchWord: searchWord, }); }, }); }; const renderRegionList = () => { new RegionList({ $app, initialState: this.state.region, handleRegion: async (region) => { history.pushState(null, null, `/${region}?sort=total`); const cities = await request(0, region, "total"); this.setState({ ...this.state, startIdx: 0, sortBy: "total", region: region, cities: cities, searchWord: "", currentPage: `/${region}`, }); }, }); }; const renderCityList = () => { new CityList({ $app, initialState: this.state.cities, handleItemClick: async (id) => { history.pushState(null, null, `/city/${id}`); this.setState({ ...this.state, currentPage: `/city/${id}`, }); }, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request( newStartIdx, this.state.region, this.state.sortBy ); this.setState({ ...this.state, startIdx: newStartIdx, cities: { ...this.state.cities, cities: [...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, }, }); }, }); }; const renderCityDetail = async (cityId) => { try { const cityDetailData = await requestCityDetail(cityId); new CityDetail({ $app, initialState: cityDetailData }); } catch (err) { console.log(err); } }; const render = async () => { const path = this.state.currentPage; $app.innerHTML = ""; // 상세 페이지로 이동 if (path.startsWith("/city/")) { const cityId = path.split("/city/")[1]; renderHeader(); renderCityDetail(cityId); } else { renderHeader(); renderRegionList(); renderCityList(); } }; this.setState = (newState) => { this.state = newState; render(); }; const init = async () => { const path = this.state.currentPage; // 메인 페이지 if (!path.startsWith("/city")) { const cities = await request( this.state.startIdx, this.state.region, this.state.sortBy, this.state.searchWord ); this.setState({ ...this.state, cities: cities, }); } // 상세페이지 else { render(); } }; window.addEventListener("popstate", async () => { const urlPath = window.location.pathname; const prevRegion = urlPath.replace("/", ""); const prevPage = urlPath; const prevSortBy = getSortBy(); const prevSearchWord = getSearchWord(); const prevStartIdx = 0; const prevCities = await request( prevStartIdx, prevRegion, prevSortBy, prevSearchWord ); this.setState({ ...this.state, startIdx: prevStartIdx, sortBy: prevSortBy, region: prevRegion, currentPage: prevPage, searchWord: prevSearchWord, cities: prevCities, }); }); init(); } //API.js 코드입니다!export default function CityDetail({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "city-detail"; $app.appendChild(this.$target); const getScoreColor = (score) => { // let scoreNumber = parseInt(score); if (score >= 4) return "green"; if (score >= 3) return "yellow"; return "red"; }; this.template = () => { let cityData = this.state.CityDetail; let temp = ``; if (cityData) { temp = `<div class="image-banner"> <img src="${cityData.image}"/> <div class="city-name"> <div class="city">${cityData.city}</div> <div class="country">${cityData.region} / ${cityData.country}</div> </div> </div> <div class="progress-container"> <div class="info-item"> <div class="label">⭐ Total Score</div> <div class="progress-bar" score-color="${getScoreColor( cityData.total )}" style="--score:${cityData.total * 20}%"></div> </div> <div class="info-item"> <div class="label">💵 Cost</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.cost )}" style="--score:${cityData.info.cost * 20}%"></div> </div> <div class="info-item"> <div class="label">😆 Fun</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.fun )}" style="--score:${cityData.info.fun * 20}%"></div> </div> <div class="info-item"> <div class="label">🚓 Safety</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.safety )}" style="--score:${cityData.info.safety * 20}%"></div> </div> <div class="info-item"> <div class="label">🌐 Internet</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.internet )}" style="--score:${cityData.info.internet * 20}%"></div> </div> <div class="info-item"> <div class="label">💨 Air Condition</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.air )}" style="--score: ${cityData.info.air * 20}%"></div> </div> <div class="info-item"> <div class="label">🍜 Food</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.food )}" style="--score: ${cityData.info.food * 20}%"></div> </div> </div> `; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; /* this.setState = (newState) => { this.state = newState; this.render(); }; */ this.render(); } //cityDetail.js 상세페이지 코드입니다!
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
북마크바 디폴트가 "북마크 열기"로 뜹니다.
강의 : 5. 북마크바 만들기북마크바 디폴트 화면이 '북마크 열기'(bookmark-close)로 뜨면서 북마크가 열려있는 상태(?)로 나옵니다.그리고 북마크 열기를 클릭하면, 의도한 바처럼 '북마크 열기'(bookmark-close)가 뜨면서 북마크가 닫힌 상태로 바뀌고, 다시 클릭 시 '북마크 닫기'(bookmark-open)가 뜨고 북마크가 열린 상태로 나옵니다.즉, 두번째 액션부터 정상적으로 작동이 되는데요 ㅠㅠ [디폴트 화면] 효빈 강사님께서 작성한 예시 그대로 작업했는데 뭐가 문제인걸까요??<!-- 북마크 열린 상태 --> <div class="bookmark-open" id="bookmark-open"> <div id="bookmark-open-btn">북마크 닫기</div> </div> <!-- 북마크 닫힌 상태 --> <div class="bookmark-close" id="bookmark-close"> <div id="bookmark-close-btn">북마크 열기</div> </div> <div class="bookmark-bar" id="bookmark-bar"> <!-- 북마크 바 --> </div>.bookmark-open { display: flex; justify-content: flex-end; position: absolute; top: 0; right: 0; width: 240px; height: 20px; padding: 15px 30px; font-size: var(--xsmall); background-color: rgba(0, 0, 0, 0.5); color: #fff; } .bookmark-close { display: flex; justify-content: flex-end; position: absolute; top: 0; right: 0; width: 240px; height: 20px; padding: 15px 30px; font-size: var(--xsmall); background-color: rgba(0, 0, 0, 0.5); color: #fff; } .bookmark-open div { cursor: pointer; } .bookmark-close div { cursor: pointer; } .bookmark-bar { position: absolute; top: 50px; right: 0; min-height: calc(100vh - 70px); width: 240px; padding: 10px 30px; background-color: rgba(0, 0, 0, 0.5); color: #fff; }const bookMarkBar = document.getElementById("bookmark-bar"); const Open = document.getElementById("bookmark-open"); const Close = document.getElementById("bookmark-close"); // 북마크 바 열기 및 닫기 const bookmarkBarToggle = () => { const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen) { if (isBookMarkBarOpen === "open") { localStorage.setItem("isBookMarkBarOpen", "close"); bookMarkBar.style.display = "none"; Open.style.display = "none"; Close.style.display = "flex"; } else { localStorage.setItem("isBookMarkBarOpen", "open"); bookMarkBar.style.display = "block"; Open.style.display = "flex"; Close.style.display = "none"; } } else { localStorage.setItem("isBookMarkBarOpen", "close"); bookMarkBar.style.display = "none"; Open.style.display = "none"; Close.style.display = "flex"; } }; document .getElementById("bookmark-open-btn") .addEventListener("click", bookmarkBarToggle); document .getElementById("bookmark-close-btn") .addEventListener("click", bookmarkBarToggle);
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
CityList.js에서 api.js 파일의 API_URL이 렌더링이 안되는 오류가 있습니다!
세션 9. 여행지정보 최종프로젝트 작성 중...CityList 개발 13:25분에서 CityList.js를 작성한 후 localhost:3000을 새로고침해도 전혀 변화없이 빈 화면만 출력이 됩니다!api.js에서 API_URL로 전달받을 https://trip-wiki-api.vercel.app/ 에서 도시 정보 40개 정보가 없더라고요, 그래서 웹 화면에 아무것도 출력되지 않아서 문의드립니다! server.js 파일도 /*splat 로 변경해서 "start server" 노드 명령어로 터미널에서 출력되도록 수정 완료했지만, 홈페이지 이미지가 출력되지 않고 있습니다!const express = require("express"); const path = require("path"); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, ".."))); app.get("/*splat", (req, res) => { res.sendFile(path.join(__dirname, "..", "index.html")); }); app.listen(PORT, () => { console.log("START SEVER"); }); export default function CityList({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "city-list"; $app.appendChild(this.$target); this.template = () => { let temp = `<div class="city-items-container">`; if (this.state) { this.state.cities.forEach((elm) => { temp += ` <div class="city-item" id=${elm.id}> <img src=${elm.image}></img> <div class="city-item-info">${elm.city}, ${elm.country}</div> <div class="city-item-score">⭐ ${elm.total}</div> </div> `; }); temp += `</div>`; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물 앨범 만들기 최종 에러 수정부탁드립니다!
현재 제가 동물 앨범 만들기 전체 파일 구조와 index.html 코드는 이렇게 작성하였으며, 강의 내용과 동일하게 작성하였습니다api.js 코드와 TabBar.js 코드입니다. 강의 내용과 동일하게 작성하였습니다.content.js 코드와 index.js 코드를 작성하였습니다.마지막으로 App.js 코드를 작성하였지만, 동물 사진이 웹 화면에 출력이 되지 않고 있습니다!import TabBar from "./components/TabBar.js"; import Content from "./components/Content.js"; import { request } from "./components/api.js"; export default function App($app) { this.state = { currentTab: window.location.pathname.replace("/", "") || "all", photos: [], }; //tabBar const tabBar = new TabBar({ $app, initialState: this.state.currentTab, onClick: async (name) => { history.pushState(null, null, `/${name}`); this.updateContent(name); }, }); //content const content = new Content({ $app, initialState: [], }); //state this.setState = (newState) => { this.state = newState; tabBar.setState(this.state.currentTab); content.setState(this.state.photos); }; this.updateContent = async (tabName) => { console.log(tabName); const name = tabName === "all" ? "" : tabName; const photos = await request(name); this.setState({ ...this.state, currentTab: tabName, photos: photos, }); }; window.addEventListener("popstate", () => { this.updateContent(window.location.pathname.replace("/", "") || "all"); }); const init = async () => { this.updateContent(this.state.currentTab); }; init(); }
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물앨범만들기 코드 에러문의드립니다!
동물 앨범 만들기 3차 까지 들어서 라이브 코드를 작성하였지만, 강의 내용에서 나오는 웹 실행화면이 출력되지 않고 있습니다.또한, 강사님의 깃 주소에 있는 코드들을 그대로 실행해도 강의 내용처럼 나오지 않습니다.강사님이 동물 앨범 만들기 2차 때는 1차에서 작성한 각 동물들의 js파일과 html 파일을 삭제하라고 하셨는데, 막상 1차때 작성한 파일들을 삭제하니까 동물 사진이 웹에 출력되지 않아서 다시 기재하였습니다그래서, 강사님의 깃 주소에는 1차와 2차, 3차 코드는 중복되게 작성하면 안되는 건가요?강사님처럼 웹 화면에 출력될려면 3차 코드만 있으면 되는 건가요?왜 3차 코드만으로 강의 내용처럼 출력이 안되는 걸까요?1차, 2차, 3차의 모든 코드들을 융합해서 작성해야하나요?다음 강의 node.js와 express.js를 진행할 수 가 없어서 급하게 문의드립니다! !
-
미해결[React / VanillaJS] UI 요소 직접 만들기 Part 1
게시판 리스트 만들때 어디부터 use client를 적용할 지 모르겠어요
<리스트> <레코드1/> <레코드2/></리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가?각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
cityList 개발에서 citylist 가 렌더가안되요
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello'); https://trip-wiki-api.vercel.app/?start=0브라우저에서 여기로 들어가도 api 호출값이 안나오고 검은색 창이 떠요 그리고 코드 작성했는데, Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.이런 에러만 console에 찍혀서...코드 사이트에 있는걸로 복사해서 넣어도 마찬가지네요server.js는const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, '..'))); app.get('/*splat', (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); app.listen(PORT, () => { console.log('START SERVER'); });/*splat은 /*name 해도 결과가 같아요 ㅠ express는 5.1.0node는 20 번대 사용중입니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
홈페이지 이미지 추가 방법 문의드립니다!
세션 7, 7. 프로젝트 적용하기프로젝트 적용 시 홈페이지 바탕화면에 이미지를 무료 이미지 사이트인 unsplash 사이트 적용 방식 외에 개인 컴퓨터 c드라이브 문서 및 다운로드 폴더에 있는 이미지를 적용하는 방법이 있나요?unsplash 에서 개인 컴퓨터로 다운로드 받은 이미지를 적용하는 방법에 대해서 궁금합니다!:root { --xlarge: 170px; --large: 28px; --medium: 18px; --small: 16px; --xsmall: 14px; --xxsmall: 10px; } body { margin: 0 auto; width: 100%; font-family: "Noto Sans KR", sans-serif; background-image: url("C:/Users/user/Downloads/image.jpeg"); font-optical-sizing: auto; font-weight: 400; font-style: normal; } .main-container { display: flex; justify-content: center; align-items: center; height: 100vh; position: relative; } .main-container .main-wrapper { text-align: center; position: fixed; } .main-wrapper .date { font-size: var(--large); } .main-wrapper .time { font-size: var(--xlarge); font-weight: 400; margin-top: -35px; } .main-wrapper .search { display: flex; justify-content: center; } .search #search-input { width: 600px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: var(--medium); padding: 15px 0px; border-radius: 30px; border: 0px; text-align: center; margin-top: -10px; } .search #search-input::placeholder { color: rgb(169, 169, 169); font-size: var(--medium); } .quote { font-size: var(--small); position: fixed; bottom: 0; max-width: 800px; padding: 0 10px; margin-bottom: 20px; font-weight: 300; text-align: center; } .bookmark-open { width: 240px; padding: 15px 30px; font-size: var(--xsmall); height: 20px; position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; color: white; background-color: rgba(0, 0, 0, 0.5); } .bookmark-close { width: 240px; padding: 15px 30px; font-size: var(--xsmall); height: 20px; position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; color: white; } .bookmark-close div { cursor: pointer; } .bookmark-open div { cursor: pointer; } .bookmark-bar { width: 240px; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 50px; right: 0px; min-height: calc(100vh - 70px); padding: 10px 30px; color: white; } .bookmark-item-add-btn { padding: 10px; font-size: var(--small); cursor: pointer; display: flex; justify-content: center; border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); border: rgba(241, 241, 241, 0.2) 0.5px solid; margin-bottom: 35px; margin-top: 10px; } .bookmark-item-add-btn:hover { background-color: rgba(255, 255, 255, 0.2); } .bookmark-item-input-form { border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); border: rgba(241, 241, 241, 0.2) 0.5px solid; font-size: var(--small); padding: 12px; margin-top: 20px; margin-bottom: 20px; } .bookmark-item-input-form .bookmark-input { margin-bottom: 12px; } .bookmark-item-input-form .bookmark-input .label { margin-bottom: 3px; font-size: var(--xsmall); } .bookmark-item-input-form .bookmark-input input { width: 200px; height: 20px; border-radius: 5px; margin: 5px; } .bookmark-item-input-btn { display: flex; justify-content: space-between; font-size: var(--xsmall); margin-top: 5px; } .bookmark-item-input-btn div { padding: 5px 35px; border-radius: 5px; border: rgba(241, 241, 241, 0.2) 0.5px solid; cursor: pointer; } .bookmark-item-input-btn div:hover { background-color: rgba(255, 255, 255, 0.2); } .bookmark-list a { color: white; display: flex; text-decoration: none; } .bookmark-list .url-icon { margin-right: 8px; } .url-icon img { vertical-align: middle; } .bookmark-list .bookmark-item { border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); border: rgba(241, 241, 241, 0.2) 0.5px solid; font-size: var(--small); padding: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } .bookmark-item .del-btn { color: lightgray; vertical-align: center; font-size: var(--xxsmall); cursor: pointer; }
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
북마크 추가 버튼 활성화 오류 문의드립니다!
세션 7 6.북마크 아이템 추가하기북마크 추가 버튼을 클릭해도 이름, 주소, 취소, 추가 활성화되지 않고 있습니다.어떠한 코드 오류가 있는 지 오류 코드 체크해주세요!const newBookmarkForm = document.getElementById("bookmark-item-input-form"); let bookmarkList = []; if (localStorage.getItem("bookmarkList")) { bookmarkList = JSON.parse(localStorage.getItem("bookmarkList")); } else { localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList)); } const addBookmarkItem = () => { let bookmarkList = []; if (localStorage.getItem("bookmarkList")) { bookmarkList = JSON.parse(localStorage.getItem("bookmarkList")); } let name = document.getElementById("new-bookmark-name-input").value; let url = document.getElementById("new-bookmark-url-input").value; let createAt = Date.now(); bookmarkList.push({ name: name, url: url, createAt: createAt }); localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList)); document.getElementById("new-bookmark-name-input").value = ""; document.getElementById("new-bookmark-url-input").value = ""; newBookmarkToggle(); }; let isAddBtnClick = false; newBookmarkForm.style.display = "none"; const newBookmarkToggle = () => { isAddBtnClick = !isAddBtnClick; isAddBtnClick ? (newBookmarkForm.style.display = "block") : (newBookmarkForm.style.display = "none"); }; document .getElementById("bookmark-item-add-btn") .addEventListener("click", newBookmarkToggle); document.getElementById("add-btn").addEventListener("click", addBookmarkItem); document .getElementById("cancel-btn") .addEventListener("click", newBookmarkToggle); (function () { const bookmarkBar = document.getElementById("bookmark-bar"); const bookmarkOpen = document.getElementById("bookmark-open"); const bookmarkClose = document.getElementById("bookmark-close"); const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen === "close") { bookmarkBar.style.display = "none"; bookmarkOpen.style.display = "none"; bookmarkClose.style.display = "flex"; } else { bookmarkBar.style.display = "block"; bookmarkOpen.style.display = "flex"; bookmarkClose.style.display = "none"; } const bookmarkBarToggle = () => { const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen === "close") { localStorage.setItem("isBookMarkBarOpen", "open"); bookmarkBar.style.display = "block"; bookmarkOpen.style.display = "flex"; bookmarkClose.style.display = "none"; return; } localStorage.setItem("isBookMarkBarOpen", "close"); bookmarkBar.style.display = "none"; bookmarkOpen.style.display = "none"; bookmarkClose.style.display = "flex"; }; document .getElementById("bookmark-open-btn") .addEventListener("click", bookmarkBarToggle); document .getElementById("bookmark-close-btn") .addEventListener("click", bookmarkBarToggle); })(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>newtab</title> <link rel="stylesheet" href="./css/main.css" /> </head> <body> <div class="main-container"> <div class="main-wrapper"> <div class="today-info"> <div class="date" id="date"> <!-- 날짜&요일 --> </div> <div class="time" id="time"> <!-- 현재 시간 --> </div> </div> <div class="search"> <input id="search-input" autocomplete="off" placeholder="검색어를 입력하세요" /> </div> </div> <div class="quote" id="quote"> <!-- 명언 --> </div> </div> <div class="bookmark-open" id="bookmark-open"> <div id="bookmark-open-btn">북마크 닫기</div> </div> <div class="bookmark-close" id="bookmark-close"> <div id="bookmark-close-btn">북마크 열기</div> </div> <div class="bookmark-bar" id="bookmark-bar"> <!-- 북마크바 --> <div class="bookmark-item-add-btn">+ 북마크 추가</div> <div class="bookmark-item-input-form" id="bookmark-item-input-form"> <div class="bookmark-input"> <div class="new-bookmark-name"> <div class="label">이름</div> <input id="new-bookmark-name-input" /> </div> <div class="new-bookmark-url"> <div class="label">주소</div> <input id="new-bookmark-url-input" /> </div> </div> <div class="bookmark-item-input-btn"> <div class="cancel-btn" id="cancel-btn">취소</div> <div class="add-btn" id="add-btn">추가</div> </div> </div> </div> <script src="./js/clock.js"></script> <script src="./js/search.js"></script> <script src="./js/quote.js"></script> <script src="./js/bookmark-toggle.js"></script> <script src="./js/bookmark.js"></script> </body> </html>
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
북마크바 배치 문의드립니다!
⚠질문 작성법세션 7 5. 북마크바 만들기북마크바 배치가 강의내용이랑 달라서 문의드립니다.북마크바 열기와 닫기 버튼 활성화가 강의랑 다르게 열기 버튼, 닫기 버튼이 따로 실행되어 보여지고 있는데요, 열기랑 닫기를 하나로 북마크바 보여지게 할려면 어떻게 코드 수정해야하나요<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>newtab</title> <link rel="stylesheet" href="./css/main.css" /> </head> <body> <div class="main-container"> <div class="main-wrapper"> <div class="today-info"> <div class="date" id="date"> <!-- 날짜&요일 --> </div> <div class="time" id="time"> <!-- 현재 시간 --> </div> </div> <div class="search"> <input id="search-input" autocomplete="off" placeholder="검색어를 입력하세요" /> </div> </div> <div class="quote" id="quote"> <!-- 명언 --> </div> </div> <div class="bookmark-open" id="bookmark-open"> <div id="bookmark-open-btn">북마크 닫기</div> </div> <div class="bookmark-close" id="bookmark-close"> <div id="bookmark-close-btn">북마크 열기</div> </div> <div class="bookmark-bar" id="bookmark-bar"> <!-- 북마크 바 --> </div> <script src="./js/clock.js"></script> <script src="./js/search.js"></script> <script src="./js/quote.js"></script> <script src="./js/bookmark-toggle.js"></script> </body> </html> const bookmarkBar = document.getElementById("bookmark-bar"); const bookmarkOpen = document.getElementById("bookmark-open"); const bookmarkClose = document.getElementById("bookmark-close"); const bookmarkBarToggle = () => { const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen === "close") { localStorage.setItem("isBookMarkBarOpen", "open"); bookmarkBar.style.display = "block"; bookmarkOpen.style.display = "flex"; bookmarkClose.style.display = "none"; return; } localStorage.setItem("isBookMarkBarOpen", "close"); bookmarkBar.style.display = "none"; bookmarkOpen.style.display = "none"; bookmarkClose.style.display = "flex"; }; document .getElementById("bookmark-open-btn") .addEventListener("click", bookmarkBarToggle); document .getElementById("bookmark-close-btn") .addEventListener("click", bookmarkBarToggle);
-
해결됨웹 프론트엔드를 위한 자바스크립트 첫걸음
명언 설정하는데 위치설정 오류가 있어요!
⚠질문 작성법세션 7 - 4.API를 사용해 명언 강사님처럼 명언을 검색바 밑으로 보여지게 출력하고 싶은데요, 저는 오른쪽으로 명언이 출력되요! 명언바 위치 설정을 어떻게 해야 하는 지 궁금해요?!const API_URL = "https://random-quote.hyobb.com/"; const quoteElement = document.getElementById("quote"); const quoteItem = localStorage.getItem("quote"); const nowDate = new Date(); const month = nowDate.getMonth() + 1; const date = nowDate.getDate(); const setQuote = (result) => { let quote = { createDate: `${month}-${date}`, quoteDate: result }; localStorage.setItem("quote", JSON.stringify(quote)); quoteElement.textContent = result; }; const getQuote = async () => { try { const data = await fetch(API_URL).then((res) => res.json()); const result = data[1].respond; setQuote(result); } catch (err) { console.log(`err:${err}`); setQuote("작은 기회로 부터 종종 위대한 업적이 시작된다. - 데모스테네스"); } }; getQuote();
