묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
포토샵 작업할때
수험자 제공파일에 있는 원본이미지를 편집해서images 폴더에 png 혹은 jpg파일로 저장하잖아요근데 영상보면 원본이미지도 따로 저장하시던데이 원본이미지 저장도 필수인걸까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
서브메뉴를 눌렀을 때 배경이 같이 생겨서 나와요...
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;}
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
푸터 부분이 안보여요.
<!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; 을 지우면라인이 보이는데, 다시 넣으면 안보여요.뭐가 잘못된걸까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
d 1 레이아웃 연습중에 궁금한것이 있어서 질문 남깁니다.
<!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;}
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
slider 적용이 안되어서 올립니다
<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> 도저히 문제를 못찾겠습니다 한시간동안 체크했는데 답이 안나오네요..
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
<header>와 <div class="header"> 둘다 사용해도 상관없나요?
<header> <footer> 시맨틱태그와 <div class="header"> 클래스 네임 중에 어떤방식으로 시험을 봐야할까요? 둘 다 상관없나요? 강의 화면이랑 다운받은 html 다른 경우도 있는 것 같아서요~
-
미해결애플 웹사이트 인터랙션 클론!
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
(() => { 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값으로 그대로 진행해도 될까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리 적용이 안돼요.
안녕하세요 선생님.제이 쿼리 적용이 안돼서 궁금해서 여쭤봅니다.<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> 요렇게 .. 처리해서 같은 폴더내에 넣으려고 하는데적용이 안되더라구요. 혹시 제이쿼리는 요렇게 하면 안되는것일까요? 그리고 폴더에 넣는 편이 실무나, 정리 면에서 확실히 더 도움이 되나요...?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
object-fit 속성 사용법
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; }
-
미해결애플 웹사이트 인터랙션 클론!
scrollLoop 함수 질문
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() }조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
.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처럼 요소 간의 간격을 띄우는 방법이 있나요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
줄 바꿈 여부 셋 중에 어떤 거를 on 해야 하는 지
비주얼 스튜디오 코드 필수 세팅 중 자동 줄 바꿈 설정하기에서 줄바꿈여부 on으로 바꾸려 하는데 세 개 중에 어떤 건가요? 제가 1회 시험 봤었는데 거기시험장은 비쥬얼스튜디오코드가 영어로 되어있었어서 영어판으로 대비하려고 한글로 안바꿔서 모르겠어서요ㅠㅠ
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
슬라이드 위아래 이상하게 나오는데 뭐가 잘못된건지 모르겠습니다 ㅠㅠ
슬라이드 가로-> 세로를 잘 연습해서위 -> 아래로 제작 했는데 이거는 이상하게 나오는데 뭐가 잘못된건지 모르겠습니다 ㅠㅠ
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
내비게이션 배경색 위치
<!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를 넣어야 하나요?그리고 최종점검 부탁드립니다.
-
해결됨피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
아이콘 카피 연습하는데 도움이 필요해요!
아이콘 제작 관련 문의 드립니다. 인삿말 안녕하세요! 강의 재밌게 잘 보고 있습니다. 선생님 말씀처럼 여러가지 아이콘을 카피하는 연습중입니다. 그런데 연습 도중에 어려워서 막힌 부분이 있어서 에릭 선생님께 자문을 구합니당! Figma link 질문 위 아이콘은 기존 아이콘이고 아래 아이콘이 제가 따라 만들고 있는 아이콘이에요! 바깥쪽 새로고침처럼 생긴 화살표 모양은 어떤 식으로 만들어야 할까요?
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
네비게이션 상단 3번 제작 중 오류가 있는 것 같아요 ㅠㅠ
안녕하세요 강사님이 만들어 두신 네비게이션 최종본 파일을 지우고 새로 적으면서강의를 듣고 따라해보고 있는데분명 똑같이 했는데 메뉴부분이 보더가 부족해서 왜 이런가 싶어서 문의드립니다 ㅠㅠ어떤게 잘못된건지 계속 찾아봐도 모르겠네요...
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
디자인을 짜기 전에 디자인 시스템을 만들어야하나요?
디자인을 하다보니 안어울리는 폰트크기와 폰트 굵기가 있어서 추가를 자주 합니다.혹시 현업에서도 위처럼 디자인을 하면서 디자인 시스템을 자주 수정하나요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
css 이미지 사이즈
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 중에서 어떤걸로 해야하나요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
단축기 질문!!
dropdown input 만들실 때(13:33초)텍스트 박스 크기를 직사각형 크기 맞추는 단축기가 있나요?
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
d,e 유형에서 이거 어떻게 해야할까요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다d유형과 e유형 내용에서여기 아래 컨텐츠는 html 코딩으로 작성해야 하며, 이미지로 삽입하면 안된다 부분이 말하는게 배너나 갤러리에 들어가는 이미지에 텍스트를 넣을때 포토샵으로 텍스트를 넣으면 안된다는 걸까요? 슬라이드에선 강의하신대로 포토샵으로 텍스트를 넣었는데 저기에선 저 문구가 좀 걸리긴하네요.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
