묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
.banner 간격 조정 어떻게 하나요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>서울구석구석</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="header logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">지금의 서울</a> <div class="sub-menu"> <a href="#none">이벤트</a> <a href="#none">축제&행사</a> <a href="#none">전시</a> </div> </li> <li> <a href="#none">추천</a> <div class="sub-menu"> <a href="#none">에디터 추천</a> <a href="#none">테마코스</a> <a href="#none">도보해설관광</a> <a href="#none">한류관광</a> </div> </li> <li> <a href="#none">여행지</a> <div class="sub-menu"> <a href="#none">명소</a> <a href="#none">엔터테인먼트</a> <a href="#none">음식</a> <a href="#none">게스트하우스</a> </div> </li> <li> <a href="#none">여행정보</a> <div class="sub-menu"> <a href="#none">가이드북&지도</a> <a href="#none">시티투어버스</a> <a href="#none">날씨</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="banner"> <img class="banner-image" src="images/banner-01.png" alt="banner image"> <div class="banner-content"> <h3>얼리버드 선착순 할인 이벤트 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. </p> </div> <a href="#none"><img src="images/banner-02.png" alt="banner link"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a> <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우</em><b>2022.08.09</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery1"><span>퍼블리셔 취업 가이드</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery2"><span>전문가가 되는 사진촬영</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery3"><span>라인을 만드는 필라테스</span></a> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer logo"></a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="family-site"> <select> <option value="">패밀리 사이트</option> <option value="">코딩웍스 커뮤니티</option> <option value="">코딩웍스 쇼핑몰</option> <option value="">코딩웍스 재단</option> </select> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br> <br> 주요 작업 내용은 아래와 같습니다.<br> 1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br> 2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br> 3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br> <br> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다.<br> 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; body { margin: 0; background-color: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 650px; */ } .left { width: 200px; background-color: rgba(210, 181, 161, 0.5); } .right { flex: 1; } header {} header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 400px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; } .menu li { text-align: center; } .menu li > a { border: 1px solid lightgray; display: block; padding: 5px; background-color: lightskyblue; transition: 0.1s; } .menu li:hover > a { background-color: olivedrab; color: #ffffff; } .sub-menu { border: 1px solid lightgray; background-color: lightcyan; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.1s; } .sub-menu a:hover { background-color: olivedrab; color: #ffffff; } .slide { display: flex; } .slide > div { /* border: 1px solid blue; */ height: 400px; } .slide-image { flex: 1; height: inherit; overflow: hidden; position: relative; } .slide-image-inner { font-size: 0; width: 300%; height: inherit; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide-image-inner a { height: inherit; display: inline-block; width: calc(100% / 3); } .slide-image-inner a img { height: inherit; width: 100%; object-fit: cover; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -100%; } 65% { left: -100%; } 70% { left: -200%; } 95% { left: -200%; } 100% { left: 0; } } .banner { width: 230px; text-align: center; box-sizing: border-box; padding: 5px; font-size: 14px; background-color: ivory; } .banner .banner-image { width: 88%; } .items { display: flex; } .items > div { /* border: 1px solid green; */ height: 250px; flex: 1; } .news {} .gallery {} /* News & Gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 5px; } .btn {} .btn span { border: 1px solid #000000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: lightskyblue; } .tab1 { border: 1px solid #000000; height: 208px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 9px; border-bottom: 1px solid #000000; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { font-style: normal; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000000; height: 208px; text-align: center; box-sizing: border-box; padding-top: 10px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 165px; border-radius: 5px; } .tab2 a span { display: block; } footer { display: flex; height: 100px; align-items: center; background-color: rgb(211, 211, 211, 0.3); } footer > div { /* border: 1px solid red; */ text-align: center; } .footer-logo { width: 200px; } .copyright { flex: 1; } .family-site { width: 230px; } .family-site select { padding: 5px; border-radius: 3px; } .modal { background-color: #00000077; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #ffffff; width: 460px; padding: 20px; border-radius: 10px; box-shadow: inset 0 0 10px #000000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h2 { text-align: center; } .close-modal { float: right; border: 1px solid #000000; padding: 5px 10px; border-radius: 5px; } $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) .banner에서 gap처럼 요소 간의 간격을 띄우는 방법이 있나요?
-
해결됨따라하며 배우는 HTML, CSS
profile__picture 사진 크기 조정
<header class="header"> <nav class="header__content"> <div class="header__buttons"> <a href="index.html" class="header__home"> <img src="assets/icons/logo.svg" alt="logo"> </a> </div> <div class="header__search"> <img src="assets/icons/search.svg" alt="search"> <input type="text" placeholder="Search..."> </div> <div class="header__buttons"> <a href="#none"> <img src="assets/icons/home.svg" alt="home"> </a> <a href="#none"> <img src="assets/icons/shop.svg" alt="shop"> </a> <a href="#none"> <img src="assets/icons/messenger.svg" alt="messenger"> </a> <div class="profile__picture"> <img src="assets/images/avatar.png" alt="user picture"> </div> </div> </nav> </header>.header { width: 100%; height: 44px; background-color: #FFFFFF; display: flex; justify-content: center; position: fixed; top: 0; left: 0; z-index: 2; border-bottom: 1px solid #DBDBDB; } .header__content { width: 100%; max-width: 975px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; } .header__logo { margin-top: 5px; } .header__search { width: 216px; height: 28px; display: none; align-items: center; position: relative; } @media (min-width: 768px) { .header__search { display: flex; } } .header__search img { width: 12px; height: 12px; position: absolute; top: 8px; left: 8px; } .header__search input { width: 100%; height: 100%; background-color: #FAFAFA; padding: 4px 10px 4px 28px; border: 1px solid #DBDBDB; border-radius: 4px; outline: none; font-size: 12px; /* 폰트 굵기 */ font-weight: 300; color: #999999; text-overflow: hidden; white-space: nowrap; } .header__search input:focus { color: #262626; } .header__buttons { display: flex; align-items: center; gap: 16px; } .profile__picture img{ width: 24px; border-radius: 50%; }css의 .profile__picture부분에서 저는 강의처럼 말고 뒤에 img를 넣어야지만 사진 크기가 조정되는데 img를 안붙혀도 되는 이유가 궁금합니다!
-
미해결따라하며 배우는 HTML, CSS
header태그
header라는 태그 자체가 있는데 class명을 주는 이유가 궁금합니다!! 따로 이유가 있을까요??
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
강의노트 관련
강의노트는 어디서 다운 받나요 ?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Fly.io 만들시 도커 파일이 있어야 하나요?(error)
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.fly launch 을 하고나서 선생님처럼 docker 파일들이 생기지 않았고 , DataBase 관련 된 질문에 No 를 하고 나서 Error: open Dockerfile : The system cannot find the file specified. 라는 에러가 발생하였습니다. 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
index에서 result 페이지로 이동 질문드립니다.
https://inflearn.com/questions/675320 안녕하세요! 해당 질문 보고 추가질문드립니다.섹션2에서 질의응답이 끝나면 현재 index 페이지에서 결과값이 나오는데, 각 유형에 맞게 바로 result 페이지로 이동하려면 코드를 어떻게 수정해야 할지 궁금해서 질문드립니다.결과 이미지를 여러 장씩 넣고 싶어서요..! 시간나실때 답변 주시면 참고하겠습니다. 좋은 강의 만들어주셔서 감사합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
node가 제대로 실행되지 않습니다
nodejs의 파일 위치가 cmd와 동일하고 node.js 다운도 모두 끝마쳤는데 cmd에서 파일을 불러올 수 없고 터미널에서도 오류가 납니다 어떤 부분이 문제인 걸까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
클로저 질문
애니메이션 재생, 정지, 재시작 버튼 구현 강의에서 3:55에 클로저를 설명해주신 내용에서let toggle = false; button.addEventListener('click',()=>{ if (!toggle) { animation.pause(); } else { animation.play(); } toggle = !toggle; });이부분을 button.addEventListener('click',()=>{ let toggle = false; return ()=>{ if (!toggle) { animation.pause(); } else { animation.play(); } toggle = !toggle; } });로 변경하셨는데 변경전 코드는 잘 되는데 변경된 코드는 동작을 하지 않습니다혹시 제가 잘못 적은 부분이 있을까요?
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
console.log 와 return 에 따라 다른 결과
map 사용 시 3번의 console.log 와 return의 사용이나 순서에 따라 결과가 다르게 나오는데요 이 이유가 궁금합니다
-
미해결처음 만난 리액트(React)
serve -s build => command not found인 경우
npx serve -s build라고 입력하시면 됩니다:)환경 변수, 경로 확인, 재설치 별별 삽질하다가뒤늦게 알았어요 ㅎㅎ
-
해결됨따라하며 배우는 HTML, CSS
<strong>과 같은 semantic 태그와 SEO, 실무의 사용이 궁금합니다!
관련해서 검색을 해보니, <strong>과 같은 sementic 태그는 의미를 부여하기때문에 검색엔진이 크롤링할때 영향을 끼친다는 말이 종종 보였습니다.그리고 mdn에서는 <b> 태그 대신 font-weight 혹은 강조의 의미를 넣은 <strong>을 사용하라고 나옵니다. 이에 대해 의문이 생겼는데요,1) 실무에서는 font-weight, <b>, <strong>을 어떻게 분배하는지 궁금합니다. 태그 사용도 SEO를 고려하나요?2) <b>대신 font-weight를 사용해야하는 이유가 궁금합니다.
-
미해결처음 만난 리액트(React)
강의영상대로 코드를 작성했는데 오류가 나와요
각 파일별 코드 첨부합니다. 위와같이 코드를 작성했는데 이런 에러 창이 뜨네요 확인해봐도 빼먹거나 잘못입력한 부분은 없는 거 같은데 뭐가 문제일까요??
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
강의 자료
이미지는 어디서 다운 받는거죠?
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
HTML_STYLE 강의 중 질문입니다.
오른쪽 창에서 파란색으로 괄호한 부분은 주석인데 왜 화면에 노출되나요?추가로 강의와 똑같이 작성하고 저장하는데 prettier가 경고? 아이콘으로 뜨네요 ㅜㅜ. 오류 찾는 방법이 있을까요
-
미해결컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1
m1 맥북 웹서버 구축 실패 후 깃허브 웹호스팅 이용
안녕하세요 선생님. 수업 중 궁금한 부분이 생겨서 질문드립니다.맥 os에서 웹서버 구축하기 라는 강의를 보고 웹서버 구축을 하다 실패해서, 어쩔 수 없이 모든 코드를 수정할때마다 깃허브에 upload 후 결과를 봐왔습니다.여기서 궁금한게, 웹서버를 구축하는 것의 장점이 뭐가 있나요?제가 느낀바로는 굳이 웹호스팅처럼 업로드할 필요 없이 거의 실시간으로 제 코드의 수정사항을 볼 수 있다.라는 것과 다른 웹호스팅 서비스를 거치지 않고 다른 사용자들이 나의 웹페이지에 접근할 수 있다. 같은데, 웹서버를 구축하는 게 너무 어렵고 해서 앞으로 웹호스팅만으로 진행해도 될까 싶어 질문드립니다. 제가 생각못한 큰 장점이 있나요?
-
미해결ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기
CORS 오류...가 나오네요!
안녕하세요! 궁금한점이 생겨서 문의 드립니다.. 얼마전까지만 해도 오류가 나오지 않던게.. 갑자기 오류가 나와서 아무리 찾아도 해결이 안되서 질문 드립니다.오류가 CORS가 나오는데.. 똑같이 작성한거에서 오류가 안나던데 나오니까 당황스럽네요..!코드 입니다.-python-from flask import Flask, request, render_template import openai openai.api_key = "" (키값은 질문사항 때문에 비웠습니다.) app = Flask(__name__) @app.route("/translater", methods=["post"]) def translater(): data = request.json language = data["language"] text = data["text"] prompt = f"{text}\n\nTranslate this sentence into {language}" response = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages=[ { "role": "system", "content": "you are a translater" }, { "role": "user", "content": prompt } ], max_tokens=500, ) return response["choices"][0]["message"]["content"] @app.route("/web") def web(): return render_template("index.html") @app.route("/") def index(): return "Hello World" app.run(host="0.0.0.0", port=8080)-HTML-<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>번역기</title> </head> <body> 번역하는 사이트다! <br /> <textarea id="text" style="width: 500px; height: 200px;"></textarea> <br /> 어느 언어로 번역하겠습니까? <br /> <input id="language" type="text"/> <br /> 번역 하기 <br /> <button id="button">번역하기</button> <br /> 결과물 보기 <br /> <textarea id="result" style="width: 500px; height: 200px;"></textarea> <script> let textareaTag = document.getElementById("text"); let languageTag = document.getElementById("language"); let buttonTag = document.getElementById("button"); let resultTag = document.getElementById("result"); buttonTag.addEventListener("click", async function () { let text = textareaTag.value; let language = languageTag.value; await fetch("http://127.0.0.1/translater", { "method": "post", "headers": { "Content-Type": "application/json" }, body: JSON.stringify({ text, language}) }) .then((response) => response.text()) .then((data) => { resultTag.value = data; }); }); </script> </body> </html>
-
해결됨처음 만난 리액트(React)
10강 JSX의 정의와 역할 질문
선생님ㅜㅜ 강의잘보고있습니다..정말 설명 너무잘하시는 것 같아요귀에 쏙쏙들어와요 10강 JSX의 정의와 역할 2분 54초에JSX코드를 자바스크립트로 변환하는 역할을 하는 것이 React에 createElement라고 하시는데 React.creatElement( type, [props], [...children] )React.creatElement는 jsx를 사용하지 않고 만드는 방법아닌가요? 그렇다면 createElement는 html/XML 코드를 자바스크립트로 변환하는 역할을 하는 건가요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
줄 바꿈 여부 셋 중에 어떤 거를 on 해야 하는 지
비주얼 스튜디오 코드 필수 세팅 중 자동 줄 바꿈 설정하기에서 줄바꿈여부 on으로 바꾸려 하는데 세 개 중에 어떤 건가요? 제가 1회 시험 봤었는데 거기시험장은 비쥬얼스튜디오코드가 영어로 되어있었어서 영어판으로 대비하려고 한글로 안바꿔서 모르겠어서요ㅠㅠ
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
data가 이상하게 나옵니다
저는 그랩 님처럼 개발자 도구에서 data가 깔끔하게 정리 돼서 나오지 않습니다 어떤 부분이 잘못된 걸까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
error 가 발생합니다
저는 콘솔 창에서 함수가 안 나오고 에러가 나오는데 어떤 부분이 문제인 건가요?
