HTML/CSS/JS 프로그래밍 문제에서는 웹 개발에서 사용자에게 드러나는 UI부분(=프론트엔드)을 담당하는 클라이언트 사이드의 개발 능력을 평가하거나 실습을 유도하기 위한 문제 형태입니다.  해당 문제에서는 서버사이드 프로그래밍에 대한 내용은 포함되지 않으며, 웹 서비스/어플리케이션 개발 문제와 비슷하게, 웹 프로젝트 zip 파일을 업로드 한 뒤, 수정 및 열람 가능한 파일 리스트를 정해주는 방식으로 문제를 만들게 됩니다. 채점모드의 채점 기능도 웹 서비스/어플리케이션 개발 문제와 같이 자동화된 웹 UI 테스트 툴인 나이트워치를 이용하여 이루어집니다.

문제 해결 언어

문제 해결 언어란에서 지원자가 작업할 웹 프로젝트에 관련된 내용을 설정할 수 있습니다.

HTML/CSS/JS 프로그래밍 문제는, 출제자가 여러개의 파일들로 이루어진 프로젝트 형태의 zip파일을 업로드하고, 파일들 중 지원자가 열람 및 수정 가능한 파일을 지정하는 방식으로 출제됩니다. 지원자는 요구 사항에 맞게 주어진 파일들을 올바르게 수정하면 됩니다. (지원자는 추가적인 파일을 생성하거나 기존에 존재하는 파일을 삭제할 수 없습니다.)

라이브러리 추가

jQuery나 Bootstrap과 같이 클라이언트 사이드에서 자주 쓰이는 라이브러리와 디자인 프레임 워크를 쉽게 포함할 수 있도록 기능을 제공합니다.

 외부 라이브러리 추가란에서 추가할 라이브러리를 선택하면 나타나는 HTML 태그를 업로드하는 프로젝트의 html 파일에 삽입하면 해당 라이브러리를 사용할 수 있습니다.

기본 프로젝트 설정

기본 프로젝트란에서 zip 형식으로 압축된 웹 프로젝트 파일을 업로드하면, 프로젝트 설정에 해당 압축파일 내부에 있는 파일 리스트가 나타납니다.

채점 답안

HTML/CSS/JS 개발 문제는 UI 테스트 자동화 툴인 나이트워치를 이용하여 정답여부를 판단하여 작성한 답안에 대하여 채점을 하고 있습니다. 그러므로 문제 출제자는 채점모드의 HTML/CSS/JS 개발 문제를 작성하기 위해서는 나이트워치 채점 스크립트를 작성할 수 있어야 합니다. 해당 내용은 분량 상 다른 페이지에서 소개하도록 하겠습니다. 나이트워치와 관련된 자세한 내용은 아래의 링크를 참고해주세요.