173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
범위가 넓어지면서 슬라이드가 오른쪽으로 빗겨나갑니다.. 왜일까요..ㅠㅠ <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>B-4 강의들으면서 만들기</title> </head> <body> <div class="container"> <div class="header-inner"> <div class="header"> <div class="logo"><a href="#none"><img src="image/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 class="sub-back"></div> </div> </div> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="image/slide_1.jpg" alt="slide1"></a> <a href="#none"><img src="image/slide_2.jpg" alt="slide2"></a> <a href="#none"><img src="image/slide_3.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="notice"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <a href="#none">갤러리</a> </div> <div class="tab2"> <a href="#none"><img src="image/gallery1.jpg" alt="gallery1"> </a> <a href="#none"><img src="image/gallery2.jpg" alt="gallery2"> </a> <a href="#none"><img src="image/gallery3.jpg" alt="gallery3"> </a> </div> </div> </div> <div class="banner"><a href="#none"><img src="image/shortcut.jpg"></a></div> </div> </div> <div class="footer-inner"> <div class="footer"> <div class="copyright"> <div>법적고지 개인정보취급방침 개인정보처리방침</div> <div>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56</div> </div> <div class="site"></div> </div> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. <br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a href="#none">X 닫기</a> </div> </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: #fff; color: #222328; font-size: 15px;} a {color: #222328; text-decoration: none;} ul, li {list-style: none; padding: 0; margin: 0;} .container {width: 100%; height: 1000px;} .header-inner {background-color: #ddd; } .header { width: 1200px; height: 100px; margin: auto; position: relative; z-index: 9999;} .header > div {} .header .logo {width: 200px; float: left;} .header .navi {width: 600px; float: right;} /* 네비게이션 */ .menu {margin-top: 60px; position: absolute;} .menu li {float: left; width: 150px; box-sizing: border-box; text-align: center; ;} .menu li > a {display: block; padding: 10px; border: 1px solid #000; transition: 0.5s; background-color: #fff;} .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; color: #fff; background-color: #000; } .sub-menu a:hover { background: #fff; color: #000;} .sub-back { display: none; width: 1200px; height: 120px; background-color: #000; position: absolute; top: 98px; left: 0; z-index: -1; } /* 아이템 */ .content-inner { width: 100%; } /* 슬라이드 */ .slide { width: 1200px; height: 300px; border: 1px solid #000; position: relative; overflow: hidden;} .slide > div { width: 3600px; font-size: 0; animation: slide 10s linear infinite; top: 0; left: 0; position: absolute;} .slide > div > a:nth-child(1) {animation-delay: 0s;} .slide > div > a:nth-child(2) {animation-delay: 3.5s;} .slide > div > a:nth-child(3) {animation-delay: 7s;} @keyframes slide { 0% {left:0px} 30% {left:0px} 35% {left:-1200px} 65% {left:-1200px} 70% {left:-2400px} 95% {left:-2400px} 100% {left:0px} } /* 아이템 */ .items {width: 1200px; margin: auto; overflow: hidden;;} .items > div { height: 200px; box-sizing: border-box;} .notice {width: 400px; float: left;} .notice .tab-inner {width: 95%; margin: auto; margin-top: 10px;} .notice .tab-inner .btn {display: inline-block; border: 1px solid #000; text-align: center; width: 100px; border-radius: 5px 5px 0 0; border-bottom: none; padding: 5px; background-color: #fff; margin-bottom: -1px;} .notice .tab-inner .btn a {} .notice .tab-inner .tab1 {border: 1px solid #000;} .notice .tab-inner .tab1 a {padding: 5px; display: block; border-bottom: 1px solid #000;} .notice .tab-inner .tab1 a:last-child {border-bottom: none;} .notice .tab-inner .tab1 a b{ float: right; font-weight: normal;} .notice .tab-inner .tab1 a em {font-style: normal;} .gallery {width: 400px; float: left;} .gallery .tab-inner {width: 95%; margin: auto; margin-top: 10px;} .gallery .tab-inner .btn {display: inline-block; border: 1px solid #000; text-align: center; width: 100px; border-radius: 5px 5px 0 0; border-bottom: none; padding: 5px; background-color: #fff; margin-bottom: -1px;} .gallery .tab-inner .btn a {} .gallery .tab-inner .tab2 { text-align: center; border: 1px solid #000;} .gallery .tab-inner .tab2 img {width: 110px; padding-top:20px ; padding-bottom: 15px;} .banner {width: 400px; float: left; } /*푸터*/ .footer-inner {width: 100%; height: 100px; background-color: #ddd; overflow: hidden;} .footer {width: 1200px; margin: auto; overflow: hidden;} .footer > div { float: left; box-sizing: border-box; height: 100px;} .copyright {width: 1000px;} .copyright div {; height: 50%;} .site {width: 200px;} .modal {display: none;}
김유나
2023-06-15T15:16:19.117Z
댓글 1
좋아요 1
조회수 406
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
수험자 제공파일에 있는 원본이미지를 편집해서 images 폴더에 png 혹은 jpg파일로 저장하잖아요 근데 영상보면 원본이미지도 따로 저장하시던데 이 원본이미지 저장도 필수인걸까요?
lipper2501
2023-06-14T16:03:25.244Z
댓글 1
좋아요 2
조회수 355
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
A-3을 연습하고 있는데... 서브메뉴에 마우스를 오버하면 저렇게 뒷 배경도 일부분 같이나와서 이미지를 가려버리는 현상이 생깁니다. 도대체 왜 이러는걸까요ㅠㅠ...? html, css 첨부 드립니다... <div class="header"> <div class="logo"> <a href="#none"><img src="image/logo.png"></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> </div> </li> <li> <a href="#none">입주정보</a> <div class="sub-menu"> <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> </div> /* 네비게이션 */ .header .navi { float: right; margin-top: 50px; margin-right: 25px;} .menu li {float: left;} .menu li > a { padding: 7px; border: 1px solid #000; width: 180px; display: inline-block; text-align: center; box-sizing: border-box; transition: 0.5s;} .menu li > a:hover {background-color: #000; color: #fff;} .sub-menu {border: 1px solid #000; } .sub-menu a {display: block; padding: 5px; text-align: center; transition: 0.5s;} .sub-menu a:hover {background-color: #000; color: #fff;}
김유나
2023-06-14T07:31:48.043Z
댓글 1
좋아요 1
조회수 622
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="kor"> <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"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="logo header"></a> </div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> <footer> <div class="copyright"> 동문경조사, 동문행사일정, 사용자매뉴얼 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div></div> <div></div> </div> </footer> </div> </div> </div> <script href="script/jquery-1.12.4.js" type="text/script"></script> <script href="script/custom.js" type="text/script"></script> </body> </html> @charset 'utf-8'; body { margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a { color: #222328; text-decoration: none; } .container { width: 1000px; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header {} .header-logo { border: 1px solid #000; height: 100px; } .navi { border: 1px solid #000; height: 400px; } .slide {} .slide > div { border: 1px solid #000; height: 350px; } .items { overflow: hidden; } .items > div { border: 1px solid #000; height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; border: 1px solid #000; } .gallery { width: 300px; border: 1px solid #000; } .shortcut { width: 200px; border: 1px solid #000; } footer { overflow: hidden; } footer > div { border: 1px solid #000; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 600px; } .sns { width: 200px; } .sns div { height: 50px; border: 1px solid #000; box-sizing: border-box; } footer에 overflow: hidden; 을 지우면 라인이 보이는데, 다시 넣으면 안보여요. 뭐가 잘못된걸까요?
원스텝
2023-06-12T12:38:09.262Z
댓글 1
좋아요 1
조회수 338
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D 타입 연습</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"></div> <div class="navi"></div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="shorcut"></div> <div class="news-galley"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="cpoyright"></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"; body { background-color:#fff; color:#000; margin:0;} a { text-decoration:none; color:#000;} .container {} .main-content { display:flex;} .left { width:200px; border:1px solid #000;}.right { flex:1; border:1px solid red;} header {} .header-logo { height: 100px; border:1px solid red;} .navi { height:400px; border:1px solid #000;} .spot-menu { height: 50px; border:1px solid red;} .slide { height:400px;} .slide-image { border:1px solid green; height:inherit;} .slide-banner { width:150px; height: 300px; border: 1px solid red; position:absolute; top:0; right:0;} .items {}.shortcut { height:200px; border: 5px solid gold;} .news-gallery { height:250px; border:1px solid blue;} footer { display: flex;} footer > div { border:1px solid #000; height:100px;} .footer-logo { width: 200px;} .copyright { flex:1;} .sns { width:300px;}
2023-06-12T01:14:46.646Z
댓글 1
좋아요 1
조회수 373
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<div class="history-info"> <h2>History</h2> <hr class="bar" /> <div class="history-slider"> <div> <h4> The Project<br />of Architect for the <span>2013</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2014</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2015</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2016</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2017</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2018</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2019</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2020</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> </div> </div> 도저히 문제를 못찾겠습니다 한시간동안 체크했는데 답이 안나오네요..
heejaelim02
2023-06-11T12:39:06.758Z
댓글 2
좋아요 1
조회수 558
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<header> <footer> 시맨틱태그와 <div class="header"> 클래스 네임 중에 어떤방식으로 시험을 봐야할까요? 둘 다 상관없나요? 강의 화면이랑 다운받은 html 다른 경우도 있는 것 같아서요~
원스텝
2023-06-10T05:52:35.822Z
댓글 1
좋아요 1
조회수 546
미해결
애플 웹사이트 인터랙션 클론!
(() => { const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅(디바이스 마다 높이가 다르기에 각 기계가 가진 높이를 불러오고 곱해준다.) scrollHeight: 0, }, { // 1 type: 'normal', heightNum: 5, scrollHeight: 0, }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } console.log(sceneInfo); } setLayout(); })(); 4645값으로 그대로 진행해도 될까요?
HTML/CSS javascript 웹-디자인 svg 인터랙티브-웹 클론코딩
gari
2023-06-09T16:05:22.508Z
댓글 2
좋아요 0
조회수 623
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 선생님. 제이 쿼리 적용이 안돼서 궁금해서 여쭤봅니다. <script type="text/javascript" src=" script/jquery-1.12.4.js "></script> <script type="text/javascript" src=" script/custom.js "></script> 요렇게 적용하라고 하셔서 그대로 했을때는 되는데, js파일을 script 폴더에 넣지않고 밖으로 뺀다음 <script type="text/javascript" src=". ./jquery-1.12.4.js "></script> 요렇게 .. 처리해서 같은 폴더내에 넣으려고 하는데 적용이 안되더라구요. 혹시 제이쿼리는 요렇게 하면 안되는것일까요? 그리고 폴더에 넣는 편이 실무나, 정리 면에서 확실히 더 도움이 되나요...?
김유나
2023-06-06T10:20:29.615Z
댓글 2
좋아요 1
조회수 832
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D E 유형 필독사항에서 object-fit 속성 강의에서 object-fit 속성을 사용할 때 부모요소의 너비 높이가 반드시 지정되어 있고 그 너비와 높이를 object-fit 속성이 들어간 img가 똑같은 값으로 받아와야 한다(inherit)고 했는데, 부모요소의 너비높이가 없이, inherit 없이도, img의 너비나 높이만 있어도 구현되던데, 문제가 있을까요? 아래처럼 해도 될까요? 꼭 반드시 부모요소의 너비높이가 있어야되고 inherit로 받아와야만 하나요? 참고로 아래는 D1 유형 중 슬라이드부분 입니다. <div class="slide"> <div class="slide-image"> <a href="#none"><img src="images/slide-d-01.jpg"alt="slide-d-01"></a> <a href="#none"><img src="images/slide-d-02.jpg"alt="slide-d-02"></a> <a href="#none"><img src="images/slide-d-03.jpg"alt="slide-d-03"></a> </div> </div> .slide{ position: relative; /**/ overflow: hidden; width: 400px; } .slide-image{ font-size: 0; animation: slide 10s linear infinite; } .slide-image img{ width: 100%; height: 400px; object-fit: cover; }
HTML/CSS jquery 웹-디자인 object-fit cover
key
2023-06-06T02:01:40.322Z
댓글 1
좋아요 1
조회수 405
미해결
애플 웹사이트 인터랙션 클론!
const scrollLoop = () => { prevScroll = 0; // 스크롤값이 다시 0으로 시작하게 for (let i = 0; i < current; i++) { prevScroll += sceneInfo[i].scrollHeight; } console.log('prev', prevScroll) if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) { current++; alert() } console.log('next', prevScroll) if (currentScroll < prevScroll) { current--; } }; 선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜 if (currentScroll > prevScroll) { current++; alert() } 조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
HTML/CSS javascript 웹-디자인 svg 인터랙티브-웹 클론코딩
uphoon
2023-06-04T10:47:51.272Z
댓글 2
좋아요 0
조회수 497
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!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처럼 요소 간의 간격을 띄우는 방법이 있나요?
bimil1121
2023-06-03T04:32:58.890Z
댓글 2
좋아요 1
조회수 669
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
비주얼 스튜디오 코드 필수 세팅 중 자동 줄 바꿈 설정하기에서 줄바꿈여부 on으로 바꾸려 하는데 세 개 중에 어떤 건가요? 제가 1회 시험 봤었는데 거기시험장은 비쥬얼스튜디오코드가 영어로 되어있었어서 영어판으로 대비하려고 한글로 안바꿔서 모르겠어서요ㅠㅠ
wugyu02
2023-05-28T09:59:19.925Z
댓글 1
좋아요 1
조회수 320
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
슬라이드 가로-> 세로를 잘 연습해서 위 -> 아래로 제작 했는데 이거는 이상하게 나오는데 뭐가 잘못된건지 모르겠습니다 ㅠㅠ
혜민
2023-05-23T08:11:21.294Z
댓글 2
좋아요 1
조회수 505
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!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/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> <div class="center"> <div class="items"> <div class="shortcut"> <img class="shortcut-image" src="images/shortcut-01.png" alt="shortcut image"> <div class="shortcut-content"> <h3>얼리버드 선착순 할인 이벤트</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br> 기간: 2022년 12월 18일~ 12월 25일 </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a> </div> <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> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.png" alt="banner1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner3"></a> <a href="#none"><img src="images/banner-04.png" alt="banner4"></a> </div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-e-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="slide3"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">기업소개 제휴 및 입점 문의</a> <a href="#none">이용약관</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </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: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 800px; */ } .left { width: 200px; background-color: rgb(201, 163, 124); } .center { width: 400px; background-color: ivory; } .right { flex: 1; } header { position: relative; z-index: 10; } 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; position: relative; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.1s; background-color: beige; } .menu li:hover > a { background-color: lightskyblue; color: #fff; } .sub-menu { border: 1px solid #000; position: absolute; top: 0; left: 100%; width: 100%; height: 120px; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.1s; background-color: lightskyblue; } .sub-menu a:hover { background-color: navy; color: #fff; } .items {} .items > div { /* border: 1px solid blue; */ } .shortcut { height: 150px; display: flex; align-items: center; box-sizing: border-box; font-size: 12px; padding: 5px; gap: 10px; } .shortcut .shortcut-image { height: 50%; } .news { height: 250px; } .gallery { height: 250px; } /* news & gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn span { border: 1px solid #000; 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 #000; height: 170px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; overflow: hidden; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { display: block; float: left; font-style: normal; width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; height: 170px; text-align: center; box-sizing: border-box; padding-top: 17px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 115px; border-radius: 10px; } .tab2 a span { display: block; } .banner { /* height: 150px; */ display: flex; align-items: center; } .banner a img { width: 98%; } .slide {} .slide > div { /* border: 1px solid green; */ } .slide-image { height: calc(100vh - 120px); overflow: hidden; position: relative; } .slide-image-inner { font-size: 0; height: inherit; width: 300%; 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; } } footer { display: flex; height: 120px; align-items: center; background-color: rgb(211, 211, 211, 0.3); } footer > div { /* border: 1px solid red; */ } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content div { /* border: 1px solid red; */ /* height: 60px; */ padding: 10px 20px; } .footer-link {} .footer-link a { color: blue; } .footer-link a::after { content: '|'; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .footer-link a:hover { text-decoration: underline; } .copyright {} .family-site { width: 230px; text-align: center; } .family-site select { padding: 5px; border-radius: 3px; } /* modal */ .modal { background-color: #00000077; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #fff; width: 470px; padding: 30px; border-radius: 10px; box-shadow: inset 0 0 10px #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h2 { text-align: center; } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) .menu li 에 background-color를 넣어야 하나요? .menu li > a 에 background-color를 넣어야 하나요? .sub-menu 에 background-color를 넣어야 하나요? .sub-menu a 에 background-color를 넣어야 하나요? 그리고 최종점검 부탁드립니다.
bimil1121
2023-05-22T13:42:39.277Z
댓글 1
좋아요 1
조회수 324
해결됨
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
아이콘 제작 관련 문의 드립니다. 인삿말 안녕하세요! 강의 재밌게 잘 보고 있습니다. 선생님 말씀처럼 여러가지 아이콘을 카피하는 연습중입니다. 그런데 연습 도중에 어려워서 막힌 부분이 있어서 에릭 선생님께 자문을 구합니당! Figma link 질문 위 아이콘은 기존 아이콘이고 아래 아이콘이 제가 따라 만들고 있는 아이콘이에요! 바깥쪽 새로고침처럼 생긴 화살표 모양은 어떤 식으로 만들어야 할까요?
한샘
2023-05-22T08:19:21.484Z
댓글 1
좋아요 1
조회수 557
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 강사님이 만들어 두신 네비게이션 최종본 파일을 지우고 새로 적으면서 강의를 듣고 따라해보고 있는데 분명 똑같이 했는데 메뉴부분이 보더가 부족해서 왜 이런가 싶어서 문의드립니다 ㅠㅠ 어떤게 잘못된건지 계속 찾아봐도 모르겠네요...
혜민
2023-05-22T06:34:24.051Z
댓글 2
좋아요 2
조회수 409
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
디자인을 하다보니 안어울리는 폰트크기와 폰트 굵기가 있어서 추가를 자주 합니다. 혹시 현업에서도 위처럼 디자인을 하면서 디자인 시스템을 자주 수정하나요?
재일 조
2023-05-19T08:13:41.436Z
댓글 1
좋아요 0
조회수 436
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
index.html <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner"></a> </div> style.css .banner a img { height: 95%; border-radius: 5px; margin: 5px; } .banner img로 해야 하나요? .banner a img로 해야 하나요? 그리고 이미지사이즈 줄일 때 height와 width 중에서 어떤걸로 해야하나요?
bimil1121
2023-05-18T02:53:21.354Z
댓글 1
좋아요 1
조회수 485
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
dropdown input 만들실 때(13:33초) 텍스트 박스 크기를 직사각형 크기 맞추는 단축기가 있나요?
moim.designer
2023-05-18T01:48:42.463Z
댓글 2
좋아요 0
조회수 369
