묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 갤러리가 안먹혀요 ㅠ
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style8.css"></head><body><div class="container"><div class="left"><header><div class="header-logo"><a href="#"><img src="images/logo-header.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li></ul></div></header></div><div class="right"><div class="slide"><div><a href="#"><img src="images/slide-01.jpg" alt=""></a><a href="#"><img src="images/slide-02.jpg" alt=""></a><a href="#"><img src="images/slide-03.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><a href="#">공지사항</a></div><div class="tab1"><a href="#">운영위원장 후보자 추천을 받고 있습니다.<b>2020.01.09</b></a><a href="#">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a><a href="#">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a><a href="#">보안강화 시스템 작업 안내 공지<b>2019.12.20</b></a><a href="#">부여 가을연꽃축제 10주년 콘서트 축제<b>2019.12.20</b></a></div></div></div><div class="gallery"><div class="tab-inner"><div class="btn"><a href="#">갤러리</a></div><div class="tab2"><a href="#"><img src="images/gallery-01.jpg" alt=""></a></div></div></div><div class="shortcut"><a href="#"><img src="images/shortcut.jpg" alt=""></a></div></div><footer><div class="copy">(주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장<br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니</div><div class="sns"><div><a href="#"><img src="images/sns-01.png" alt=""></a><a href="#"><img src="images/sns-02.png" alt=""></a><a href="#"><img src="images/sns-03.png" alt=""></a></div><div><select><option value="">여주군청 홈페이지</option><option value="">한국관광공사</option><option value="">여행자보험가입</option></select></div></div></footer></div></div><script src="script/jquery-1.12.4.js"></script><script src="script/custum8.js"></script></body></html> @charset "utf-8";body{font-size: 15px;}a{color: #000;text-decoration: none;}.container{}.container>div{ height: 650px; float: left;}.left{ width: 200px;}.right{ width: 800px;}header{}header>div{}.header-logo{ height: 100px; line-height: 130px;}.navi{ margin-top: 30px;}.menu{ padding: 0; width: 90%; margin: auto;}.menu li{ list-style: none; text-align: center; }.menu li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu li:hover>a{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; display: none;}.sub-menu a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu a:hover{ background-color: #000; color: #fff;}.slide{ width: 800px; position: relative; height: 350px; }.slide>div{ font-size: 0;}.slide>div a{ position: absolute; top: 0; left: 0; opacity: 0; animation: slide 10s linear infinite;}.slide>div a:nth-child(1){ animation-delay: 0;}.slide>div a:nth-child(2){ animation-delay: 3.5s;}.slide>div a:nth-child(3){ animation-delay: 7s;}@keyframes slide{ 0%{opacity: 0;} 5%{opacity: 1;} 35%{opacity: 1;} 40%{opacity: 0;} 100%{opacity: 0;}}.items{ overflow: hidden;}.items div{ height: 200px; float: left; box-sizing: border-box;}.news{ width: 300px;}.tab-inner{}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; padding: 5px; width: 130px; text-align: center; border-radius: 5px 5px 0 0;}.tab1, .tab2{ border: 1px solid #000; height: 160px;}.tab1 a{ display: block;}.tab2 img{ width: 100px;}.gallery{ width: 300px;}.shortcut{ width: 200px;}footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.copy{ width: 600px; text-align: center; padding-top: 30px;}.sns{ width: 200px;}.sns div{ text-align: center;}.sns div:first-child{ padding-top: 5px; }.sns div:last-child{ text-align: center; line-height: 35px;}
-
미해결따라하며 배우는 HTML, CSS
단축키 관련 문의
19:00 부분 코드가 꺼지는? 비활성화? 시키는 단축키가 있는걸까요~?
-
해결됨[코드캠프] 시작은 프리캠프
정렬 기능이랑 튀어나오는게 무슨 관계인가요?
이게 정렬하지 않은 block요소(div)+기본값(row)상태로 body가 아래 튀어나와있고이게 column값을 줘서 정렬된 상태로 튀어나온 부분이 사라졌습니다. div가 block요소이고 정렬이 안된 row상태이니 위처럼 튀어나오는건 이해할 수 있습니다.그런데 column을 줘서 수직으로 정렬해도 튀어나오는건 그대로여야하지 않나요? 왜 튀어나온게 들어가는거죠?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
자료 이메일 요청건
안녕하세요, 어제부터 본격적으로 잔재미 코딩님의 강의를 수강 중입니다.공부 중에 강의 자료가 있으면 혼자 복습하는데 좋을 것 같아서 요청드리고자 합니다. 이메일 : minhwa0819@naver.com 확인 감사합니다~
-
해결됨[코드캠프] 시작은 프리캠프
정렬이 제대로 안 돼요
싸이월드 만들기 5탄에서 수업을 따라서 코드를 새로 작성하고 있었는데 저는 albumWrapper 부분에서 css를 작성해도 강의 내용과 다르게 나오고 있습니다. 제가 어느 부분이 틀린 건가요? 강의 시간은 16:54 부분입니다.
-
해결됨[코드캠프] 시작은 프리캠프
padding 말고 margin을 이용할 수 없을까요?
싸이월드 만들기 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도 같이 떨어집니다.이거 왜 이런걸까요?
-
해결됨처음 만난 리액트(React)
메세지가뜨지 않습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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 문의하기를 이용해주세요.
-
해결됨[코드캠프] 시작은 프리캠프
안녕하세요 회원 가입 과제 수행 중 어려운 부분이 있어서 질문 드립니다
과제 진행 상태는 이러합니다.이번에 강의를 보며 처음 입문하게 되어, 부족한 부분이 너무 많다보니 어떤 부분을 수정하면 좋을지 혼자서는 감이 안잡히더라고요.제가 보았을 땐 라디오 박스와 체크박스는 너무 미숙해 보이고 폰트 사이즈 수정도 잘 안되더라고요, 다른 부분도 완성도가 좋진 않은 것 같아서 피드백을 여쭙고 싶어요. 좋은 강의 알게되어 잘 배우고 있습니다 감사합니다. <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입과제</title> <link rel="stylesheet" href="./03-homework.css"> </head> <body> <div class="pb1"> <p></p><p></p> <div class="A1"><h2>회원 가입을 위해 <br>정보를 입력해주세요</h2></div><p></p> <input class="B1" style="border-color: #AACDFF;" type="text" placeholder="* 이메일"><br> <input class="B1" type="text" placeholder="* 이름"><br> <input class="B1" type="password" placeholder="* 비밀번호"><br> <input class="B1" type="password" placeholder="* 비밀번호 확인"><br> <div><p></p> <input class="C1" type="radio" name="gender">여성 <input class="C1" type="radio" name="gender">남성 </div><p></p> <input class="D1" type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. <p><br></p> <div class="E0"> <button class="E1">가입하기</button> </div> </div> </body> </html>CSS 파일 * { box-sizing: border-box; } body { display: flex; justify-content: center; } .pb1 { width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); display: flex; flex-direction: column; align-items: center; } .A1 { width: 466px; height: 94px; color: #0068FF; } .B1 { width: 466px; height: 80px; padding-bottom: 40px; border: 0px; border-bottom: 1px solid #CFCFCF; } .C1{ width: 20px; height: 19.95px; border: 1px solid #D2D2D2; } .D1 { width: 419px; height: 20px; padding-bottom: 40px; border: 0px; border-bottom:1px solid #CFCFCF; } .E0 { width: 470px; height: 70px; padding-top: 30px; border: 0px; border-top:1px solid #CFCFCF; } .E1 { width: 470px; height: 75px; border: 2px solid #AACDFF; border-radius: 10px; background-color: white; font-size: large; font-weight: 500; color: rgb(27, 106, 252); }
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요
../ 을 통한 상위 폴더로의 이동없이 어떻게 <img src="images/icons/logo.png />만으로 사진을 불러오신건가요?제가 앞에 ../을 붙이지 않았을 경우에는 그림이 제대로 불러와지지 않습니다<img src="../images/icons/logo.png />를 해야만 정상적으로 사진이 불러와 집니다
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
box-sizing을 전체선택자에 주면 안되나요
다음과 같이 box-sizing을 전체선택자에 줄경우크롬에선 적용이 되고엣지에선 적용이 안되는데*{ margin: 0; padding: 0; box-sizing: border-box; }(각 div 영역에 box-sizing:border-box줄때는 됩니다.) 웹디자인 기능사에선 크롬,엣지,익스플로러(이제 익스플로러는 퇴출이겠지만..?) 동일하게 출력되어야 할거 같은데.... 결론적으로 전체선택자에 box-sizing:border-box를 주면 안되는걸까요?아래 캡처화면은 크롬과 엣지에서 실행시킨 결과입니다.엣지 화면 크롬 화면 전체 코드입니다.<!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>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="logo"> </div> <nav> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </nav> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="notice"> </div> <div class="banner"> </div> <div class="link"> </div> </div> <footer> <div class="logo2"> </div> <div class="copyright"> </div> <div class="sns"> </div> </footer> </div> <!-- <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> --> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ border: 1px solid hotpink; width: 1200px; height: 700px; margin: auto; } header{ width: 1200px; height: 100px; border: 1px solid green; } header .logo{ width: 200px; height: 100px; border: 1px solid yellow; float: left; } header nav{ width: 600px; height: 100px; border: 1px solid blue; float: right; } header nav ul { } .slide{ } .slide div{ border: 1px solid green; height: 300px; } .items{ overflow: hidden; } .items div{ border: 3px solid purple; height: 200px; float: left; box-sizing: border-box; } .notice{ width: 500px; } .banner{ width: 350px; } .link{ width: 350px; } footer{} footer div{ border: 2px solid blue; height: 100px; float: left; box-sizing: border-box; } .logo2{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; }
-
미해결반응형 웹사이트 포트폴리오(App Official Landing Website)
질문있습니다
사진과 같이 award-list 가 한화면에 한그룹씩 3개의 슬라이드를 구현하려고 하는데요 슬릭슬라이더 를 입력하니까 구조감이 깨져버립니다.어떤게 문제인지 봐주시면 감사하겠습니다.<!--section : award --> <section class="award"> <div class="award-inner"> <h3 class="title">AWARDS</h3> <div class="award-cont"> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2018 경상북도 건축문화상 최우수상<br> 2019 한국건축문화대상 우수상 </p> <span class="award-txt"> 다산면 행정복합타운 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2019 한국문화공간상<br> 2018 김해건축대상 대상 </p> <span class="award-txt"> 김해 서부문화센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2016 청주시 아름다운 건축상 은상 </p> <span class="award-txt"> 한국전력공사 충북본부 사옥 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2017 한국문화공간상<br> 2016 한국건축문화대상 우수상<br> 2016 경상북도 건축문화상 대상 </p> <span class="award-txt"> 고령군 문화체육복지관 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2015 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 치의학대학원 첨단교육연구복합단지 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2012 서울시 건축상 우수상 </p> <span class="award-txt"> 올림픽홀 복합문화공간 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2011 경주시 건축상 금상 </p> <span class="award-txt"> 월성스포츠센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2011 제주건축문화대상 본상 </p> <span class="award-txt"> 한전 제주지사 사옥 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2013 경주시 건축상 금상 </p> <span class="award-txt"> 한국원자력환경공단 환경친화단지 방문객센터 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2018 경상북도 건축문화상 최우수상<br> 2019 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 의과대학 의생명과학관 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2007 부산다운 건축상 우수디자인 건축물부분 동상<br> 2007 이원 환경 건축,조경대상 환경건축대상 </p> <span class="award-txt"> 신고리 원자력 지역협력시설 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> <li class="list-item"> <p class="award-tit"> 2004 한국건축문화대상 우수상 </p> <span class="award-txt"> 서울대학교 이공계 멀티미디어 강의동 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> <ul class="award-list"> <li class="list-item"> <p class="award-tit"> 2007 경상남도 건축대상 은상<br> 2005 대한민국 토목, 건축대상 최우수상 </p> <span class="award-txt"> 김해 문화의 전당 </span> <a href="#none"> <span class="read-more-btn"> <em>read more</em> </span> </a> </li> </ul> </div> </div> </section> /*css*/ /*section - award*/ .award-inner { margin: auto; padding: 130px 0 0; } .award-cont { width: 1300px; padding: 50px; margin: 0 auto; justify-content: center; } .award-cont ul { width: 1200px; height: 565px; margin: auto; border: 1px solid red; } .award-cont li { float: left; width: 33.3333%; height: 30vh; border: 1px solid blue; } /* Slick Slider : award */ $(document).ready(function(){ $('.award-list').slick({ dots: false, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true }); });
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
결과 페이지 만들기 -js편 execCommand를 더이상 지원하지 않습니다.
프론트엔드 마지막편을 보고 있는데 더이상 execCommand 명령어를 지원하지 않는다고 하여 다른 명령어를 찾아봤는데 옳은 코드 인가요?현재 url을 복사하는 함수를 작성한 것입니다.function copyUrl(){ let url = window.location.href; navigator.clipboard.writeText(url) .then(()=>{ alert('URL을 클립보드에 복사했습니다.'); }); }
-
미해결쉽고 빠른 스타일링 Tailwind CSS 기초 가이드
수업시 사용하는 툴이 궁금합니다.
수업시 사용하는 툴이 궁금합니다.윈도우에서 강의 하실때 사용하시는 그리기 툴 이름 알 수 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
tfjs-node 안깔려서
tfjs-node 안깔려서 해보라고 하는거 해보다가잘 되던 nodemon server.js 도 안되고 뭐가 잘못됐는지 모르겠습니다.빨리 마무리하고 싶은데 답답하네요강의 업데이트 좀 해주셨으면 좋겠는데 생각 없으신가요
-
미해결제대로 파는 HTML CSS - by 얄코
블로그 게시 관련
안녕하세요, 선생님!혹시 강의 내용 중 일부분(개인적으로 중요하다고 생각하는 부분이나 모르는 부분)을 개인 블로그에 정리해서 기록이 가능할까요?만약 가능하다면, 게시 가능 범위도 알려주시면 감사하겠습니다:)
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
flyctl 관련 재문의 드립니다.
flyctl deploy가 진행이 안돼서제 컴퓨터에 있는 도커를 삭제하고 다시 실행했더니아래와 같은 상태에서 멈췄습니다.구글링 해봐도 잘 모르겠어요 ㅠㅠ어떻게 해결하면 될까요? C:\Users\dahye\Documents\react-project\d-market-server>flyctl deploy ==> Verifying app config--> Verified app config==> Building imageRemote builder fly-builder-quiet-sunset-984 ready==> Building image with Buildpacks--> docker host: 20.10.12 linux x86_6420: Pulling from heroku/buildpacksDigest: sha256:1dd1a9c5f291b47fed1aed3f4c348fdc878380319c15f0e09753a5898482554eStatus: Image is up to date for heroku/buildpacks:2020-cnb: Pulling from heroku/herokuDigest: sha256:c9d053a463c7cd81672a3b0d5d5e26bdcbdffe2782565ccbedc15867b8cddfb9Status: Image is up to date for heroku/heroku:20-cnbWarning: Platform requested deprecated API '0.6'===> DETECTINGWarning: 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 participatingheroku/nodejs-engine 0.8.16heroku/nodejs-npm 0.5.2===> ANALYZINGPrevious 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.0Extracting Node.js 19.7.0Installing 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.jsonnpm WARN config production Use --omit=dev instead.WARN failed to finish build in graphql: Post "https://api.fly.io/graphql": context canceledOops, something went wrong! Could you try that again?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
flyctl 배포 관련 에러 문의드립니다.
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+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠(스타일 01) with JQUERY 에서 제이쿼리 질문 드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- 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로 만들기 때문에 해당 방법은 사용하지 않았습니다.)
