『유선배 웹디자인기능사 실기 과외노트』 저자가 직접 운영합니다.
매일 한 파트씩 미션으로 손에 익히고, 주차별 라이브에서 핵심 정리와 질문 해결까지 함께합니다.
학습 목표: 공개문제 구성(요구사항, 세부 영역별 지시사항, 기술적 준수 사항, 제출 방법)을 이해하고, 와이어프레임을 시맨틱 태그로 옮깁니다.
기본 과제
VS Code, 크롬 설치 후 바탕화면에 '비번호' 폴더와 index.html, css, js, images 폴더 만들기 (Live Server 없이 index.html을 크롬에서 직접 열어 확인)
공개문제 1문제를 골라 요구사항을 레이아웃·기능·디자인·기술 준수 4가지로 분류
와이어프레임을 header, nav, main, section, footer로 마크업 (메뉴는 ul > li > a 2단계, 모든 링크는 임시링크 #)
도전 과제: 3시간 시간 배분표(레이아웃 / 기능 / 디자인 / 검수) 작성
제출물: 폴더 구조 캡처, 요구사항 분류표, index.html 코드
체크포인트: <!DOCTYPE html>, lang="ko", charset="utf-8", Tab 키로 메뉴 링크가 순서대로 선택되는지
학습 목표: Table 없이 CSS로 A형·B형을 수치 그대로 구현하고, 시험 규격의 로고를 직접 디자인합니다.
기본 과제
리셋 CSS 작성 (margin, padding, list-style, a 밑줄 제거, box-sizing: border-box), 배경 #ffffff, 기본 글자색 #333333
제공 시안 기준 A형·B형 레이아웃 박스 구현 (1200px 고정형과 A·B 영역 100% 너비형 모두)
Photoshop 또는 Illustrator로 200×40px 워드타입 로고(심벌 없이 로고명만) 제작 후 PNG로 삽입
도전 과제: 제공 로고를 사용하는 문제처럼, 다른 로고를 가로세로 비율을 유지한 채 크기만 바꿔 배치
제출물: A형·B형 결과 캡처, CSS 코드, 로고 이미지
체크포인트: 브라우저 CSS를 끄면 콘텐츠가 세로로 나열되는지, 로고 이미지에 alt가 있는지
학습 목표: C형·D형 배치를 익히고, 공개문제에 반복 등장하는 푸터 구성 요소를 완성합니다.
기본 과제
제공 시안 기준 C형·D형 레이아웃 박스 구현
푸터 로고를 grayscale로 처리 (filter: grayscale(100%) 또는 무채색 이미지)
Copyright, SNS 3개, 하단 메뉴, 패밀리사이트를 텍스트(HTML)로 구성
도전 과제: A~D형 공통 CSS를 분리해 재사용 가능한 나만의 템플릿 만들기
제출물: C형·D형 결과 캡처, 푸터 코드
체크포인트: 영역 높이 합계가 전체 높이와 맞는지, 콘텐츠를 이미지로 넣지 않았는지 (1차 라이브 11/4에서 미션 1~3 코드를 함께 리뷰합니다)
학습 목표: 왼쪽 세로 메뉴형과 최근 유형(좌측 사이드바 + 카드형 콘텐츠)을 포함해 E형·F형을 완성하고, A~F형 6가지를 정리합니다.
기본 과제
제공 시안 기준 E형·F형 레이아웃 박스 구현 (1000px 왼쪽 정렬형, 좌측 200px 사이드바 + 나머지 100%형)
A~F형 6가지 구조를 한 장으로 요약한 정리표 작성
도전 과제: 타이머를 켜고 공개문제 와이어프레임 1개를 30분 안에 레이아웃까지 완성
제출물: E형·F형 결과 캡처, 유형 정리표
체크포인트: 브라우저 창 너비를 바꿔도 레이아웃이 깨지지 않는지 (다양한 해상도에서 일관성)
학습 목표: 공개문제의 메뉴 지시사항을 그대로 구현합니다.
기본 과제
jQuery 파일을 js 폴더에 넣고 로컬로 연결 (시험장은 인터넷 차단, CDN 사용 불가), $(function(){ }) 기본 구조 작성
메인 메뉴·서브 메뉴에 마우스를 올리면 하이라이트, 벗어나면 해제
서브메뉴 영역이 부드럽게 나타나고 사라지는 방식 구현: 메뉴별 개별 드롭다운, 서브메뉴 영역 전체 펼침 중 2가지 이상
도전 과제: 세로 메뉴에서 서브메뉴가 옆으로 나타나는 방식 구현, stop()으로 애니메이션 쌓임 방지
제출물: 동작 화면 캡처(또는 GIF), script.js 코드
체크포인트: 서브메뉴가 슬라이드 위로 보이는지(position, z-index), Console 탭에 ERROR가 없는지
학습 목표: 슬라이드 이미지에 텍스트를 디자인해 적용하고, 공개문제의 3가지 전환 방식을 모두 구현합니다.
기본 과제
제공 이미지 3장에 제공 텍스트를 적용 (글자체·굵기·색상·크기로 가독성 확보, HTML 텍스트 오버레이 또는 Photoshop 편집)
페이드(fadeIn / fadeOut), 좌우 이동, 상하 이동 슬라이드 각각 구현
3개 모두 3초 이내 전환, 페이지를 열면 자동 시작, 마지막 이미지 다음 첫 이미지로 반복
도전 과제: 마지막 이미지 다음에 첫 이미지로 끊김 없이 돌아오도록 처리
제출물: 3종 동작 캡처, 코드
체크포인트: 이미지가 영역 밖으로 보이지 않는지(overflow: hidden). 움직이는 슬라이드가 없으면 실격입니다
학습 목표: 공개문제 콘텐츠 영역의 모든 변형을 구현합니다.
기본 과제
탭형: 공지사항·갤러리를 탭으로 구성하고 클릭 시 해당 내용 표시 (addClass / removeClass, show / hide)
별도형: 공지사항과 갤러리(이미지 3개 가로 배치)를 각각의 영역에 배치
공지사항 첫 글 클릭 시 레이어 팝업 열기·닫기를 일반형과 모달형(반투명 배경 + 중앙 고정) 모두 구현
배너·바로가기를 제공 파일로 HTML 코딩 (이미지로 통째로 넣지 않기)
도전 과제: 공지사항 날짜 오른쪽 정렬, 긴 제목 말줄임(text-overflow: ellipsis)
제출물: 탭형·별도형 캡처, 팝업 2종 캡처, 코드
체크포인트: 링크 클릭 시 페이지가 위로 튀지 않는지, 팝업 닫기 버튼에 Tab 키로 접근되는지
학습 목표: 공개문제 탭형 1문제를 실제 시험처럼 3시간 안에 완성합니다.
기본 과제
챌린지에서 지정한 공개문제 1문제(탭형 + 일반 팝업)를 타이머를 켜고 완성 (리소스는 챌린지 제공 자료 사용)
완성하지 못한 부분을 목록으로 정리
도전 과제: 파트별 소요 시간을 기록해 미션 1의 시간 배분표와 비교
제출물: 시작·종료 시간 캡처, 결과 화면 캡처, 미완성 목록
체크포인트: 수료 필수 미션입니다. 미완성 목록은 3차 라이브(11/11)에서 함께 점검합니다
학습 목표: 1차 모의고사에서 놓친 부분을 보완하고, 공개문제 기술적 준수 사항과 실격 조건으로 검수 루틴을 만듭니다.
기본 과제
놓친 부분을 파트별(레이아웃 / 메뉴 / 슬라이드 / 콘텐츠 / 팝업 / 푸터)로 정리한 오답 노트 작성
가장 약한 파트 1개를 다시 구현
검수 체크리스트 작성: W3C HTML·CSS 오류 0, Console 오류 0, Tab 키 이동, CSS 끄면 세로 나열, 모든 이미지 alt, 텍스트 위계, 비번호 폴더·index.html 최상위, 이미지 경로·파일명, ai·psd 제외, 10MB 이하, 압축하지 않고 제출
도전 과제: validator.w3.org로 1차 모의고사 결과물을 검사하고 오류 수정 (시험장에서는 인터넷이 막혀 쓸 수 없으니 지금 습관화)
제출물: 오답 노트, 재구현 결과, 검수 체크리스트
체크포인트: 체크리스트 항목 중 실격 조건(슬라이드 미작동, 압축 제출, 용량·시간 초과, 비번호 폴더 미저장)을 따로 표시했는지
학습 목표: 1차와 다른 유형의 공개문제로 실제 시험과 같은 조건에서 최종 점검합니다.
기본 과제
챌린지에서 지정한 공개문제 1문제(별도형 + 모달 팝업, 1차와 다른 슬라이드 방식)를 3시간 안에 완성
마지막 30분은 미션 9의 검수 체크리스트 적용에 사용
도전 과제: 1차 모의고사와 소요 시간·완성도를 비교한 회고 작성
제출물: 시작·종료 시간 캡처, 결과 화면, 1차 대비 회고(도전)
체크포인트: 수료 필수 미션입니다. 레이아웃 30분 / 기능 90분 / 디자인 30분 / 검수 30분 배분이 지켜졌는지
학습 목표: 무리하지 않고 손을 풀며, 시험 당일 준비를 마칩니다.
기본 과제
가장 자신 없는 유형 1개를 30분 안에 레이아웃만 다시 세우기
메뉴·슬라이드 3종·탭·팝업 2종 핵심 코드를 한 장에 정리한 요약 노트 확인
수험표, 신분증, 검은색 필기구, 고사장 위치와 입실 시간 확인 (참고자료·USB·개인 키보드·마우스 지참 불가)
도전 과제: 미션 9의 검수 체크리스트를 시험장에서 쓸 순서대로 다시 정리
제출물: 30분 레이아웃 캡처, 요약 노트 캡처
체크포인트: 3차 라이브에서 받은 실수 체크리스트를 한 번 더 확인하고 일찍 쉬어 주세요
