묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
<ul class="gnb"> <div class="wrap"> 차이
<ul class="gnb"> <div class="wrap"> 차이무엇입니까?
-
미해결애플 웹사이트 인터랙션 클론!
특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.
초반부 messageA_opacity_in 을 콘솔로 찍었는데요,partScrollStart보다 currentYOffset이 작을때는rv에 values[0] 즉 '0'을 리턴해야하는데,그러지 않고 -1부터 0까지 쭉 커지다가 css가 적용되는 구간부터 1로 점점 커집니다...const sceneInfo = [ { //0 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d') }, values:{ messageA_opacity: [0, 1, { start: 0.1, end: 0.2}], messageB_opacity: [0, 1, { start: 0.3, end: 0.4}] } }, { //1 type:'normal', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-1') } }, { //2 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-2') } }, { //3 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-3') } } ];function calcValues(values, currentYOffset){ let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight const scrollRatio = currentYOffset / scrollHeight if(values.length === 3){ // start ~ end 사이의 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if(currentYOffset => partScrollStart && currentYOffset <= partScrollEnd){ rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart){ rv = values[0]; } else if (currentYOffset > partScrollEnd){ rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation(){ const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; switch (currentScene){ case 0: let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset) objs.messageA.style.opacity = messageA_opacity_in console.log(messageA_opacity_in) break; case 1: break; case 2: break; case 3: break; } } 도와주세요 ㅠ
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
개발자도구
개발자도구에서 모바일 버전으로 볼때 계속 인터넷 연결없음으로 나옵니다 ㅠㅠ그리고 폴더에 있는 index파일을 누르면 사진과 같이 기본 셋팅만 나오는데 왜 그런지 알 수 있을까요?
-
해결됨애플 웹사이트 인터랙션 클론!
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
안녕하세요,유익하고 좋은 강좌 만들어주셔서 감사드립니다! 덕분에 브라우저 스크롤 애니메이션에 대한 개념이해를 갖게 됐습니다!. 이런 내용을 바탕으로 '미려한' 애니메이션을 만들고 싶은 욕심이 생겼는데요,해당 강좌를 시청하며 2가지 문의사항이 있습니다.감사합니다! #질문1. svg의 path의 생성하는 법, 만들어주신 강좌 중 svg 강의를 보면 아이디어를 얻을 수 있을까요?보너스로 추가해주신 아이패드 강좌 부분을 보면서, svg의 path를 커스텀으로 만들고 싶은 생각이 들었습니다. 아직 svg 로딩 강좌 섹션은 보지 못했는데, 혹시 인터렉티브 로드맵 중 svg강좌를 들으면, path를 만들 수 있는 힌트를 얻을 수 있을까요? 예를 들어 '안녕하세요 반갑습니다' 라는 svg를 브라우저 스크롤 하면서 하나씩 그려내고 싶습니다.#질문2. 3번째 섹션, 이미지프레임과 fixed된 텍스트들을 서로 싱크를 맞추려면, 어떻게 한땀한땀 해야할까요?강좌에서 공부한 스크립트와 마크업/스타일을 바탕으로, 새로운 애니메이션을 만들때, 이미지/비디오 프레임과 fixed된 텍스트를 서로 싱크 맞추는 요령? 방법?이 무엇이 있을까요? 혹시 이미지 애니메이션을 완성하고, 수작업으로 텍스트의 fixed위치를 변경하면서, 수치를 정하는건가요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
트리거메뉴 제이쿼리
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <title>DesignWorks Architecture Agency</title> <!-- Page Scroll Effects JS & CSS --> <script src="/js/jquery-2.1.4.js"></script> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="/js/velocity/velocity.css"> <!-- Custom JS & CSS --> <script src="/custom.js"></script> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/reponsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="/images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="/images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="/images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="/images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="/images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="/images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="content"> <div> <div class="content"> <img src="/images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="/images/logo.png"></a> </div> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html>@media (max-width: 768px) { /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px #0000002a; transition: 0.3s; } .gnb.active { right: 0; } .menu { line-height: 40px; margin-top: 60px; } .menu a { display: block; text-align: right; padding-right: 20px; color: black; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: black; transition: 0.3s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 90%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 90%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } }$(function(){ /* Trigger */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') }) }) 모바일에서 트리거메뉴 클릭시 제이쿼리(아이콘X로 변경 슬라이더메뉴 나오기)가 적용되지 않는데 왜 이럴까요 ㅠ 클레스네임부분에서 틀린게 없습니다
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
트리거메뉴 제이쿼리
모바일에서 트리거메뉴 클릭시 제이쿼리(아이콘X로 변경 슬라이더메뉴 나오기)가 적용되지 않는데 왜 이럴까요 ㅠ 클레스네임부분에서 틀린게 없습니다
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
메인슬라이드 오류문의
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"><img src="images/logo.png" alt="조이컨트리클럽"></div> <div class="navi"> <!-- navigation --> <ul class="menu"> <li> <a href="#">CLUB</a> <div class="sub-menu"> <a href="#">클럽소개</a> <a href="#">시설안내</a> </div> </li> <li> <a href="#">BOOKING</a> <div class="sub-menu"> <a href="#">요금안내</a> <a href="#">예약안내</a> <a href="#">위약안내</a> </div> </li> <li> <a href="#">INFORMATION</a> <div class="sub-menu"> <a href="#">명예의전당</a> <a href="#">이벤트</a> <a href="#">자료실</a> <a href="#">포토갤러리</a> </div> </li> <li> <a href="#">COMMUNITY</a> <div class="sub-menu"> <a href="#">공지사항</a> <a href="#">Q&A</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#">로그인</a> <span>|</span> <a href="#">회원가입</a> </div> </header> </div> <div class="right"> <!-- 슬라이드 비주얼 --> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner slide-items"> <a class="slide-item" href="#"><img src="images/slide_01.png" alt="slide1"></a> <a class="slide-item" href="#"><img src="images/slide_02.png" alt="slide2"></a> <a class="slide-item" href="#"><img src="images/slide_03.png" alt="slide3"></a> </div> </div> <!-- 슬라이드 배너 --> <div class="slider-banner"> <a href="#"><img src="images/icon_01.png" alt="예약일정">예약일정</a> <hr> <a href="#"><img src="images/icon_02.png" alt="멤버십">멤버십</a> <hr> <a href="#"><img src="images/icon_03.png" alt="오시는길">오시는길</a> <!-- 이미지만 고퀄로 변경 --> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/ad.png" alt="카카오광고"> <div class="shortcut-content"> <h3>조이컨트리클럽 X 카카오골프</h3> <p>국내 최대 규모 골프장 조이컨트리 클럽과 카카오골프가 함께하는 10주년 행사! 카카오골프로 조이컨트리 클럽 신규가입시 라운드 30만원 상당의 쿠폰과 카카오골프 굿즈를 선물드려요.</p> </div> <a href="#"><img src="images/more_button.png" alt="더보기버튼"></a> </div> <div class="new"> <!-- 탭메뉴 --> <div class="tab-inner"> <div class="btn"> <a href="#" class="active">공지사항</a> <a href="#">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#" class="open-modal">가을 맞이 신규 회원가입 특전을 안내드립니다.<b>2023.10.01</b> </a> <a href="#">9월 임시휴무 안내<b>2023.08.11</b> </a> <a href="#">카카오 골프 제휴 이벤트 안내<b>2023.05.11</b> </a> <a href="#">사이트가 리뉴얼 되었습니다.<b>2023.01.11</b> </a> </div> <div class="tab2"> <a href="#"> <img src="images/gallery-01.png" alt="이미지1"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-02.png" alt="이미지2"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-03.png" alt="이미지3"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-04.png" alt="이미지4"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-05.png" alt="이미지5"> <span>이미지1</span> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="foot-logo"> <a href="#"><img src="images/foot_logo.png" alt="조이컨트리클럽"></a> </div> <div class="copyright"> (주)조이컨트리클럽 | 대표자 : 전현무 | 개인정보관리책임자 : 박나래 | 사업자등록번호 : 000-000-0000 | 주소 : 서울특별시 송파구 송파대로 22길 조이컨트리클럽 copyright(c)2023.(주)조이컨트리클럽 </div> <div class="sns"> <a href="#"><img src="images/youtube.png" alt="유튜브"></a> <a href="#"><img src="images/facebook.png" alt="페이스북"></a> <a href="#"><img src="images/twitter.png" alt="트위터"></a> </div> </footer> </div> <!-- 팝업창 --> <div class="modal"> <div class="modal-content"> <h2>가을 맞이 신규 회원가입 특전을 안내드립니다.</h2> <p>조이컨트리 클럽은 가을맞이 신규회원 가입 특전을 실시합니다.<br/> 주요 특전혜택은 아래와 같으니 참고 부탁드립니다.<br/> <br/> - 가입 특전 -<br/> 1. 라운딩 오후4시 이후 무료입장 가능<br/> 2. 캐디비용 지원<br/> 3. 식사 쿠폰 10매 제공<br/> <br/> 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/main.js"></script> </body> </html> @charset "utf-8"; body{ margin: 0; color:#333; background-color:#fff; font-size: 16px; } a{text-decoration:none; color:inherit;} /* Entire Layout */ .container{ } .main-content{ display:flex; } .main-content > div{ } .main-content > div{ } .main-content .left{ width: 200px; background-color:#eee; } .main-content .right{ flex:1; } /* header */ header{} header > div{} header .header-logo{ border:1px solid #000; } /* Navigation */ header .navi{ height: 300px; width: 200px; } header .menu{ list-style:none; padding:0; margin:0; } header .menu li{ width: 200px; box-sizing:border-box; text-align:center;} header .menu li > a{ display:block; width: 200px; border:1px solid #444; transition:0.5s; padding:5px; background-color:#fff; color:#333; } header .menu li:hover > a{ color:#fff; background-color:#333; } header .menu .sub-menu{ display:none; } header .menu .sub-menu a{ display:block; padding:5px; box-sizing:border-box; } header .menu .sub-menu a:hover{ background-color:#333; color:#fff; } header .spot-menu{ text-align:center; margin-top:30px; font-size: 14px; } header .spot-menu a:hover{ text-decoration:underline; } /* shortcut */ .right{} .right .slide{ height: 400px; } /* 슬라이드이미지 */ .slide { height: 400px; position: relative; } .slide-image{ height: 400px; position: relative; overflow: hidden; } /* Slide Animation */ .slide-image-inner { /* 실제로 움직이는 요소 */ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 0.5s linear ease-in-out; height: inherit; } .slide-image-inner a { /* 움직이는 .slide-image-inner에 포함된 요소 */ height: inherit; } .slide-image-inner a img { width: 100%; height: inherit; /* 부모요소인 a의 너비에 유동적으로 맞춰지게 하는 속성 */ object-fit: cover; } .slide .slider-banner{ background-color:#efefef; position:absolute; top: 0; right: 0; width: 50px; height:250px; padding:10px; text-align:center; } .slide .slide-banner hr{ } .slide .slider-banner a{ font-size:12px; font-weight:500; } .slide .slider-banner a:nth-child(3){ border-bottom:none; } .slide .slider-banner img{ width:50px; display:block; } /* shortcut */ .items{} .items .shortcut{display:flex; align-items:center;height:200px;} .items .shortcut img{} .items .shortcut a{position:absolute; right:20px;} .items .shortcut .shortcut-content{} .items .shortcut .shortcut-content h3{font-size: 20px;font-weight:900;} .items .shortcut .shortcut-content p{font-size:16px; font-weight:200;} /* news&gallery */ .items .new{ height: 250px; } .items .new .tab-inner{ width: 95%; margin: 0 auto; margin-top: 25px; } .items .new .tab-inner .btn{} .items .new .tab-inner .btn a{ border:1px solid #000; display:inline-block; width: 100px; padding: 5px; border-radius:5px 5px 0 0; margin-right: -6px; border-bottom:none; margin-bottom:-1px; background-color:#000; color:#fff; text-align:center; font-size: 14px; padding:8px; box-sizing:border-box; } .items .new .tab-inner .btn a.active{ background-color:#fff; color:#000; } .items .new .tab-inner .tabs{border:1px solid #333;} .items .new .tab-inner .tabs .tab1 a{ display:block; padding:3px; border-bottom:1px dashed #bbb; font-size: 15px; margin:10px; } .items .new .tab-inner .tabs .tab1 a:first-child{margin-top:20px;} .items .new .tab-inner .tabs .tab1 a:last-child{ border-bottom:none; } .items .new .tab-inner .tabs .tab1 a b{ float:right; font-weight: normal; } .items .new .tab-inner .tabs .tab2{ display:none; height: 170px; text-align:center; padding-top: 20px; box-sizing:border-box; } .items .new .tab-inner .tabs .tab2 a{ display:inline-block; text-align:center; margin:0 18px; } .items .new .tab-inner .tabs .tab2 a img{ height:120px; border-radius:5px; } .items .new .tab-inner .tabs .tab2 a span{ display:block; } /* footer */ footer{ display:flex; background-color:#222; align-items:center; color:#666; height:100px; } footer .foot-logo{ width: 200px; } footer .copyright{ padding:10px; flex:1; } footer .sns{ width: 230px; text-align:center; } footer .sns a img{ width: 35px; border-radius:10px; margin-right:10px; } /* 팝업 */ .modal { background-color: rgba(0, 0, 0, 0.19); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { width: 450px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.13); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } /* 이건 하면 좋고 안해도 괜찮습니다. */ .modal-content h2 { text-align: center; font-size: 18px; color: #111; padding: 7px; } .modal-content p{ text-align:center; } .modal-content .close{ background-color:#000; color:#fff; padding:5px; font-size: 15px; } // Navigation (1차메뉴 색상 활성화 고정) $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) // 메인비주얼슬라이드 // setInterval(콜백함수, 시간); // animate(속성값, 콜백함수); setInterval(function(){ $('.slide-item').animate({top: '-100%'}, function(){ $('.slide-item').css({top: 0}); $('.slide-item:first-child').appendTo('.slide-item'); }); }, 3500); // Tab Menu $('.items .new .tab-inner .btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.items .new .tab-inner .btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) // 팝업창 열고닫기 $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
custom.js 의 click 부분
custom.js에서 $(function(){ $('.trigger').click(function(){ $(this).toggeClass('active') $('.gnb').toggeClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active')}) $('.menu a').click(function(e) { e.preventDefault(); $.scrollTo(0, 900); }); }) 제이쿼리스크롤을 index.html에 링크 건 후에 custom.js의 click 부분들에 줄이 그어졌습니다."선언이 여기에 사용되지 않음으로 표시되었습니다" 라고 뜨는데 어떻게 해결해야 할까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
브라켓 자동 줄바꿈
자동으로 위로 줄이 올라가는데 어떻게 해결해야 하나요?..
-
해결됨피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
사진보정 기능 관련 질문드립니다.
안녕하세요. 강의 잘 들었습니다 :)저는 홈페이지 디자인을 위주로 하고 있는데포토샵, 일러스트, xd를 주로 사용하다가피그마가 대세인거 같아서 강의를 들었는데요! xd에서는 이미지 삽입 후 포토샵으로 연동되는 기능이 있어보정하면 자동으로 xd에서 반영이 되는데피그마에는 그런기능이 없는거죠? 그럴경우.. 피그마에서는 어떻게 디테일한 사진보정을하나요? 사이즈 확인 후 포토샵에서 작업 후 다시이미지 삽입을 해야되는건가요?답변부탁드립니다 감사합니다!
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
마우스 휠 감도 문제 / 스크롤시 화면 다다음으로 넘어감
스크롤했을때 한 페이지씩 넘어가다가도가끔씩 2개의 페이지가 샤샥하고 한번에 넘어갈때가 있는데마우스 휠감도 조절해봐도 안되네요 ㅠ방법이 있을까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
8월 실기 시험 후기입니다!
안녕하세요! 오랜만에 질문글을 작성하게 되었습니다! 결론부터 말씀드리면 89점으로 합격했다고 오늘 연락을 받고 수첩형 자격증 신청을 마친 상태입니다 :)사실 다른 일과 병행을 하느라 공부를 제대로 하지 못하다가 급하게 한 달 벼락치기를 했는데요.. 현재 웹디자인 기능사를 준비하시는 분들에게 제가 했던 방법이 조금이라도 도움이 되면 좋을 것 같아 길게 작성하게 되었습니다.한 달 벼락치기라는 말에 의아하실 수 있을 것 같아 먼저 말씀드리면, 저는 영상, 광고, 디자인 계열 전공을 해서 작년 여름 웹디자인을 하기 위해 공부하고 필기를 따놓고 실기 준비보다 (디자인 계열로)취업을 먼저 해버려서 늦게 딴 케이스입니다 ^-^;;이전에 공부한게 있었기 때문에 한 달 벼락치기가 가능했습니다ㅜㅜ제가 공부한 방법에 대해 말씀드리면저는 강의를 보며 따라하는 방법이 아닌,제가 가진 정보로 직접 만들어보고 강의를 보며 선생님이 어떻게 하는지 보고 배우는 방식으로 공부했습니다.구체적인 예시를 들자면,A유형 레이아웃을 배웠다면 B유형은 직접 만들어보고와이어프레임 이론을 배웠다면, 그 이론만 가지고 제가 직접 먼저 만들었습니다.당장 공부할 때는 시간이 오래 걸리기는 하지만, 외워지는 정도도 빠르고 이렇게 한 번이라도 직접 만들게 되면 2-3번째 즈음엔 혼자서 만들 수 있게 되었습니다.또 영상 중간중간 선생님께서 말씀하신 것처럼 선생님께선 이전에 만든 것들을 복사해 넣더라도 저는 매번 하나하나 직접 쳐서 틀을 만들었던 것도 컸던 것 같습니다.어쩌면 당연한 공부방식일지 모르겠지만 시간을 많이 잡아먹고 제가 먼저 만들어보기 때문에 처음엔 안되는 것들이 생기는데 그때 왜일까? 생각하게 되고 선생님 강의를 들으며 왜 안되었는지 알게 되는 부분이 공부가 되는데 크다고 생각합니다.조금이라도 도움이 되었으면 하는 마음에 길게 작성하게 되었습니다. 감사합니다 :)
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D유형 숏컷부분 정렬문의합니다
위사진은 강의에쓰인 사진이고 밑에사진은 제가만드는곳인데 숏컷부분이 강의사진처럼 길게 오른쪽까지 안퍼지고 저렇게밖에 안되는데 어떻케 해야지 끝과끝 중앙으로 보기좋게 설정하나요 ?
-
미해결디자이너의 스킬업을 위한 Lottie 완벽 이해하기
저도 bodymovin 에 composition이 생성되지 않습니다.
https://www.inflearn.com/questions/840104/%EC%B5%9C%EC%8B%A0%EB%B2%84%EC%A0%84%EC%9C%BC%EB%A1%9C-%ED%95%98%EA%B3%A0-%EB%8B%A4-%ED%95%B4%EB%B4%90%EB%8F%84-bodymovin-%EC%97%90-%EC%95%84%EB%AC%B4%EA%B2%83%EB%8F%84-%EC%95%88%EB%96%A0%EC%9A%94이전에 문의글처럼 저도 동일 현상 발생합니다.브라우저, AE, bodymovin 모두 최신 버전으로 다운받아 적용해보았는데 composition을 못불러들입니다. 더 이상 진행이 안되는데 어떻게 해야할까요?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
E유형 레이아웃 관련 질문입니다..!
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>철길마을</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="container"> <div class="main-con"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="center"> <div class="banner"></div> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <div class="right"> <div class="slide"> <div class="slide-cons"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-con"> <div class="link"></div> <div class="copy"></div> </div> <div class="family"></div> </footer> </div> <!-- JS --> <script src="js/jquery-1.12.4.js"></script> <script src="js/script.js"></script> </body> </html>@charset "utf-8"; body { font-size: 15px; margin: 0; padding: 0; color: #333; background-color: #fff; } a { color: #333; text-decoration: none; } /* rayout */ .main-con { border: 1px solid #000; display: flex; } .left { width: 200px; border: 1px solid #000; box-sizing: border-box; } .center { border: 1px solid #000; box-sizing: border-box; width: 400px; } .right { border: 1px solid #000; box-sizing: border-box; flex: 1; } /* header */ header { position: relative; z-index: 10; } header > div { border: 1px solid #000; box-sizing: border-box; } .header-logo { height: 100px; } .navi { height: 350px; } /* banner */ .banner { border: 1px solid #000; height: 150px; box-sizing: border-box; } /* news */ .news { border: 1px solid #000; box-sizing: border-box; height: 200px; } /* gallery */ .gallery { border: 1px solid #000; box-sizing: border-box; height: 200px; } /* shortcut */ .shortcut { border: 1px solid #000; box-sizing: border-box; height: 150px; } /* slide */ .slide { border: 1px solid #000; box-sizing: border-box; width: calc(100vw - 600px); height: calc(100vh - 120px); } /* footer */ footer { display: flex; height: 120px; } footer > div { border: 1px solid #000; box-sizing: border-box; height: 120px; } .footer-logo { width: 200px; } .footer-con { flex: 1; } .footer-con > div { border: 1px solid #000; height: 60px; box-sizing: border-box; } .link {} .copy {} .family { width: 230px; }위와 같이 레이아웃만 짰을 때 이 사진처럼 .left와 .footer-logo의 너비 값이 같은 200px을 가지는데 레이아웃에선 footer-logo의 너비 값과 같지 않은 것처럼 보입니다. 계속해서 수정해본 결과 main-con의 너비값을 100vw로 주니 해결은 되는데 창에 조금의 스크롤이 생기는데 시험때 창에 스크롤이 생기면 감점 요인이 되는거겠죠..?
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
팝업창 위치를 임의로 더 위로 올려도 괜찮나요?
계속되는 자잘한 질문에 죄송합니다 T.T이번 주 토요일에 시험을 앞두고 있어서 좀 더 확실하게 알고 넘어가고자 계속해서 질문하게 되는 것 같습니다..!팝업창 위치 관련해서 궁금한 점이 있습니다..modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0, 0.2); z-index: 11; display: none; } .modal-con { position: absolute; top: 50%; left: 50%; background-color: #fff; width: 500px; transform: translate(-50%, -100%); padding: 20px; border-radius: 20px; }위치 관련 질문이어서 .modal과 .modal-con 부분만 가져오게 되었습니다. 위와 같이 작성할 경우에 해당 사진처럼 브라우저 중앙에 위치하기는 하는데 안 예쁘기도 하고 시험지(?)에 나와있는 모달 제작 그림에선 팝업창이 슬라이드까지 가리고 있어서 더 올려주고 싶은데.modal-con { position: absolute; top: 50%; left: 50%; background-color: #fff; width: 500px; transform: translate(-50%, -100%); padding: 20px; border-radius: 20px; } .modal-con h2 { text-align: center; background-color: #000; color: #fff; padding: 10px; border-radius: 10px; }이런 식으로 .modal-con의 translate 뒷부분에 -50%, -100% 를 주어서 임의로 더 올려도 괜찮은지가 궁금합니다..!시험을 앞뒀다보니 저는 제 눈의 만족을 위해 저렇게 연습해왔는데 실제 시험에서 저렇게 작업해도 될지, 무조건 브라우저 중앙에 위치시키는 것이 좋을 지 확실하게 알고 가는 것이 좋을 것 같아서 질문드리게 되었습니다. 항상 감사합니다!!
-
해결됨UIUX 포트폴리오 Part.2 -UIUX 디자이너로 취업하기
섹션 3 강의 순서가 잘못된 것 같아요
컴포넌트 등록 영상이 섹션 제일 마지막에 와야 하는 것 같습니다.
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험 볼 때 익스텐션 설치 관련 질문입니다!
시험장에서 네트워크가 끊기는 것으로 알고 있는데 강의에서 영상으로 설명해주신 것은 비주얼 스튜디오 코드가 아니어서 확실한 정보를 얻기 위해 질문하게 되었습니다!초반 강의에서 말씀하신 필수로 설치해야 하는 익스텐션은 네트워크가 끊겨 있어도 설치가 가능한 건가요?? 또 인터넷이 연결되지 않아도 브라우저 창으로 live server가 가능한 것인지 궁금합니다..!
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
로고 제작 크기 관련 질문 드립니다.
보통 200X40 혹은 190X45 픽셀 크기로 작업하라고 로고 세부사항에 지시가 되어있는데header 폴더에 제공된 로고를 삽입한다.로고의 크기 변경 시, 가로세로 비율(종횡비, aspect ratio)을 유지하여야 한다. 이 부분에서 가로 세로 비율을 유지하라는 것이 정확히 어떤 의미인지 이해가 잘 가지 않습니다. 이러한 지시사항이 있을 땐 로고 작업 크기를 어떻게 하는 것이 좋을까요??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
애니메이션이작동안되고 사진부분이 원래 빈공간이 생기는게 맞을까요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d터압 새로 2칼럼 d-1</title> <link rel="stylesheet" href="css/d-1.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="d-1images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-2</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-3</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-4</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="d-1images/slide-d-01.jpg" alt="slide1"></a> <a href="#none"><img src="d-1images/slide-d-02.jpg" alt="slide2"></a> <a href="#none"><img src="d-1images/slide-d-03.jpg" alt="slide3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="d-1images/banner-01.png" alt="bannerimage1"></a> <a href="#none"><img src="d-1images/banner-02.png" alt="bannerimage2"></a> <a href="#none"><img src="d-1images/banner-03.png" alt="bannerimage3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="d-1images/shortcut-01.png" alt="shortcutimage"> <div class="shortcut-content"> <h3> 얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인 </h3> <p> 운영위원장 후보자 추천을 받고 있습니다. 2020.01.09 홈커밍데이 진행위원회 결과를 다운로드 받으세요. 2020.01.07 카드결제 무이자 이벤트 한시적 10월 20일까지 2019.12.31<br> 보안강화 시스템 작업 안내 공지 2019.12.20 부여 가을연꽃축제 10주년 콘서트 축제 <b>기간 : 2022년 12월 18일 ~ 12월 25일</b> </p> </div> <a href="#none"><img src="d-1images/shortcut-02.png" alt="shortcutlink"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <span class="active">공지사항</span> <span>갤러리</span> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> <a href="#none">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a> <a href="#none">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a> <a href="#none">보안강화 시스템 작업 안내 공지 <b>2019.12.20</b></a> <a href="#none">부여 가을연꽃축제 10주년 콘서트 축제 <b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"> <img src="d-1images/gallery-01.png" alt="gallery-01"> </a> <a href="#none"> <img src="d-1images/gallery-02.png" alt="gallery-02"> </a> <a href="#none"> <img src="d-1images/gallery-03.png" alt="gallery-03"> </a> <a href="#none"> <img src="d-1images/gallery-04.png" alt="gallery-04"> </a> <a href="#none"> <img src="d-1images/gallery-05.png" alt="gallery-05"> </a> <a href="#none"> <img src="d-1images/gallery-06.png" alt="gallery-06"> </a> <a href="#none"> <img src="d-1images/gallery-07.png" alt="gallery-07"> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="d-1images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="d-1images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="d-1images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="d-1images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <!--modal--> <div class="modal"> <div class="content-modal"> <h2> 부여 가을연꽃축제 팸투어 모집 </h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다.<br> 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! </p> <div class="close-modal">X 닫기</div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; font-size: 15px; } a{ list-style: none; text-decoration: none; color: inherit; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .right{ flex: 1; } header{} header> div{ } .header-logo{ height: 100px; } .navi{ height: 400px; } /*navigation*/ .menu{ list-style: none; padding: 0; margin: 0; width: 95%; margin: auto; margin-top: 15px; } .menu li { } .menu li > a { display: block; border: 1px solid #000; text-align: center; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: rgba(0, 0, 0, 0.2); color: #fff; } .spot-menu{ height: 50px; text-align: center; } .spot-menu a:hover{ text-decoration: underline; } .slide{ height: 400px; } .slide-image{ height: 400px; position: relative; overflow: hidden; } /*slide animation*/ .slid-image-inner{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite; } .slid-image-inner a{} .slid-image-inner a img{} @keyframes slide{ 0%{ top: 0; } 10%{ top: 0; } 35%{ top: -400px; } 65%{ top: -400px; } 70%{ top: -800px; } 90%{ top: -800px; } 100%{ top: 0; } } .slide-banner img{ width: 150px; display: block; } .slide-banner{ position: absolute; top: 0; right: 10px; } .items{} .items > div{ border: 1px solid #000; } .shortcut{ height: 250px; display: flex; align-items: center; margin: 0 15px; gap: 50px; } /*news-gallery*/ .news-gallery{ height: 250px; } .tab-inner{ width: 90%; margin: auto; margin-top: 5px; } .tab-inner .btn{} .btn span{ border: 1px solid #000; width: 150px; padding: 4px; display: inline-block; text-align: center; border-radius: 10px 10px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -2px; background-color: #eee; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{ border: 1px solid #000; padding: 0px 15px; } .tabs>div{ } .tab1{} .tab1 a{ display: block; padding: 10px; border-bottom: 1px dashed #000; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .tab2 img{ margin: 47px 20px; width: 170px; align-items: center; } footer{ display: flex; height: 100px; align-items: center; } footer > div{ text-align: center; } .footer-logo{ width: 200px; } .copyright{ flex: 1; padding-top: 35px; box-sizing: border-box; } .sns{ width: 230px; } .sns img{ width: 70px; border-radius: 5px; } /*modal*/ .modal{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none; } .content-modal{ width: 500px; height: 400px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } h2{ background-color: blue; text-align: center; padding: 5px; color: #fff; } p{ line-height: 2.5em; padding: 0 15px; } .close-modal{ float: right; padding: 5px 7px; border: 1px solid #000; margin-right: 25px; cursor: pointer; } /*navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /*tab-inner*/ $('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) /*modal*/ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })사진첨부한곳처럼 빈공간이 나오는게 정상인건가요 ? 애니메이션 작동이 안되는데 사진때문에 그런걸까요 object-fit cover 해도 저상태에서 애니메이션 움직이지도 않아요,
