> For the complete documentation index, see [llms.txt](https://help.goorm.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.goorm.io/ko/edu-lecturer/04.quiz/html-css-js-programming.md). # 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. 문제 해결 언어 ![](/files/-Lu6CnuqQmNwVRom8m6t) 문제 해결 언어란에서 수강자가 작업할 웹 프로젝트에 관련된 내용을 설정할 수 있습니다. HTML/CSS/JS 프로그래밍 문제는, 출제자가 여러개의 파일들로 이루어진 프로젝트 형태의 zip파일을 \ 업로드하고, 파일들 중 수강자가 열람 및 수정 가능한 파일을 지정하는 방식으로 출제됩니다. \ 수강자는 요구 사항에 맞게 주어진 파일들을 올바르게 수정하면 됩니다. \ (수강자는 추가적인 파일을 생성하거나 기존에 존재하는 파일을 삭제할 수 없습니다.) ### ### 2. 라이브러리 추가 ![](/files/-Lu6CwUXIxf73xSYoPnb) jQuery나 Bootstrap과 같이 클라이언트 사이드에서 자주 쓰이는 라이브러리와 \ 디자인 프레임 워크를 쉽게 포함할 수 있도록 기능을 제공합니다. **외부 라이브러리 추가**란에서 추가할 라이브러리를 선택하면 나타나는 HTML 태그를 업로드하는 \ 프로젝트의 html 파일에 삽입하면 해당 라이브러리를 사용할 수 있습니다. **기본 프로젝트란**에서 zip 형식으로 압축된 웹 프로젝트 파일을 업로드하면, \ 프로젝트 설정에 해당 압축파일 내부에 있는 파일 리스트가 나타납니다. **프로젝트 설정**에서 응시자가 열람 및 수정할 수 있는 HTML, CSS, JS 관련 파일들을 선택합니다. \ \&#xNAN;**`Ctrl`**(Mac OS 기준 **`cmd`**)키를 이용하여 복수개의 파일을 선택할 수 있으며, \ 현재는 최대 5개까지 선택이 가능하도록 설정되어있습니다. #### 웹 서버 프로젝트 경로 설정 및 실행해보기 프로젝트 설정 하단에 **웹 서버 실행 시에 연결될 프로젝트 경로(기본:/)** 라고 쓰여 있는 문자열 입력란은, \ **웹 서버 확인 경로**입니다. 기본 값은 '/' (루트 경로)이며, 설정하지 않을 경우 자동으로 루트 경로로 \ 입력됩니다. 예를 들어 로컬 호스트에서 웹 서버 실행시 다음 경로에 메인 페이지가 나타나게 된다면, \ 웹 서버 확인 경로는 `/main.php`가 될 것입니다 (). 가장 하단의 **실행해보기** 버튼을 눌러서, 업로드한 웹 서버가 잘 동작하고, \ 웹 서버 실행 확인 로직이 잘 동작하는지 확인할 수 있습니다. 실행해보기 버튼을 누르면, 웹 서버가 팝업 형태로 나타나게 되므로, 만약 작업중인 웹 브라우저에 \ 팝업차단이 설정되어 있다면, 잠시라도 해당 기능을 해제시킨 뒤 실행해보기를 하셔야 합니다.\ 팝업 창을 종료하게 되면 해당 웹 서버가 종료되게 됩니다. ### ### 3. 채점 답안 ![](/files/-Lu6DKh8v41LwPE9oLVn) HTML/CSS/JS 개발 문제는 UI 테스트 자동화 툴인 **나이트워치를** 이용하여 정답여부를 판단하고 \ 작성한 답안을 채점합니다. 그러므로 채점모드의 HTML/CSS/JS 개발 문제를 작성하기 위해서는 \ 나이트워치 채점 스크립트를 작성할 수 있어야 합니다. **나이트워치와** 관련된 자세한 내용은 다음 챕터 **채점 스크립트 작성하기**에서 확인해주세요!