img 요소의 alt 속성에 대한 설명으로 옳은 것은?

이미지를 볼 수 없는 사용자를 위한 대체 텍스트이며, 의미 없는 장식 이미지에는 alt=""처럼 빈 값을 줄 수 있다

마우스를 올렸을 때 말풍선을 띄우는 것이 주된 목적이다

이미지 파일의 경로를 지정한다

웹 표준에서 생략해도 아무 문제가 없는 선택 속성이다

반응형 웹 디자인(Responsive Web Design)을 구성하는 핵심 기술로 거리가 먼 것은?

기기마다 별도의 URL로 서로 다른 HTML 페이지를 따로 제작하는 방식

유동형 그리드(Fluid Grid)

유연한 이미지(Flexible Image)

label 요소와 input 요소를 연결하는 방법으로 옳은 것은?

label의 for 속성 값을 input의 id 값과 같게 쓴다

label의 name 속성 값을 input의 class 값과 같게 쓴다

label의 href 속성에 input의 이름을 쓴다

label과 input을 반드시 서로 다른 form 안에 둔다

웹디자인개발기능사필기 과목

웹디자인개발기능사 웹 구현(HTML·CSS·JavaScript) 예상문제

웹 구현(HTML·CSS·JavaScript)은 CertHub가 웹디자인개발기능사 문제 은행을 나눈 분류입니다. CertHub가 이 과목으로 제작한 35문항 중 8문항을 정답·해설과 함께 아래에 실었습니다.

웹 구현(HTML·CSS·JavaScript) 과목 개요

출제기준 필기 주요항목 '구현 및 응용'(정보설계, 디바이스 특성 기반 콘텐츠 구현, 웹페이지 기능요소 구현, 웹 프로그래밍 지식·개발·트렌드)을 모은 문제 은행 분류로, 문항 수가 가장 많습니다. HTML5 문서 구조와 시맨틱 요소, 폼과 표·목록, CSS 선택자 명시도와 박스 모델, position·flex·grid, 미디어 쿼리와 viewport, 단위와 애니메이션, JavaScript 변수·연산자·DOM·이벤트·타이머, jQuery, 웹 접근성을 다룹니다.

실기가 HTML·CSS·JavaScript로 메인페이지를 직접 만드는 작업형이라, 이 분류는 필기와 실기가 가장 많이 겹치는 부분입니다. 박스 모델 너비, 명시도, rem 계산처럼 숫자가 나오는 문항은 규칙대로 계산하면 확실히 맞힐 수 있고, 코드 문항은 에디터에 직접 쳐서 브라우저로 결과를 확인해 보면 기억이 오래갑니다.

출제 비중

CertHub 예상문제 100문항 중 35문항(35.0%)이 이 과목입니다.문제 은행 구성 비율이며 시행기관의 공식 출제 비중이 아닙니다. CertHub 과목 분류는 시행기관의 시험 과목과 다를 수 있습니다.

웹 구현(HTML·CSS·JavaScript) 핵심 개념 요약

HTML5 문서 구조와 시맨틱 요소: 문서형 선언은 <!DOCTYPE html>, 인코딩은 <meta charset="utf-8">입니다. <article>은 독립 콘텐츠, <nav>는 주요 내비게이션이고, <font>는 HTML5에서 폐기됐습니다.
이미지·폼·표·목록: alt는 대체 텍스트이고 장식 이미지는 빈 alt를 줍니다. label의 for와 input의 id를 맞추고, 가로 셀 병합은 colspan, 용어·설명 목록은 dl·dt·dd입니다.
선택자 명시도와 박스 모델: 명시도는 아이디 > 클래스·가상 클래스 > 요소 순입니다. content-box에서 width 200px에 padding 10px·border 5px이면 테두리까지 230px이고, border-box는 width에 padding·border를 포함합니다. <a>는 기본 인라인 요소입니다.
배치: position·flex·grid·z-index: absolute는 static이 아닌 가장 가까운 조상 기준, fixed는 뷰포트 기준입니다. flex의 justify-content는 주축, grid의 repeat(3, 1fr)은 같은 너비 세 열이고, z-index는 위치 지정 요소에서 큰 값이 위에 쌓입니다.
반응형 웹과 단위: 반응형 웹은 유동형 그리드·유연한 이미지·미디어 쿼리로 이루어집니다. max-width: 768px은 768px 이하에서 적용되고, viewport 메타 태그가 필요하며, html이 16px일 때 1.5rem은 24px입니다.
CSS 연결·색·애니메이션: 외부 CSS는 <link rel="stylesheet">로 연결하고, rgb(255, 0, 0)은 #ff0000입니다. @keyframes는 animation 속성으로 적용합니다.
JavaScript 기초: defer는 문서 해석이 끝난 뒤 순서대로 실행합니다. const는 재할당 불가, "5" + 3은 "53", 1 == "1"은 true이고 1 === "1"은 false입니다.
DOM·이벤트·타이머·jQuery: querySelector는 첫 번째 일치 요소를, classList.add는 클래스를 덧붙입니다. 메뉴는 mouseover/mouseout, 3초 반복 슬라이드는 setInterval(fn, 3000), jQuery 펼치기는 slideDown()입니다.
웹 접근성: 정보를 색으로만 전달하지 않고, 키보드만으로 이용할 수 있게 하며, 대체 텍스트와 충분한 명도 대비를 제공합니다.

