묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
카카오맵이 나오지를 않아요ㅠㅠㅠㅠ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="layout.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <hi class="nav-title">맛집지도</hi> <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=b156fcbd2ea3a6340f64c07f5eaef559" ></script> <script src="layout.js"></script> </body> </html> @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; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: "KyoboHandwriting2020A"; font-size: 10px; } nav { /* background-color: orange; */ } .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; justify-content: right; border: none; 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: 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-grow: 1; width: 100%; height: 100%; } 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); //지도 생성 및 객체 리턴 이렇게 했는데 지도가 안 나와요ㅠㅠ 어디가 틀린 걸까요
-
해결됨[코드캠프] 시작은 프리캠프
강의자료 문의
안녕하세요, 강의 처음으로 듣고 있는데요!강의자료가 노션(링크)에 있다고 써져있는데, 어디있는 걸까요..?ㅠㅠ (링크가 활성화되어있지 않습니다..)제가 못 찾고 있는건지 도무지 보이지가 않습니다ㅠㅠ지금 1강 들었는데 영상 하단에 강의자료 링크도 안뜨구요..강의 자료를 보기 위한 노션 링크 달아주실 수 있을까요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
mysql 접속 로그인
다 알맞게 작성한거 같은데 계속 오류가 나요ㅠㅠ hostname에 퍼블릭 ip를 작성하는것이 맞을까요?강의따라서 수업 내용은 잘 따라하였습니다
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
.stop().slideDown과 같이 슬라이드 다운 앞에 스탑을 쓰는 이유
-.stop().slideDown과 같이 슬라이드 다운 앞에 스탑을 쓰는 이유가 뭘까요? 강의에서는 큐?를 없애기 위해서라고 들렸는데 이해를 못하겠어요 ㅠ 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨[코드캠프] 강력한 CSS
노션 학습 링크
노션 학습 자료 링크는 어디서 볼 수 있나요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
궁금한점
예를 들면 네이버에 접속을 하면 "네이버 증권", "네이버 웹툰"등등 여러 카테고리가 나오지 않습니까 그런데 이 모든 페이지를 html로 구현하려니 모든 버튼에 a태그와 그에 맞는 html웹페이지를 연동시켜야 하더라고요... 혹시 이렇게 않고 java script를 이용하여 구현하는 방법이 따로 있을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
배경이미지 풀스크린 검색창 질문입니다.(background-attachment : fixed)
강의에서 7분40초 쯤입니다!background-attachment: fixed; 를 적용했는데 이미지가 창에 꽉 차게 변하지 않습니다.이미지 사이즈가 작아서 그런걸까요? 이미지 사이즈는 890 X 501 입니다.아래 그림처럼 나옵니다.body{ background-image: url(/Image/시부야01.jpg); background-repeat: no-repeat; background-position: center center; /* background-size: cover; */ background-attachment: fixed; }
-
미해결[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용
예제파일이 모두 빈 파일입니다.
예제파일 다운로드 하였으나 모두 빈파일입니다.
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
링크 질문입니다.
혹시 유튜브가 아닌 네이버 map 링크나 blog 주소를 가져오려면 어떻게 해야 할까요???
-
해결됨처음 만난 리액트(React)
context 질문 드립니다
안녕하세요 소플님1 context가 여러 컴포넌트에 접근을 할 수 있다고 하셨는데context는 상태 관리인건가요? 2 현업에서는 스타일 컴포넌트와 scss 중 어느걸 어 많이 사용 하나요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
예시사이트 확인부탁드립니다. 비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
강사님 예시 사이트 저도 접속이 안됩니다 크롬 , 엣지 브라우저 둘다 해봐도 안됩니다. 확인 부탁드립니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
fork 주소가 어떻게 되나요?
강의노트 주소는 어디에 있나요 아무리 찾아봐도 없네요
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
제이쿼리 탭메뉴 클릭 질문
개인 포트폴리오 웹 사이트 작업 중에 질문이 있습니다.기초반 중급반 고급반 버튼 각자 클릭하면 색깔이 바뀌면서 아래에 4개의 사진들이 바뀌는 형태로 하고 싶은데 잘되지 않습니다. html <div class="online-inner"> <section class="online"> <div class="online-title"> <h2> 온라인 강의 미리보기 <i class="fa fa-line-chart" aria-hidden="true"></i> </h2> </div> <div class="online-content"> <div class="online-btn"> <a class="active" href="#none">기초반</a> <a href="#none">중급반</a> <a href="#none">고급반</a> </div> <div class="online-tabs"> <div class="online-tab1"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab1-img-01.jpg"></a> <a href="#none"><img src="images/tab1-img-02.jpg"></a> <a href="#none"><img src="images/tab1-img-03.jpg"></a> <a href="#none"><img src="images/tab1-img-04.jpg"></a> </div> </div> <div class="online-tab2"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab2-img-01.jpg"></a> <a href="#none"><img src="images/tab2-img-02.jpg"></a> <a href="#none"><img src="images/tab2-img-03.jpg"></a> <a href="#none"><img src="images/tab2-img-04.jpg"></a> </div> </div> <div class="online-tab3"> <div class="online-tab-inner"> <a href="#none"><img src="images/tab3-img-01.jpg"></a> <a href="#none"><img src="images/tab3-img-02.jpg"></a> <a href="#none"><img src="images/tab3-img-03.jpg"></a> <a href="#none"><img src="images/tab3-img-04.jpg"></a> </div> </div> </div> </div> </section> </div> CSS.online-inner { background-color: #5f98e7; } .online { width: 1300px; margin: auto; padding: 50px 0; } .online-title { text-align: center; } .online-title h2 { font-size: 35px; font-weight: 600; color: #fefefe; } .online-content {} .online-btn { text-align: center; } .online-btn a { display: inline-block; padding: 10px 18px; margin-right: 30px; border: 1px solid #295aa0; border-radius: 30px; background-color: #fff; } .online-btn .active { background-color: #132f55; color: #fff; } .online-tabs {} .online-tab-inner { padding-top: 50px; text-align: center; } .online-tab-inner a { margin-right: 20px; } .online-tab-inner a img { width: 280px; } .online-tab1 {} .online-tab2 { display: none; } .online-tab3 { display: none; } $('.online-btn button:nth-child(1)').click(function(){ $('.online-tab1').show() $('.online-tab2').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(2)').click(function(){ $('.online-tab2').show() $('.online-tab1').hide() $('.online-tab3').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.online-btn button:nth-child(3)').click(function(){ $('.online-tab3').show() $('.online-tab1').hide() $('.online-tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })마지막 jquery입니다. 웹디자인기능사 시험처럼 탭메뉴 2개일때는 됐는데 3개로 형태바꾸니까 잘되지 않습니다.
-
해결됨처음 만난 리액트(React)
미니블로그
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 마지막 미니블로그 테스트만 남았는데코드를 깃헙에서 그대로 가져와 복붙을 하고 실행해도 사파리에서는 null is not an object크롬에서는 Cannot read properties of null (reading 'useContext') TypeError: Cannot read properties of null (reading 'useContext') 오류가 뜹니다 어떻게 해야 할까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Fly.io 에 그랩마켓 서버 배포하기 수업 중 오류 발생
docker 관련 에러인것 같습니다.docker 관련 파트 언제 했는지 찾을 수가 없어서 수업 다시 들어 보면서 해결하지도 못하네요어떻게 손대야 할 지 모르겠습니다.
-
해결됨[코드캠프] 시작은 프리캠프
싸이월드 2탄 home.css 질문
마지막 homework 문제에서 저는 box라고 지정했는데 저 margin-top부분을 padding으로 하면 적용이 안되던데 padding은 상위 태그부분에만 작용하는 건가요?
-
미해결<1만 시간의 법칙> 웹 페이지 제작하기
깃허브에서 URL이 주어지지 않아요
깃허브에서 레퍼지토리 만들고 파일도 업로드 한 후 page에서 source branch를 none에서 main으로 바꾸고 저장도 했는데 저장이 되었다는 것만 뜨고 강의처럼 URL을 주지 않는데,,, URL을 얻을 수 있는 다른 방법이 있나요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
for반복문 안에 for반복문으로 배열 요소 뽑기
인강 한바퀴 다 듣고 이제 제 개인 프로젝트를 하나 해보고싶어 다시 들으면서 조금 변형시키면서 만드는 중입니다.객체 안에 배열을 하나 넣어뒀는데, 그것을 반복문으로 배열의 요소 만큼 태그를 생성시키고 싶어 이중for문을 사용했는데, characters의 다음요소가 들어가버려서 모양이 이상하게 됩니다.... 이렇게는 아예 못쓰는건가요?character-tag에 css를 설정해두어 없애면 안됩니다.사진이 넘치는건 overflow: hidden을 안했습니다.
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
web animation api를 통한 apple page
안녕하세요강의를 들으면서 궁금한 사항이 생겨서 질문드립니다!1분 코딩님께서 제작하신 강의중에 apple페이지를 클론 코딩하는 강의가 있는데web animation API를 통해서는 똑같이 만들수없을까요??그리고 web animation API를 통해서 canvas를 조작할수는 없을까요?
-
미해결실전! 웹사이트제작! Step By Step! _Basic (한화캐미컬_반응형웹)
태그 사용 관련 질문 있습니다.
안녕하세요, 좋은 강의 제공 해주셔서 감사드립니다.section.about 영역 마크업 강의 수강 중 궁금한게 있어 질문 드립니다.img 태그를 감싸실 때 p 태그를 사용 하셨는데 따로 이유가 있을까요? UI상 리스트에서 하나의 문단으로써 자리하기에 그런것일까요?<li> <a href="#"> <p class="img"> <img src="img/about_1.jpg" alt="회사소개" /> </p> <div class="text"> <h3>회사소개</h3> <p>삶의 가치를 높이는 기술기업, 한화 케미칼</p> <p class="more">more</p> </div> </a> </li>
