odada

웹디자인기능사 샘플소스 https://github.com/oodada/exam-webdesign 0. HTML 코딩 시 중요(★★★★★) 체크포인트 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야 한다. ※ HTML 유효성검사 서비스는 시험시 제공하지 않는다.(인터넷 사용불가) 주어진 자료(수험자 제공파일)를 활용하여 HTML 페이지를 제작한다. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 한다. (시작시 html:5 emmet 사용) CSS, JS는 별도의 파일로 제작하여 링크로 연결한다. 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크 (예:#)..

웹디자인기능사 실기&필기 샘플파일 https://github.com/oodada/exam-webdesign 웹디자인기능사 실기 소스 다운받기 1. VScode 설치하기 html, css, js를 메모장에서 작업해도 되지만 더 쉽게 작업할 수 있도록 도와주는 프로그램을 이용하는 것이 좋습니다. 큐넷 공개문제 자료실 을 확인해보면 Visual Studio Code를 사용한다고 적혀 있으니 VScode를 설치해 작업합니다. VScode 다운로드 VScode 설치 가이드 2. Chrome 설치하기 실무에선 Internet Explorer 대신 Chrome을 사용합니다. Chrome을 설치해 테스트 합니다. Chrome 다운로드 3. 폴더 만들기 A-1 예제를 실습해볼 예정입니다. 윈도우 탐색기를 열어 "A-1-..

실기자료 https://github.com/oodada/exam-webdesign 웹디자인기능사 공개문제 바로가기 위 링크 웹디자인기능사 공개문제를 다운 받으신 후 공개문제 위주로 실기연습하시면 됩니다. 20개 유형 중 한 개의 문제가 출제되니 모든 문제를 풀어보시고 시험보시면 됩니다. 실기 A-1 요구사항 1. 시험시간 내에 웹페이지를 제작 후 5MB 용량이 초과되지 않게 저장 후 제출한다. 작업 완료 후 폴더를 오른쪽 클릭 후 속성을 확인하시면 작업 폴더의 용량을 확인할 수 있습니다. 2. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수한다. html 기본 셋팅시 html5를 기준으로 합니다. w3schools html 가이드 This is a Heading This is a paragraph. 3...

웹디자인기능사 필기, 실기 자료 github https://github.com/oodada/exam-webdesign 필기자료 아래 링크의 웹디자인기능사 기출문제 위주로 문제를 외워가시면 충분히 합격 가능합니다. 기능사 문제이기에 문제를 많이 변형하지도 않습니다. 기출문제에서 순서만 바꿔서 나옵니다. 달달 외워가세요~ 웹디자인기능사 기출문제 바로가기 실기자료 큐넷에 가면 출제기준, 공개문제 등의 자료를 얻을 수 있고 공개자료 20개를 연습해간다면 충분히 합격가능하다. https://www.q-net.or.kr/crf005.do?id=crf00505&jmCd=7798 출제기준 웹디자인기능사 출제기준(2022.1.1.~2024.12.31.).hwp 출제기준 다운로드 [공개]23년_웹디자인기능사.zip 공개문..

웹디자인기능사 시험정보 큐넷 시험정보 바로가기 취득방법 시 행 처 : 한국산업인력공단 시험과목 필기 : 1.디자인일반 2.인터넷일반 3. 웹그래픽디자인 실기 : 웹디자인 실무작업 검정방법 필기 : 객관식 4지 택일형 60문항(60분) 실기 : 작업형(4시간 정도) 활용소프트웨어 합격기준 : 100점 만점에 60점 이상 득점자. 시험일정 시험 일정 확인 후 필기 합격 후 실기 접수가 가능합니다. 2022년 일정은 아직 나오지 않았습니다. 시험정보 웹디자인기능사 출제기준(2022.1.1.~2024.12.31.) 2022년부터 웹디자인기능사의 출제기준이 변경되었습니다. 위 파일을 다운 받아 변경된 출제기준 확인 바랍니다. 공개문제 [공개문제]웹디자인기능사 ※ 실제 출제 되는 문제는 공개한 문제에서 일부 변경될..

home : https://splidejs.com/ option : https://splidejs.com/guides/options/#type 1. Getting Started CDN - html - scss .slide-intro { .splide { max-width: 800px; margin: 0 auto; position: relative; } .splide__track { overflow: visible; } .splide__slide img { width: 100%; height: auto; } } - js var splide = new Splide( '.splide', { type : 'slide', // perPage: 2, padding: '5rem', gap: '10px', start:..

ScrollTrigger란? 동적인 사이트를 만들 때 빠지지 않고 사용하는 라이브러리 중 하나이다. 최소한의 코드로 스크롤 애니메이션을 구현할 수 있다. GSAP 공식사이트 https://greensock.com/docs/v3/Installation cdnjs https://cdnjs.com/libraries/gsap 1. setting //cdn //스크롤 트리거 불러오기(플러그인 안정화) 2. 기본 사용법 gsap.to(대상, { scrollTrigger:{ trigger:대상, 스크롤속성:값, 스크롤속성:값 }, 속성:값, duration:재생시간 }) 3. 샘플 https://greensock.com/scrollmagic/ See the Pen scrollTrigger by odada (@odad..

https://antamis.tistory.com/33 계정하나에 두개의 도메인을 각각의 서브폴더에 연결시키는 방법 계정하나에 두개의 도메인을 각각의 서브폴더에 연결시키는 방법은 제가 알기로, (틀릴수도있음) 1. 루트의 메인페이지에 메타정보세팅을 하여 접속즉시 자동(순간이동?)으로 특정 폴더로 이동 antamis.tistory.com /root 폴더에 .htaccess 파일생성 후 아래 코드 삽입 RewriteEngine On RewriteCond $1 !^(onnuriart)/ RewriteCond %{HTTP_HOST} ^onnuriart\.com [NC] RewriteRule ^(.*)$ /onnuriart/$1 [L] 도메인을 보면 서브도메인 서비스 형식은 아래와 같다 [*****.naver.c..

실기 시험 때까지 일주일에 한개씩 풀어보시면 충분히 합격 가능할 듯 합니다. 시간 제한이 있기 때문에 손에 익도록 연습을 많이 해주세요. (참고로 2시간 후부터 나가는 사람들이 나옵니다) 실무 사이트도 시험 레이아웃과 크게 다르지 않기 때문에 손에 익어 속도가 빨라지면 회사에서도 야근을 안할 수 있습니다. 화이팅~!!! 웹디자인기능사 문제&답안 바로가기 A-1-JUST쇼핑몰 c-2-부여가을연꽃축제 c-3-남도맛기행축제 c-4-Vallery Festival GitHub에서 한번에 다운 받기 https://github.com/eehd80/exam-webdesign eehd80/exam-webdesign Contribute to eehd80/exam-webdesign development by creating..

기본 개념 기본 개념은 width 비율 만큼 padding-bottom 값을 동일하게 주면 된다. 100%를 주면 1:1 비율이 되는 것이고, 75% 값을 패딩으로 주면 4:3 비율이 되는 것이다. See the Pen Height equal to dynamic width by zinee (@zineeworld) on CodePen. 응용 사례 See the Pen Youtube 비율 by odada (@odada) on CodePen. See the Pen responsive youtube player by zinee (@zineeworld) on CodePen. 응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다. 유튜브 플레이어 비율은 16:9 ..