이게 정렬하지 않은 block요소(div)+기본값(row)상태로 body가 아래 튀어나와있고 이게 column값을 줘서 정렬된 상태로 튀어나온 부분이 사라졌습니다. div가 block요소이고 정렬이 안된 row상태이니 위처럼 튀어나오는건 이해할 수 있습니다. 그런데 column을 줘서 수직으로 정렬해도 튀어나오는건 그대로여야하지 않나요? 왜 튀어나온게 들어가는거죠?
싸이월드 만들기 1탄 16:48 입니다. .background { width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox { width: 808px; height: 544px; background-image: url("../images/outerbox.png"); /* margin: 20px 0px 0px 20px; */ } padding을 이용해서 간격을 주었는데 padding 말고 margin을 줄 경우 outerbox만 위에서 떨어지는게 아니라 background도 같이 떨어집니다. 이거 왜 이런걸까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 사진과 같이 뜨고 안에 텍스트가 뜨질 않아서 버전 문제인가 하여 깃허브에 올리신 18버전 코드를 붙여넣어도 텍스트만 안뜹니다..ㅠ...
안녕하세요 이제 마지막 파이널 과제를 하고 있고, 기능 추가를 위하여 고민하는데 어떻게 event 값을 반환해야 할 지 감이 안 와서 여쭤봅니다. 제가 추가하고자 하는 기능의 흐름은 // 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. // 3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다. // 4. 3분이 지나면 인증 완료 버튼이 비활성화된다. 이 과정을 통하고 싶어서 2개의 비밀번호 칸에 각각 함수를 생성하여 비밀번호 값을 받아오게 한 뒤에 sendNum 함수에서 2개의 비밀번호 값을 비교하여 동일한 경우에만 인증번호 전송을 가능하게 하고 싶습니다. 그리고 다른 경우에는 alert를 이용하여 비밀번호를 확인하라는 창을 띄우려고 하는데, 비밀번호 값을 얻어내는 함수 pw1 값 꺼내서 어떻게 sendNum 함수에 넣어야 할 지 잘 모르겠습니다... ㅠㅠ 코드 올리겠습니다. 감사합니당..! <!DOCTYPE html> <html lang="ko"> <head> <title>코드캠프 회원가입</title> <link rel="stylesheet" href="./signup.css" /> <script src="./signup.js" defer></script> </head> <body> <div class="container"> <div class="wrapper"> <div class="wrapper__header">코드캠프 회원가입</div> <div class="wrapper__body"> <div class="body__info"> <input type="email" placeholder="이메일을 입력해 주세요." /> <input type="text" placeholder="이름을 입력해 주세요." /> <input type="password" placeholder="비밀번호를 입력해 주세요." id="pw1" onchange="changeValue(event)" /> <input type="password" placeholder="비밀번호를 다시 입력해 주세요." id="pw2" /> <div class="phone"> <input type="text" class="phone__first" maxlength="3" id="p1" oninput="moveCursorFirst()" /> - <input type="text" class="phone__mid" maxlength="4" id="p2" oninput="moveCursorSec()" /> - <input type="text" class="phone__last" maxlength="4" id="p3" /> </div> </div> <div class="body__certificate"> <div class="certificate__send"> <div class="certificate__num" id="certificate__num">000000</div> <button class="send__num" onclick="sendNum()" id="send__num"> 인증번호 전송 </button> </div> <div class="certificate__complete"> <div class="remaining"> <span id="remaining__min">3</span>: <span id="remaining__sec">00</span> </div> <button class="complete__btn" id="complete__btn" disabled> 인증 완료 </button> </div> </div> <div class="body__addition"> <select name="region"> <!-- selected + disabled 같이 이용하면 된다. --> <option value="" selected disabled>지역을 선택하세요.</option> <option value="gg">경기도</option> <option value="seoul">서울</option> <option value="ic">인천</option> </select> <div class="sex"> <div class="women"> <input type="radio" id="women" name="sex" /> <label for="women">여성</label> </div> <div class="men"> <input type="radio" id="men" name="sex" /> <label for="men">남성</label> </div> </div> </div> </div> <div class="divideLine"></div> <div class="wrapper__footer"> <button class="submit">가입하기</button> </div> </div> </div> </body> </html> // 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. // 3. 전송 누르면 인증 번호가 화면에 표시되고, 3분 카운트가 시작된다. 그리고 인증 완료 버튼이 활성화된다. // 4. 3분이 지나면 인증 완료 버튼이 비활성화된다. // 1. 핸드폰 번호 작성 시에 알아서 옆으로 커서 넘어가도록 만들기. const moveCursorFirst = () => { const p1 = document.getElementById("p1"); if (p1.value.length === 3) { document.getElementById("p2").focus(); } }; const moveCursorSec = () => { const p2 = document.getElementById("p2"); if (p2.value.length === 4) { document.getElementById("p3").focus(); } }; // 아직 해결하지 못 함. 비밀번호 가지고 나와야 된다. const changeValue = (event) => { let pw1 = event.target.value; return pw1; }; // 2. 비밀 번호와 비밀 번호 확인이 일치하는 경우에 인증번호 전송 가능해지기. let isStarted = false; const sendNum = () => { // 2. 타이머 실행시키기. let time = 5; let isDisabled = document.getElementById("complete__btn"); if (isStarted === false) { isStarted = true; isDisabled.removeAttribute("disabled"); // 비활성화 끄기. // 1. 6자리 수의 인증 번호 생성하고 화면에 보여주기. let certificateNum = document.getElementById("certificate__num"); let number = String(Math.floor(Math.random() * 1000000)).padStart(6, "0"); certificateNum.innerText = number; let timer = setInterval(function () { // 타이머가 실행되는 경우 if (time >= 0) { const remainingMin = Math.floor(time / 60); const remainingSec = String(time % 60).padStart(2, "0"); // console.log(`${remainingMin}분 ${remainingSec}초`); const min = document.getElementById("remaining__min"); const sec = document.getElementById("remaining__sec"); min.innerText = remainingMin; sec.innerText = remainingSec; time = time - 1; } else { // console.log("타이머가 종료되었습니다."); // 타이머를 종료시키는 경우 isDisabled.setAttribute("disabled", ""); // 비활성화 켜기. clearInterval(timer); isStarted = false; } }, 1000); } else { } };
오늘 강의 처음듣는데 아톰홈페이지가 안뜹니다 ㅠ 30일 무료 라고 해도 깃허브같은것만뜨는데 찾아보니 서비스가 종료됐대요 얼마전에,, vs code로 해도 상관없는건가요?ㄷㄷ ㅠ - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요? 제가 앞에 ../을 붙이지 않았을 경우에는 그림이 제대로 불러와지지 않습니다 <img src="../images/icons/logo.png />를 해야만 정상적으로 사진이 불러와 집니다
프론트엔드 마지막편을 보고 있는데 더이상 execCommand 명령어를 지원하지 않는다고 하여 다른 명령어를 찾아봤는데 옳은 코드 인가요? 현재 url을 복사하는 함수를 작성한 것입니다. function copyUrl(){ let url = window.location.href; navigator.clipboard.writeText(url) .then(()=>{ alert('URL을 클립보드에 복사했습니다.'); }); }
flyctl deploy가 진행이 안돼서 제 컴퓨터에 있는 도커를 삭제하고 다시 실행했더니 아래와 같은 상태에서 멈췄습니다. 구글링 해봐도 잘 모르겠어요 ㅠㅠ 어떻게 해결하면 될까요? C:\Users\dahye\Documents\react-project\d-market-server>flyctl deploy ==> Verifying app config --> Verified app config ==> Building image Remote builder fly-builder-quiet-sunset-984 ready ==> Building image with Buildpacks --> docker host: 20.10.12 linux x86_64 20: Pulling from heroku/buildpacks Digest: sha256:1dd1a9c5f291b47fed1aed3f4c348fdc878380319c15f0e09753a5898482554e Status: Image is up to date for heroku/buildpacks:20 20-cnb: Pulling from heroku/heroku Digest: sha256:c9d053a463c7cd81672a3b0d5d5e26bdcbdffe2782565ccbedc15867b8cddfb9 Status: Image is up to date for heroku/heroku:20-cnb Warning: Platform requested deprecated API '0.6' ===> DETECTING Warning: Buildpack 'heroku/ruby@0.0.0' requests deprecated API '0.4' Warning: Buildpack 'heroku/python@0.0.0' requests deprecated API '0.4' Warning: Buildpack 'heroku/scala@0.0.0' requests deprecated API '0.4' Warning: Buildpack 'heroku/php@0.0.0' requests deprecated API '0.4' Warning: Buildpack 'heroku/go@0.0.0' requests deprecated API '0.4' Warning: Buildpack 'heroku/gradle@0.0.0' requests deprecated API '0.4' 2 of 3 buildpacks participating heroku/nodejs-engine 0.8.16 heroku/nodejs-npm 0.5.2 ===> ANALYZING Previous image with name " registry.fly.io/d-market-server:cache " not found ===> RESTORING ===> BUILDING [Heroku Node.js Engine Buildpack] [Checking Node.js version] Detected Node.js version range: * Resolved Node.js version: 19.7.0 [Installing Node.js distribution] Downloading Node.js 19.7.0 Extracting Node.js 19.7.0 Installing Node.js 19.7.0 [INFO] Installing toolbox [INFO] - yj [INFO] Using npm v9.5.0 from Node [INFO] Installing node modules from ./package-lock.json npm WARN config production Use --omit=dev instead. WARN failed to finish build in graphql: Post " https://api.fly.io/graphql ": context canceled Oops, something went wrong! Could you try that again?
cmd창에서 flyctl deploy를 실행하면 아래와 같은 에러가 뜹니다. 도커 빌더 이미지 관련 오류인것 같은데 어떻게 해결해야 하나요? urce: failed to fetch builder image ' index.docker.io/heroku/buildpacks:20 ': resolve auth for ref index.docker.io/heroku/buildpacks:20 : error getting credentials - err: exec: "docker-credential-desktop": executable file not found in %PATH%, out: ``
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 해당 강의를 보고 간단한 ul li a 를 이용한 메뉴 탭을 연습해 보았습니다. 그런데 이 부분에서 제이쿼리를 짤 때 예제에서는 .testimonial-pic 밑에 img 들이 형제 요소로 잡혀서 siblings 를 이용해 removeClass('active') 를 하여 클릭한 것 외에 나머지들의 active 클래스들이 빠지도록 했는데 제가 만든 부분은 menu 라는 div 에 ul > li > a 로 작성을 하고 a 에 active 를 넣어주다보니 siblings가 먹질 않아서 고민고민하다 제이쿼리는 li 에 class="active"를 넣어주고 css 에서는 active 가 들어가면 그 하위 a에 효과가 들어가도록 한번 짜봤는데 이렇게 하는게 문제 없는 방법일까요? 아니면 더 나은 방법이 있는 걸까요? <!DOCTYPE html> <html lang="ko"> <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>Document</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="content"> <div class="menu"> <ul> <li class="active" data-alt="tab1"><a href="#none">메뉴01</a></li> <li data-alt="tab2"><a href="#none">메뉴02</a></li> <li data-alt="tab3"><a href="#none">메뉴03</a></li> <li data-alt="tab4"><a href="#none">메뉴04</a></li> </ul> </div> <div class="news active" id="tab1"> news01 </div> <div class="news" id="tab2"> news02 </div> <div class="news" id="tab3"> news03 </div> <div class="news" id="tab4"> news04 </div> </div> <script> $('.menu ul li').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.content .news').removeClass('active') $('#'+ $(this).attr('data-alt')).addClass('active') }) </script> </body> </html> * { margin:0; padding:0; box-sizing: border-box; } body { height: 100vh; } a{ text-decoration: none; color: #000; } li { list-style: none; padding: 10px; } .content { border: 1px solid #000; } .menu ul { display: flex; } .menu ul a { padding:5px; color:gray; } .menu ul li.active a{ color: #000; font-weight: 700; } .news { border: 1px solid #000; height: 100px; display: none; } .news.active { display: block; } 위 코드 처럼 만들었고 고민 후 수정해서 정상적으로 작동하는 전체 코드 입니다. 수정전에 문제였던 부분을 코드와 함께 설명드리면, 예제를 따라하면서 하다보니 HTML 에 a 태그에 클래스와 데이터속성을 넣어줘서 <div class="menu"> <ul> <li><a class="active" data-alt="tab1" href="#none">메뉴01</a></li> <li><a data-alt="tab2" href="#none">메뉴02</a></li> <li><a data-alt="tab3" href="#none">메뉴03</a></li> <li><a data-alt="tab4" href="#none">메뉴04</a></li> </ul> </div> css 에서도 a 에 active 효과를 주었고 .menu ul li a.active{ color: #000; font-weight: 700; } 그래서 a태그들은 형제요소가 아니기 때문에 siblings 가 먹지 않았어서 이 문제를 어떻게 해결해야 하나 고민하다 맨 위에 정상작동되는 코드처럼 처리하였습니다. <script> $('.menu ul li a').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.content .news').removeClass('active') $('#'+ $(this).attr('data-alt')).addClass('active') }) </script> 해당 코드로 active를 넣어주고 해도 크게 문제 될게 없는지 더 나은 방법이 있는지 알려주시면 감사하겠습니다. (메뉴 구성을 .menu 클래스 밑에 ul과 li 를 쓰지말고 a 태그만을 이용하여 siblings 형제요소들을 사용하는 방법도 생각했으나 메뉴를 흔히 ul li로 만들기 때문에 해당 방법은 사용하지 않았습니다.)
