묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 시작은 프리캠프
회원가입 양식 라디오버튼 색상은 어떻게 변경해야하나요?
<!-- 02-signup.html --> <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet"> </head> <body> <div class="flexBox"> <div class="formBox"> <div class="memberBox"> <h2>회원 가입을 위해<br>정보를 입력해주세요</h2><br> <div> <p>* 이메일</p> <input type="text"> <hr class="hr-blue"> </div> <div> <p>* 이름</p> <input type="text"> <hr class="hr-grey"> </div> <div> <p>* 비밀번호</p> <input type="password"> <hr class="hr-grey"> </div> <div> <p>* 비밀번호 확인</p> <input type="password"> <hr class="hr-grey"> </div><br> <div class="flex-radio"> <div class="radio-control"> <input class="radio-group" type="radio" name="gender">여성 </div> <div class="radio-control"> <input class="radio-group" type="radio" name="gender">남성 </div> </div> <div> <h5><input class="check-control" type="checkbox">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</h5> </div> <div> <hr class="hr-grey"> <br> </div> <div> <button>가입하기</button> </div> </div> </div> </div> </body> </html> /* 02-signup.css */ * { box-sizing: border-box; } .flexBox { display: flex; flex-direction: column; justify-content: center; align-items: center; } .formBox { width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; margin-top: 60px; margin-bottom: 60px; } .memberBox { width: 470px; height: 818px; margin-top: 72px; margin-bottom: 70px; margin-left: 100px; margin-right: 100px; } h2 { width: 466px; height: 94px; font-family: 'Noto Sans CJK KR', sans-serif; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; } p { width: 158px; height: 23.65px; font-family: 'Noto Sans CJK KR', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #797979; } input { height: 30px; border: 0px; } .hr-blue { width: 466px; height: 0px; border: 1px solid #0068FF; } .hr-grey { width: 466px; height: 0px; border: 1px solid #CFCFCF; } .flex-radio { display: flex; flex-direction: row; justify-content: center; align-items: center; } .radio-control { margin: 15px; } .radio-group { width: 20px; height: 19.95px; accent-color: #EBEBEB; border: 1px solid #D2D2D2; vertical-align: -5px; } .check-control { width: 20px; height: 20px; border: 1px solid #C4C4C4; border-radius: 3px; vertical-align: -6px; margin-right: 15px; } button { width: 470px; height: 75px; background: #FFFFFF; border: 1px solid #0068FF; border-radius: 10px; }안녕하세요.수업을 듣고 과제 회원가입 양식 CSS에 도전하여 피그마랑 유사하게 만드는 데에는 성공했습니다.그런데 피그마를 보면 라디오 버튼이 회색이라 background 혹은 background-color 속성으로 적용을 해보니 색상이 변하지 않았고,구글링으로 accent-color를 사용하면 input 태그의 색상을 변경할 수 있다고 해서 써보니 스샷처럼 체크할 때만 회색으로 나오네요.혹시 다른 방법이 있을까요?
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
nginx 에러
강사님처럼 코드 쓰면 이런화면이나오고 delete하고 다시해보면 밑에 화면처럼 나옵니다.. 무슨 문제일까요이런화면이나오네요
-
미해결처음 만난 리액트(React)
npm start 후 빈화면
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. npm start 후 작성한 코드가 실행되지 않고 빈화면 띄는데 어떻게 해야할까요?구글링 해본 결과 package.json 파일에 "homepage="." 추가하면된다고하는데,,,(제가 참고한 블로그입니다.리액트 빌드 결과 빈화면만 보일때 - 상대경로 설정하기 (tistory.com))일단 index.html 파일에 있는 내용 첨부해드립니다.. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
-
해결됨[코드캠프] 시작은 프리캠프
싸이월드 만들기 1탄 padding margin 질문있습니다.
이게 background이고이게 outer입니다.이게 .background에만 padding을 준거구요.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"); }이게 .outerbox에만 margin을 준거에요..background { width: 1024px; height: 600px; background-image: url("../images/background.png"); } .outerbox { width: 808px; height: 544px; background-image: url("../images/outerbox.png"); margin: 20px 0px 0px 20px; }class="outerbox"가 class="background" 안에 들어가있잖아요? 그럼 .outerbox에 margin을 주면 .background는 여백이 생기면 안되잖아요. .outerbox에만 여백이 생겨야하는거 아니에요? background 위쪽은 그대로이고 outerbox만 여백이 생겨야하는거 아닌가용?이게 웃긴게 margin을 20px 0px 0px 20px줬는데 background의 왼쪽은 그대로이고 위쪽만 내려왔다는거에요.. background의 왼쪽은 여백이 안생김.. +.background { display: flex; width: 1024px; height: 600px; background-image: url("../images/background.png"); } .outerbox { width: 808px; height: 544px; background-image: url("../images/outerbox.png"); margin: 20px 0px 0px 20px; }웃긴게 background쪽에 display: flex 추가하니까 .outerbox에 margin 추가 해도 여백이 제대로 생깁니다 이건 또 뭘까요..
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
공지사항 갤러리가 안먹혀요 ㅠ
<!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 />를 해야만 정상적으로 사진이 불러와 집니다
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
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 도 안되고 뭐가 잘못됐는지 모르겠습니다.빨리 마무리하고 싶은데 답답하네요강의 업데이트 좀 해주셨으면 좋겠는데 생각 없으신가요