웹디자인개발기능사 웹 구현(HTML·CSS·JavaScript) 예상문제 미리보기

웹 구현(HTML·CSS·JavaScript) 과목 35문항 중 8문항입니다. 정답과 해설은 눌러서 확인할 수 있습니다.

웹 구현(HTML·CSS·JavaScript)1번 문항
HTML5 문서의 맨 첫 줄에 쓰는 문서형 선언으로 옳은 것은?
1. 1.<!DOCTYPE html>
2. 2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
3. 3.<html version="5">
4. 4.<?xml version="1.0"?>
정답·해설 보기
정답 1번. <!DOCTYPE html>
HTML5의 문서형 선언은 <!DOCTYPE html> 한 줄이며 대소문자를 구분하지 않습니다. DTD를 지정하는 긴 선언은 HTML 4.01 방식이고, html 요소에는 version 속성으로 버전을 지정하지 않으며, XML 선언은 HTML5 문서형 선언이 아닙니다.
웹 구현(HTML·CSS·JavaScript)2번 문항
HTML 문서의 문자 인코딩을 UTF-8로 지정하는 HTML5 방식의 코드로 옳은 것은?
1. 1.<meta charset="utf-8">
2. 2.<meta encoding="utf-8">
3. 3.<charset type="utf-8">
4. 4.<link charset="utf-8">
정답·해설 보기
정답 1번. <meta charset="utf-8">
HTML5에서는 head 안에 <meta charset="utf-8">을 넣어 문서 인코딩을 지정합니다. meta에 encoding 속성은 없고, charset이라는 요소도 없으며, link 요소로는 문서 인코딩을 선언하지 않습니다.
웹 구현(HTML·CSS·JavaScript)3번 문항
뉴스 기사나 블로그 글처럼 그 자체로 독립적으로 배포·재사용할 수 있는 콘텐츠를 나타내는 HTML5 시맨틱 요소는?
1. 1.<nav>
2. 2.<aside>
3. 3.<header>
4. 4.<article>
정답·해설 보기
정답 4번. <article>
<article>은 독립적으로 완결된 콘텐츠를 나타냅니다. <nav>는 주요 내비게이션 링크 묶음, <aside>는 본문과 간접적으로 관련된 부가 내용, <header>는 소개나 내비게이션을 담는 머리 영역입니다.
웹 구현(HTML·CSS·JavaScript)4번 문항
HTML5 표준에서 더 이상 쓰지 않는(obsolete) 요소로, 글꼴 모양은 CSS로 지정해야 하는 것은?
1. 1.<font>
2. 2.<section>
3. 3.<figure>
4. 4.<main>
정답·해설 보기
정답 1번. <font>
<font>는 표현을 HTML에 섞는 요소라 HTML5에서 폐기되었고, 글꼴·크기·색은 CSS로 지정합니다. <section>, <figure>, <main>은 HTML5에서 쓰는 시맨틱 요소입니다.
웹 구현(HTML·CSS·JavaScript)5번 문항
img 요소의 alt 속성에 대한 설명으로 옳은 것은?
1. 1.이미지를 볼 수 없는 사용자를 위한 대체 텍스트이며, 의미 없는 장식 이미지에는 alt=""처럼 빈 값을 줄 수 있다
2. 2.마우스를 올렸을 때 말풍선을 띄우는 것이 주된 목적이다
3. 3.이미지 파일의 경로를 지정한다
4. 4.웹 표준에서 생략해도 아무 문제가 없는 선택 속성이다
정답·해설 보기
정답 1번. 이미지를 볼 수 없는 사용자를 위한 대체 텍스트이며, 의미 없는 장식 이미지에는 alt=""처럼 빈 값을 줄 수 있다
alt는 화면 낭독기 사용자나 이미지가 로드되지 않을 때 내용을 전달하는 대체 텍스트이고, 장식용 이미지는 빈 alt로 낭독을 건너뛰게 합니다. 말풍선은 title 속성, 경로는 src 속성의 역할이며, 웹디자인개발기능사 실기 공개문제도 모든 이미지에 alt 속성을 요구합니다.
웹 구현(HTML·CSS·JavaScript)6번 문항
반응형 웹 디자인(Responsive Web Design)을 구성하는 핵심 기술로 거리가 먼 것은?
1. 1.유동형 그리드(Fluid Grid)
2. 2.유연한 이미지(Flexible Image)
3. 3.미디어 쿼리(Media Query)
4. 4.기기마다 별도의 URL로 서로 다른 HTML 페이지를 따로 제작하는 방식
정답·해설 보기
정답 4번. 기기마다 별도의 URL로 서로 다른 HTML 페이지를 따로 제작하는 방식
반응형 웹은 하나의 HTML을 유동형 그리드·유연한 이미지·미디어 쿼리로 화면 크기에 맞게 바꿔 보여 주는 방식입니다. 기기별로 별도 URL의 페이지를 만드는 것은 모바일 전용 사이트 방식이라 반응형의 핵심 기술이 아닙니다.
웹 구현(HTML·CSS·JavaScript)7번 문항
label 요소와 input 요소를 연결하는 방법으로 옳은 것은?
1. 1.label의 name 속성 값을 input의 class 값과 같게 쓴다
2. 2.label의 href 속성에 input의 이름을 쓴다
3. 3.label의 for 속성 값을 input의 id 값과 같게 쓴다
4. 4.label과 input을 반드시 서로 다른 form 안에 둔다
정답·해설 보기
정답 3번. label의 for 속성 값을 input의 id 값과 같게 쓴다
<label for="userid">와 <input id="userid">처럼 for와 id를 맞추면 레이블을 눌러도 입력란에 초점이 가고 화면 낭독기가 레이블을 읽어 줍니다. name·class·href로는 연결되지 않습니다.
웹 구현(HTML·CSS·JavaScript)8번 문항
표(table)에서 하나의 셀이 가로로 여러 열을 차지하도록 병합할 때 쓰는 속성은?
1. 1.rowspan
2. 2.colspan
3. 3.cellspacing
4. 4.border
정답·해설 보기
정답 2번. colspan
colspan은 셀이 가로 방향으로 차지할 열 수를 지정합니다. rowspan은 세로 방향 행 병합이고, cellspacing과 border는 셀 간격과 테두리에 관한 옛 속성입니다.

