173만명의 커뮤니티!! 함께 토론해봐요.
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>맛집지도</title> <meta name="author" content="동네코딩" /> <meta name="description" content="맛집지도 서비스" /> <meta name="keywords" content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <h1 class="nav-title">맛집지도</h1> <button class="nav-contact">Contact</button> </div> </div> </nav> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">한식</button ><button class="category-item">중식</button ><button class="category-item">일식</button ><button class="category-item">양식</button ><button class="category-item">분식</button ><button class="category-item">구이</button ><button class="category-item">회/초밥</button ><button class="category-item">기타</button> </div> </div> </div> </section> <!-- 카테고리 --> <div id="map" class="inner"></div> <!-- 카카오지도 --> </main> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=da893e5911fb51d60018677ccb00c7be" ></script> <script src="script.js"></script> </body> </html> var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴 @font-face { font-family: "KyoboHandwriting2020A"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff") format("woff"); font-weight: normal; font-style: normal; } * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 10px; font-family: "KyoboHandwriting2020A"; } nav { /* background-color: #e69a06; */ } .nav-container { padding: 1rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav-title { font-size: 3rem; } .nav-contact { font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title { font-size: 3.5rem; } .category-item { width: 25%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: #e69a06; cursor: pointer; } .inner { padding: 0 1.5rem; } @media all and (min-width: 1024px) { .inner { max-width: 1024px; margin: 0 auto; } } /* 카카오맵 CSS */ body { height: 100vh; } nav { height: 59px; } main { padding-top: 1.5rem; height: calc(100% - 59px); display: flex; flex-direction: column; } #map { flex-grow: 1; width: 100%; height: 100%; } 이렇게 작성하였습니다. 자꾸 에러가 나서 자료 그대로 복붙한 후 appkey만 수정해주었습니다! 자꾸 위와 같은 에러가 뜹니다. 사이트 도메인도 위와 같이 설정하였고 앱키도 위와 같이 설정하였는데 자꾸 에러가 뜨는 이유는 뭔가요..
HTML/CSS javascript aws git mysql rest-api github
jhe0903
2025-01-17T08:48:36.282Z
댓글 2
좋아요 0
조회수 823
해결됨
[코드캠프] 시작은 프리캠프
.left_body_header_line{ border-top: 1px dotted black; background-color: aqua; } left_body_header의 자식(left_body_header_line)border-top이잖아요 그러면 제가 밑줄 친 곳에 점선이 들어가야 하는거 아닌가요?? border의 top이면 상단부분이잖아요
이서현
2025-01-16T14:08:13.814Z
댓글 2
좋아요 0
조회수 112
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브) 이 부분 캡쳐 보면서 코드 따라쳐도 오류가 나오네요 완성 코드 메일로 부탁드립니다. 3326612@naver.com
HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger
17246612
2025-01-16T07:40:48.807Z
댓글 2
좋아요 0
조회수 175
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
via.placeholder.com 가 더이상 없어서 인터넷 찾아보니 https://placehold.co/ 여기가 되더라구요 그래서 <div class="grid grid-cols-3 gap-4"> <img src="https://placehold.co/400x400.png?text=City" alt="City Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Landscape" alt="Landscape Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Mountain" alt="Mountain Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=River" alt="River Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Forest" alt="Forest Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Ocean" alt="Ocean Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Desert" alt="Desert Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Waterfall" alt="Waterfall Image" class="w-full h-full rounded-lg shadow-md" /> <img src="https://placehold.co/400x400.png?text=Beach" alt="Beach Image" class="w-full h-full rounded-lg shadow-md" /> </div> 이렇게 주소 설정하니 잘 됩니다.
HTML/CSS javascript 반응형-웹 tailwindcss
김명원
2025-01-16T04:11:04.189Z
댓글 2
좋아요 0
조회수 887
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
안녕하세요 ~ 배경색은 어떻게 설정하면 될까요 ?? shift + r 누르고 도형을 만드니까 배경색이 똑같이 흰색이라서 구분이 안되네요 ㅠ
HTML/CSS javascript sass jquery scss
SJ
2025-01-15T09:24:46.658Z
댓글 2
좋아요 1
조회수 171
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
질문 주실 때 항상 2가지를 지켜주세요. 오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기 HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기 만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 위의 사진에서 폴더는 어디서 다운로드 하면 될까용 ?
HTML/CSS javascript sass jquery scss
SJ
2025-01-15T08:58:12.884Z
댓글 2
좋아요 1
조회수 393
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
이건 어떻게 해야할까요..? ㅠㅠ
HTML/CSS javascript bootstrap emmet
성주
2025-01-14T12:15:52.162Z
댓글 2
좋아요 0
조회수 180
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.) - 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~ - 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요. <meta http-equiv="X-UA-Compatible" content="ie-edge"> 인터넷 익스플로러가 사라진 지금도 쓰이나요?
파이팅해야지
2025-01-13T14:15:45.788Z
댓글 1
좋아요 0
조회수 136
해결됨
인터랙티브 웹 개발 제대로 시작하기
let currentItem; function activate(elem){ // 활성화 : 문열기 elem.classList.add('door-open'); currentItem = elem; } function inactivate(elem){ // 비활성화 : 문닫기 elem.classList.remove('door-open'); } 이 부분에서요, let, const 변수는 범위가 {} 기준이라고 알고있습니다. 그런데, activate()에서 currentItem에 elem값을 넣어주면서 {} 범위가 끝났는데, inactivate()에서 currentItem의 값을 확인하고 실행한다는게 이해가 잘 안됩니다.
HTML/CSS javascript 인터랙티브-웹
RooRoo
2025-01-13T04:28:57.827Z
댓글 1
좋아요 0
조회수 142
해결됨
이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
3-2에서 css코드 작성 완료후, 3-3에서 js코드 작성하시는데 js 앞부분이 잘린거 같아요.
HTML/CSS javascript jsp spring spring-boot spring-security
이승헌
2025-01-12T08:37:44.275Z
댓글 2
좋아요 0
조회수 334
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
.category-item에서 width를 24%로 해야 4등분이 되고 25%로 하면 3등분이 됩니다. 이건 제가 질문하려는 내용과 뭔가 관련이 있는 것 같아서 말씀드리는거고 css #map에서 height를 픽셀로 안하면 지도가 나오지도 않고 픽셀로 해도 지도가 일부분만 나옵니다. 지도자체를 인용하는거는 문제가 없어보이는데 왜 안나올까요? @font-face { font-family: 'ChosunCentennial'; src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/ChosunCentennial.woff2') format('woff2'); font-weight: normal; font-style: normal; } *{ padding: 0; margin: 0; box-sizing: border-box; } html{ font-size: 10px; font-family: 'ChosunCentennial'; } nav{ background-color: white; } .nav-container{ padding: 1rem 0; display: flex; flex-direction: row; justify-content:space-between; align-items: center; } .nav-title{ font-size: 3rem; } .nav-contact{ font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title{ font-size: 3.5rem; } .category-item{ width: 24%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner{ padding: 0 1.5rem; } @media all and (min-width: 1024px){ .inner{ max-width: 1024px; margin: 0 auto; } } /*카카오맵 css*/ body{ height: 100vh; } nav{ height: 59px; } main{ padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map{ flex-wrap: 1; width: 100%; height: 100px; }
HTML/CSS javascript aws git mysql rest-api github
거북이
2025-01-10T07:30:23.219Z
댓글 1
좋아요 0
조회수 194
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
CSS 구조 문의드립니다. Wrapper를 이용해서 인증번호, 재발송, 우편번호 찾기 버튼을 화면 안으로 넣고 싶은데 어떻게 하는지를 도저히 모르겠습니다.. 아시는 분은 도와주시면 정말 감사하겠습니다. style.css 일부 /* Import Local CSS */ @import url('/css/reset.css'); @import url('/css/variables.css'); * { font-family: var(--primary-kr); font-weight: 500; box-sizing: border-box; } body { margin: 0; font-family: var(--primary-kr); color: var(--dark-black); font-size: 14px; } .container { width: 100%; max-width: 393px; margin: 0 auto; padding: 16px; background-color: var(--white); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; box-sizing: border-box; font-family: var(--primary-kr); } .phone-input-wrapper { display: flex; /* 플렉스 박스 설정 */ justify-content: space-between; } .phone-input-wrapper input[type="tel"] { width: 60%; /* 입력 필드가 가변적인 공간을 차지 */ padding: 10px; border: 1px solid var(--gray); font-size: 14px; height: 40px; /* 동일한 높이 */ box-sizing: border-box; /* 패딩과 테두리를 포함한 크기 계산 */ } .phone-input-wrapper .btn-certification { width: 40%; /* 선택박스의 고정 너비 */ height: 40px; /* 입력 필드와 동일한 높이 */ padding: 10px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; /* 패딩 포함 */ } /* 인증번호 입력 필드 */ .auth-input-wrapper { display: flex; /* Flexbox로 가로 정렬 */ align-items: center; /* 세로 중앙 정렬 */ justify-content: space-between; width: 100%; /* 부모 요소의 너비를 꽉 채움 */ max-width: 393px; box-sizing: border-box; /* 패딩 포함 */ position: relative; /* 타이머 배치를 위해 필요 */ flex-wrap: wrap; } .auth-input-wrapper input { flex: 0; /* 입력 필드가 가용 공간을 차지 */ height: 40px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; min-width: 70%; /* 최소 너비 설정 */ } .auth-input-wrapper .timer { flex: 0; position: absolute; /* 입력 필드 내부 배치 */ right: 45%; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--alert-red); pointer-events: none; /* 클릭 불가 */ } .auth-input-wrapper .reset { display: flex; position: absolute; align-items: center; right: 40%; justify-content: center; text-decoration: none; /* 기본 링크 스타일 제거 */ margin-left: 10px; /* 타이머와의 간격 */ overflow: hidden; } .auth-input-wrapper .reset-link img { width: 16px; /* 아이콘 크기 */ height: 16px; } .auth-input-wrapper .reset-link:hover { background-color: var(--lightblue); /* 호버 시 색상 변경 */ transition: background-color 0.2s ease; } .auth-input-wrapper .btn-resend { flex: 1; height: 40px; font-size: 14px; color: white; background-color: var(--blue); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 60px; /* 버튼 최소 너비 */ } /* 주소 필드 래퍼 */ .address-wrapper { display: flex; align-items: center; width: 100%; /* 화면 너비에 맞춤 */ box-sizing: border-box; } .address-wrapper input[type="text"] { width: 60%; height: 40px; padding: 10px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; min-width: calc(70% - 10px); /* 최소 너비 */ } .address-wrapper .btn-post-search { flex: 0 0 auto; /* 버튼 크기 고정 */ height: 40px; padding: 0 15px; font-size: 14px; color: white; background-color: var(--navybutton); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 100px; /* 버튼 최소 너비 */ } signup-email.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <!-- Signup Form --> <div class="signup-content"> <div class="signup-field"> <label for="username">아이디<em>*</em></label> <input type="text" id="username" placeholder="아이디 입력" required> </div> <div class="signup-field"> <label for="password">비밀번호<em>*</em></label> <input type="password" id="password" placeholder="영문+숫자+특수문자 8자 이상" required> </div> <div class="signup-field"> <label for="password-check">비밀번호 확인<em>*</em></label> <input type="password" id="password-check" placeholder="비밀번호 확인 입력" required> </div> <div class="signup-field"> <label for="name">이름<em>*</em></label> <input type="text" id="name" placeholder="이름 입력" required> </div> <div class="signup-field"> <label for="email"> 이메일<em>*</em> </label> <div class="email-input-wrapper"> <input type="email" id="email" name="email" placeholder="이메일 입력" required> <select name="email-domain" id="email-domain"> <option value="">선택하기</option> <option value="gmail.com">gmail.com</option> <option value="naver.com">naver.com</option> <option value="daum.net">daum.net</option> </select> <span class="dropdown-icon"></span> <!-- SVG 아이콘 위치 --> </div> </div> <div class="signup-field"> <label for="phone">휴대폰<em>*</em></label> <div class="phone-input-wrapper"> <input type="tel" id="phone" placeholder="숫자만 입력" required> <button class="btn-certification">인증번호</button> </div> </div> <div class="signup-field"> <label for="auth-code"></label> <div class="auth-input-wrapper"> <input type="text" id="auth-code" placeholder="인증번호 입력" required> <span class="timer">00:00</span> <a href="#" class="reset"> <img src="/images/reset.svg" alt="Reset Icon"> </a> <button class="btn-resend" type="button">재발송</button> </div> </div> <div class="signup-field"> <label for="address">주소<em>*</em></label> <div class="address-wrapper"> <input type="text" id="address" placeholder="주소 입력" required> <button class="btn-post-search">우편번호 찾기</button> </div> </div> <div class="signup-field"> <label for="address-detail"></label> <input type="text" id="address-detail"> </div> <div class="signup-field"> <label for="address-detail">상세주소<em>*</em></label> <input type="text" id="address-detail" placeholder="상세 주소 입력" required> </div> <p class="notice">배송지에 따라 상품 정보가 달라질 수 있습니다.</p> <div class="thirdline"></div> <!-- 위에 줄 --> </div> </body> </html> style.css
HTML/CSS jquery 모바일-디자인 figma 포트폴리오
JOONBUM
2025-01-09T14:26:25.570Z
댓글 2
좋아요 1
조회수 203
미해결
CSS Flex와 Grid 제대로 익히기
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데... 어떤걸 누르신건가요? 항상 보면서 너무 궁금해서 이것저것 눌렀는데 당췌 모르겠쉐용 ㅠㅠ 알려주셔요~( 다른 아는 분이라도...)
Yeon Woo Kim
2025-01-09T08:40:23.440Z
댓글 1
좋아요 1
조회수 173
미해결
인터랙티브 웹 개발 제대로 시작하기
perspective : 800px을 .stage에 넣으면, 다르게 회전이 되어야 하는데 저는 .door에 넣은 것처럼 똑같이 일정하게 회전 됩니다. 이유를 모르겠어요~
HTML/CSS javascript 인터랙티브-웹
RooRoo
2025-01-09T01:52:28.873Z
댓글 1
좋아요 0
조회수 126
미해결
애플 웹사이트 인터랙션 클론!
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요? 선생님은 <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> 이렇게 주셨는데 만약 제가 따로 실습할때의 이미지 최대크기가 1280x720 이라면 캔버스 width 크기를 1280으로 해줘야하는게 맞나요? 예제 코드 그대로 쓰고 캔버스 width값 1920하니까 이미지가 왼쪽으로 좀 치우쳐져 있어서 어제오늘 계속 애쓰다가 캔버스 width값을 이미지 최대크기값만큼 1280으로 주니까 해결이됬어요.. 그러면 이제 궁금한게 모바일일때 화면에 꽉 채우게하고싶은데 어떻게 줘야할지 감이안잡힙니다 ㅠ-ㅠ
HTML/CSS javascript 웹-디자인 svg 인터랙티브-웹
반가우면반갑다고해
2025-01-08T12:56:35.281Z
댓글 0
좋아요 0
조회수 148
미해결
처음 만난 리액트(React)
npx create-react-app 까지는 잘 되는데 그 밑으로는 이런 오류가 뜨면서 되지가 않습니다. .
a김메린
2025-01-08T09:54:34.142Z
댓글 2
좋아요 1
조회수 504
미해결
처음 만난 리액트(React)
ERROR in ./src/chapter_03/Library.jsx 5:0-24 Module not found: Error: Can't resolve 'Book' in '/../my-react1/src/chapter_03' Did you mean './Book'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /../my-react1/node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too. 어떻게 해야 할까요?
noel75
2025-01-08T08:54:16.226Z
댓글 3
좋아요 1
조회수 418
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
index.mjs를 index.js로 바꾸려면 어케해야하나요
nrlee
2025-01-08T01:58:59.553Z
댓글 1
좋아요 0
조회수 171
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
index.mjs 를 index.js로 바꾸려면 어케해야하나요
nrlee
2025-01-08T01:58:27.357Z
댓글 1
좋아요 0
조회수 166
미해결
처음 만난 리액트(React)
안녕하세요, 챕터 05 강의를 듣고 실습 중에 있었는데요. local 3000에서는 이런 에러 메시지가 뜨고, 터미널에서는 이런 메시지가 뜹니다. CommentList.jsx index.js 헷갈리는 부분이 많은데 설명 부탁드립니다!
dlwlgur37
2025-01-07T11:39:45.573Z
댓글 2
좋아요 0
조회수 224
