172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1">tab1</div> <div class="tab2">tab2</div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } header >div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide >div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items >div{ border: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /* tab-content */ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn span{ border: 1px solid #000; display: inline-block; padding: 10px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ddd; width: 100px; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 150px; } .tab1{} .tab2{ display: none; } /*tab content*/ $('.btn span:frist-child').click(function(){ $('.tab1').show() $('.tab2').hide() }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() }) js가작동이안되는거같아요 ,,, 일단 따라하고있는데 script 소스가 문제인걸까요 ??
jkjk7088
2023-07-21T08:54:30.843Z
댓글 1
좋아요 1
조회수 210
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
main/index.js 에서는 setProducts( result.data .products); 로 써야하고 product/index.js 에서는 setProducts( result.data ); 로 써야하는데 두 파일에서 return문에서는 동등하게 { product.name } , {product.price} 등으로 사용됩니다. 둘의 차이를 알려주시면 감사하겠습니다.
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
kms930322
2023-07-21T05:31:06.018Z
댓글 2
좋아요 0
조회수 222
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import axios from 'axios'; 에서는 중괄호가 없고 import {Link} from 'react-router-dom' 에서는 중괄호가 있는데 차이가 뭔지 잘 모르겠습니다. axios는 'axios' 안에 있는 함수를 import 하는 것이고 {Link} 는 'react-router-dom' 안에 많은 컴포넌트 중 Link만 import 하기 위함인가요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
kms930322
2023-07-21T04:54:07.397Z
댓글 2
좋아요 0
조회수 1039
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
지금까지 HTML 학습한거로 질문을 드리자면, 폼에 조건 지정이 가능한가요? 예를 들어 대학 소속에 따라 학과 종류가 다른데, 이에 대해 앞에 선택한 option에 따라서 뒤에 option이 달라지는 것은 어떻게 만드는 건가요?
taeyun1118
2023-07-21T03:54:46.200Z
댓글 2
좋아요 0
조회수 359
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요? 제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
kms930322
2023-07-21T03:27:02.779Z
댓글 2
좋아요 0
조회수 1228
미해결
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
클론페이지 및 개인포트폴리오 홈페이지 다 제작했는데 제 컴퓨터에서는 주소 들어가면 문제없이 나오지만 모니터가 조금 작은 다른컴퓨터에서 보니까 글씨, 이미지가 밀리거나 제 컴퓨터에서 본거랑은 다르게 좀 이상하게 나오는 경우가 있는데 회사에 지원했을때 상대방 모니터가 제꺼와 사이즈 차이가 날 경우 혹시 이상하게 보여질까바 걱정인데 단위의 문제일까요? 어떻게 수정하면 될까요?
2023-07-20T14:13:47.244Z
댓글 1
좋아요 1
조회수 322
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
certbot을 통해 https를 적용한 뒤에 front 파일에 변경, 추가할 파일이 있어서 git pull origin main으로 시도해 봤지만 타임 아웃 에러가 걸리고 혹시 clone으로 하면 될까 해서 해봤지만 역시 타임아웃 에러가 걸렸습니다. 방법을 찾아보려고 열심히 구글링 2일간 해봤지만 도무지 개선이되질 않아서 ㅠㅠ 혹시 문제원인이나 해결방안 귀뜸해 주시면 감사하겠습니다.
HTML/CSS javascript aws git mysql rest-api github
전예준
2023-07-20T09:32:12.970Z
댓글 1
좋아요 0
조회수 359
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
처음 화면에는 이렇게 잘 뜨는데, 갤러리를 누르면 두개 다 흰색으로변경되고 이후에 쭉 두 메뉴 모두 흰색텝으로만 뜨는데 왜이러는걸가용?ㅠㅠ <!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="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.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> <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> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide-01"> </a> <a href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tab"> <div class="tab1"> <a href="#none">SMS 발송 모바일 서비스 개선작업 <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 <b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 <b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내 <b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업 <b>2019.12.20</b> </a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer-logo"> </a> </div> <div class="copy"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="facebook"></a> <a href="#none"><img src="images/sns-02.png" alt="twitter"></a> <a href="#none"><img src="images/sns-03.png" alt="instagram"></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { background-color: #fff; color: #333333; margin: 0; font-size: 15px; } a { color: #333333; text-decoration: none; } /* 기본구도잡기 */ .container { /* border: solid 1px red; */ width: 1200px; margin: auto; } header { height: 100px; } header > div { /* border: 1px solid blue; */ height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .slide {} .slide > div { /* border: 1px solid green; */ height: 300px; } .items { overflow: hidden; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { overflow: hidden; } footer > div { /* border: 1px solid purple; */ height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copy { width: 800px; } .sns { width: 200px; } /* 이미지와 텍스트 */ header { position: relative; z-index: 10; } .header-logo { line-height: 130px; } .slide { margin-bottom: 20px; } .footer-logo { line-height: 130px; } .copy { text-align: center; padding-top: 30px; } .sns { padding-top: 20px; text-align: center; } /* 슬라이드 */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div { position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; font-size: 0; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; } } /* 네비게이션 */ .menu { list-style: none; padding: 0; padding-top: 20px; /* border: 1px solid red; */ } .menu li { /* border: 1px solid #000; */ float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { background-color: #fff; border: 1px solid black; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #000; color: #fff; } /* 뉴스와 갤러리 텝메뉴 */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; } .btn a.active { background-color: #fff; } .tab {} .tab1 { border: 1px solid #000; padding: 0 10px; /* display: none; */ } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; height: 169px; text-align: center; padding-top: 20px; box-sizing: border-box; display: none; } .tab2 img { width: 130px; } // 네비게이션 $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) // $('.menu li').mouseenter(function(){ // $(this).children('.sub-menu').stop().slideDown() // }) // $('.menu li').mouseleave(function(){ // $(this).children('.sub-menu').stop().slideUp() // }) // 텝메뉴 $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).sliblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).sliblings().removeClass('active') })
혜민
2023-07-20T07:25:49.685Z
댓글 1
좋아요 2
조회수 281
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
/*tab-inner*/ .tab-inner, .gallery-inner{ width: 95%; margin: auto; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .btn span{ border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab-inner .tab, .gallery-inner .tab{ border: 1px solid #000; padding: 0 10px; height: 155px; } .tab-inner .tab a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid #333; padding: 4px; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab a b { float: right; font-weight: normal; } .gallery .tab img{ width: 100px; } .gallery .tab{ text-align: center; padding-top: 30px; box-sizing: border-box; } 소스는 똑같이한거같은데 사진이 문제인가 저렇케 내려와서요 뭐가 문제일까요 /...???
jkjk7088
2023-07-20T06:53:56.540Z
댓글 4
좋아요 1
조회수 390
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
제이쿼리가 작동하지 않는데 이유를 못찾겠습니다 ㅠㅠㅠㅠ... 밑에 누르면 이런게 뜨는데 이거랑 연관이 있는걸까요?
2023-07-20T06:17:29.193Z
댓글 1
좋아요 1
조회수 316
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
사진처럼 링크 된거처럼 보이는데 비주얼코드에서는 #none 해놓으면 안먹히는거같은데 ,,아닌가요 ? 저런경우에는text-decoration:none 을 해야할까요 ? ㅠ
jkjk7088
2023-07-19T13:20:37.929Z
댓글 2
좋아요 1
조회수 294
미해결
처음 만난 리액트(React)
미니블로그 다 따라하고 실행하면 에러가 발생합니다. 어떤 문제일까요?
jslim9413
2023-07-19T06:48:02.471Z
댓글 1
좋아요 0
조회수 536
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님 안녕하세요 현재 depoly가 완료되었습니다. 그런데 hostname페이지로 접속이 안되고 아래와 같이 실패하고있습니다. 어떤부분이 문제인지 문의드립니다. git 링크: https://github.com/sunghankwon/grab-market-server 다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow
박상현
2023-07-19T02:39:24.961Z
댓글 3
좋아요 0
조회수 622
해결됨
모바일 웹 퍼블리싱 포트폴리오 with Figma
선생님. 장바구니 밑에 표시해 둔 체크박스가 좀 이상해서 질문드립니다. 첫번째 체크 박스와 두 번째 체크 박스의 크기가 상품명 글자수에 따라 커졌다 작아졌다 불규칙하게 변하는데 이 부분이 좀 이상합니다. 첫번째 아이템 상품명 글자수와 두번째 아이템 상품명 글자수를 같게 입력하면 체크박스 크기가 일정하고 둘 중 하나라도 상품명 글자수를 늘리거나 줄이면 체크박스 사이즈가 작아졌다 커졌다 하는데 이 부분이 혹시 display:flex; align-items: flex-start;와 관련이 있는 건가요? 확실히 잘 모르겠습니다. 상품명 글자수에 상관없이 체크박스 크기가 변하지 않게 하려면 어떻게 해야 하는지 궁금해서 질문드립니다.
HTML/CSS jquery 모바일-디자인 figma 포트폴리오
김지환
2023-07-18T17:45:42.330Z
댓글 1
좋아요 1
조회수 592
해결됨
애플 웹사이트 인터랙션 클론!
섹션2 번째 내용입니다. 해당과정을 리액트에서 적용하면서 따라가고 있습니다. 돔접근에 대해서는 useRef를 사용해서 잘 따라가고 있는데, scrollSection1 의 부분에서 scrollSection1Msg1~scrollSection1Msg4 의 opacity 부분에서 아래와 같이 작업했습니다. 그런데 화면에 잔상이 남습니다. 완전히 opacity=0 가 되지 않는 것처럼 희미하게 글자들이 중첩되며 남아 있습니다. (맥북 M1) values : { selectionMsgA_opacity : [0 ,1, {start: 0.1, end:0.2}], selectionMsgA_opacity_out : [1 ,0, {start: 0.25, end:0.3}], else if (scrollRatio <= 0.3) { obj.Section1Msg1.current.style.opacity = calcValues(values.selectionMsgA_opacity_out, currentYoffset) obj.Section1Msg1.current.style.transform = `translateY(${ calcValues(values.selectionMsgA_translateY_out, currentYoffset)}%)`
HTML/CSS javascript 웹-디자인 svg 인터랙티브-웹 클론코딩
Edwin Y. Park
2023-07-18T03:31:50.175Z
댓글 1
좋아요 0
조회수 561
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 질문 하실 때 어떤 유형인지 말씀해주세요. 첨부와같이 나오는데 설치가 안되어도 하나씩 입력하면 되기는 하지만 설치가 안되어도 상관없겠죠?아니면 대체하는 익스텐션이 있는걸까요?
fairyhyun
2023-07-18T01:30:18.554Z
댓글 1
좋아요 3
조회수 384
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
코딩웍스 교수님 안녕하세요! 필기시험 합격후 실기 시험 대비하여 수업을 듣고 있는 수강생입니다. 저는, 섹션 00. 부터 시작해서 섹션01. 섹션02.를 수강하고 있는데요. 수강하기 전에 미리 섹션13.에 있는 핵심이론 PDF교재를 출력해서 준비한 후에 섹션02.수업을 듣고있습니다. 그런데 강의 순서와 교재 순서도 맞지 않고,, HTML교재에는 이미지맵, 유튜브다운로드, 멀티미디어, 표만들기, 폼 요소 등 더 많은 내용이 실려있는데 강의목록에는 보이지않고... 다루지 않는 것 같아서 의문이 생겨 질문 남깁니다. 교재에는 있지만 강의목록에는 없는 부분들은 혼자서 독학해야되는 부분인건가요? 비전공자라서 아예 처음이라 이 강의를 큰맘먹고 결제 후 차근차근 따라가며 실기준비를 하고자했는데 강의에서는 다 다루지않아서.... 어떻게 준비를 해야되는건지 막막합니다. 그리고 수업순서는 섹션00부터 차례대로 수강해나가면서 실습을 같이 따라하면서 준비하면 실기 합격과 가까워지는 것은 맞는걸까요?? 바쁘신 와중에 질문 읽어주셔서 감사합니다. 답변 부탁드립니다. 감사합니다.
greatlife
2023-07-17T23:03:23.815Z
댓글 1
좋아요 1
조회수 323
미해결
쉽고 빠른 스타일링 Tailwind CSS 기초 가이드
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 현재 문법이 바뀐건가용?
인연타로
2023-07-17T16:22:54.214Z
댓글 3
좋아요 0
조회수 479
미해결
실리콘밸리 엔지니어가 가르치는 파이썬 기초부터 고급까지
128줄에 return inside에서 inside()를 안하는 이유가 궁금합니다 @higher_order_example 자체가 inside 리턴받은 함수를 자동으로 ()붙여서 실행해주는 것인가요? 136줄에 sample_example()을 안쓰면 121줄에 있는 func 매개변수로 못넣는것인가요???
남기정
2023-07-17T13:07:25.512Z
댓글 2
좋아요 1
조회수 371
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
웹디자인실기를 보려고하는데요 강의의 코딩하는것들을 여러 유형별로 암기하는건가요? 제작하는 과정을 외워질때까지 몇번이고 만들어보면 될까요?
fairyhyun
2023-07-17T10:49:45.656Z
댓글 1
좋아요 1
조회수 435
