# HTML/CSS/JS 프로그래밍 문제 만들기
{% hint style="info" %}
**HTML/CSS/JS 프로그래밍 문제**는 채점모드, 제출모드, 실행모드로 \
문제를 생성할 수 있습니다.
{% endhint %}
이 문서에서는 **HTML/CSS/JS 프로그래밍 문제**를 입력하는 내용만을 다룹니다. \
새로 문제를 만들 때 기본적으로 입력하는 사항들에 대해서는 \
"문제 가져오기 및 공통 설정" 도움말을 참고해주세요.
{% content-ref url="/pages/-LrsSaGzbBU26HJdqGao" %}
[문제 가져오기 및 공통 설정](/ko/edu-lecturer/04.quiz/import-and-configuration.md)
{% endcontent-ref %}
**HTML/CSS/JS 프로그래밍 문제**에서는 웹 개발에서 사용자에게 드러나는 UI부분(=프론트엔드)을 \
담당하는 클라이언트 사이드의 개발 능력을 평가하거나 실습을 유도하기 위한 문제 형태입니다.
해당 문제에서는 서버사이드 프로그래밍에 대한 내용은 포함되지 않으며, \
웹 서비스/어플리케이션 개발 문제와 비슷하게, 웹 프로젝트 zip 파일을 업로드 한 뒤, \
수정 및 열람 가능한 파일 리스트를 정해주는 방식으로 문제를 만들게 됩니다. \
\
채점모드의 채점 기능도 웹 서비스/어플리케이션 개발 문제와 같이 \
자동화된 웹 UI 테스트 툴인 [**나이트워치**](https://nightwatchjs.org/)를 이용하여 이루어집니다.
###
### 1. 문제 해결 언어
문제 해결 언어란에서 수강자가 작업할 웹 프로젝트에 관련된 내용을 설정할 수 있습니다.
HTML/CSS/JS 프로그래밍 문제는, 출제자가 여러개의 파일들로 이루어진 프로젝트 형태의 zip파일을 \
업로드하고, 파일들 중 수강자가 열람 및 수정 가능한 파일을 지정하는 방식으로 출제됩니다. \
수강자는 요구 사항에 맞게 주어진 파일들을 올바르게 수정하면 됩니다. \
(수강자는 추가적인 파일을 생성하거나 기존에 존재하는 파일을 삭제할 수 없습니다.)
###
### 2. 라이브러리 추가
jQuery나 Bootstrap과 같이 클라이언트 사이드에서 자주 쓰이는 라이브러리와 \
디자인 프레임 워크를 쉽게 포함할 수 있도록 기능을 제공합니다.
**외부 라이브러리 추가**란에서 추가할 라이브러리를 선택하면 나타나는 HTML 태그를 업로드하는 \
프로젝트의 html 파일에 삽입하면 해당 라이브러리를 사용할 수 있습니다.
**기본 프로젝트란**에서 zip 형식으로 압축된 웹 프로젝트 파일을 업로드하면, \
프로젝트 설정에 해당 압축파일 내부에 있는 파일 리스트가 나타납니다.
**프로젝트 설정**에서 응시자가 열람 및 수정할 수 있는 HTML, CSS, JS 관련 파일들을 선택합니다. \
\&#xNAN;**`Ctrl`**(Mac OS 기준 **`cmd`**)키를 이용하여 복수개의 파일을 선택할 수 있으며, \
현재는 최대 5개까지 선택이 가능하도록 설정되어있습니다.
#### 웹 서버 프로젝트 경로 설정 및 실행해보기
프로젝트 설정 하단에 **웹 서버 실행 시에 연결될 프로젝트 경로(기본:/)** 라고 쓰여 있는 문자열 입력란은, \
**웹 서버 확인 경로**입니다. 기본 값은 '/' (루트 경로)이며, 설정하지 않을 경우 자동으로 루트 경로로 \
입력됩니다. 예를 들어 로컬 호스트에서 웹 서버 실행시 다음 경로에 메인 페이지가 나타나게 된다면, \
웹 서버 확인 경로는 `/main.php`가 될 것입니다 ().
가장 하단의 **실행해보기** 버튼을 눌러서, 업로드한 웹 서버가 잘 동작하고, \
웹 서버 실행 확인 로직이 잘 동작하는지 확인할 수 있습니다.
실행해보기 버튼을 누르면, 웹 서버가 팝업 형태로 나타나게 되므로, 만약 작업중인 웹 브라우저에 \
팝업차단이 설정되어 있다면, 잠시라도 해당 기능을 해제시킨 뒤 실행해보기를 하셔야 합니다.\
팝업 창을 종료하게 되면 해당 웹 서버가 종료되게 됩니다.
###
### 3. 채점 답안
HTML/CSS/JS 개발 문제는 UI 테스트 자동화 툴인 **나이트워치를** 이용하여 정답여부를 판단하고 \
작성한 답안을 채점합니다. 그러므로 채점모드의 HTML/CSS/JS 개발 문제를 작성하기 위해서는 \
나이트워치 채점 스크립트를 작성할 수 있어야 합니다.
**나이트워치와** 관련된 자세한 내용은 다음 챕터 **채점 스크립트 작성하기**에서 확인해주세요!
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.goorm.io/ko/edu-lecturer/04.quiz/html-css-js-programming.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.