웹 구현(HTML·CSS·JavaScript)만 골라서 모의고사 풀기

CBT 모의고사에서 과목을 웹 구현(HTML·CSS·JavaScript)으로 지정하면 이 과목 문항만 출제됩니다. 전체 100문항을 무료로 풀 수 있어요.

웹디자인개발기능사 CBT 모의고사 시작하기

CertHub 예상문제집 · PDF

웹디자인개발기능사 예상문제 100제

웹 구현(HTML·CSS·JavaScript)을 포함해 전 과목을 정답·해설과 함께 인쇄해서 풀어 보세요.

출제기준 과목 구성에 맞춘 자체 제작 예상문제
전 문항 정답 · 해설 수록 (오답 보기까지)
빠른 정답표로 먼저 채점 → 틀린 문항만 정독
A4 인쇄 최적화 PDF, 가정용 프린터 출력 가능

5,000원

구매하러 가기

기출문제 원본이 아닌 CertHub 자체 제작 예상문제입니다. 디지털 콘텐츠 특성상 다운로드가 시작된 이후에는 환불이 어렵습니다. 결제와 다운로드는 외부 판매 페이지(래피드)에서 진행됩니다.

다른 종목 예상문제 PDF 보기

웹디자인개발기능사 시험일정·응시자격·합격률 보기

기준일 2026년 10월 18일 · CertHub가 자체 제작한 예상문제입니다. 시행기관이 공개한 기출문제가 아닙니다.