[Html] 설문조사 페이지 만들기 1 - vs코드 자동완성

업무의 일환으로 설문조사 웹 페이지를 만들게 되었습니다.

 

처음에는 간단해서 반나절이면 끝날 줄 알았는데

역시나 생각할 거리가 많았고 2일정도 걸렸습니다.

 

 

문항처럼 반복 작성하는 노가다가 있었지만

VS코드의 단축키 기능 도움을 많이 받았습니다.

(특히 ctrl+alt+방향키 , alt+클릭...)

 

 

 

---

기능 구상

기능은 크게 3가지가 있습니다.

1. 각 설문 문항 (checkbox, radio)

2. 미응답 여부 확인

3. 설문 저장

 

 

특히 미응답 여부를 확인할 때

1) 단순히 선택값의 유무를 판단하는 경우

2) 기타(직접입력)을 선택한 경우

3) n개 이상, m개 이하 복수선택인 경우(checkbox)

이렇게 3가지 경우를 추가로 고려해야 하죠.

 

 

우선은 각 설문 문항부터 작성하고

이후 JS로 미응답 여부를 판단한 뒤

전부 응답했다면 저장을 해주기로 정했습니다.

 

 

 

---

설문 문항 작성

설문지의 형태는 이렇습니다.

<style>
  li > label > input[type=checkbox] {width: 20px; height: 20px; vertical-align: middle; margin: 0 5px 0 0;}
  li > label > input[type=radio] {width: 20px; height: 20px; vertical-align: middle; margin: 0 5px 0 0; vertical-align: top;}
</style>

<div style='background-color: lightcoral; width: 350px; padding: 7px 12px 7px 12px'>
    <div style='font-size: 20px; text-align: center; font-weight: bolder; margin-bottom: 10px;'> * 설문조사 * </div>
    <div style='background-color: whitesmoke; padding: 12px 12px 12px 12px; margin-top: 5px;'>
      <div style="font-weight: bolder;">1 문항. 서비스 만족도</div>
      <div style="list-style: none; margin-top: 7px;">
      <li><label for="Q1_1"><input type="radio" name="Q1" id="Q1_1" value="만족"> 만족</label></li>
      <li><label for="Q1_2"><input type="radio" name="Q1" id="Q1_2" value="불만족(직접입력)"> 불만족(직접입력)</label></li>
      <li><label for="Q1_a"><input type="text" name="Q1" id="Q1_a"></label></li>
      </div>
    </div>
    <div style='background-color: whitesmoke; padding: 12px 12px 12px 12px; margin-top: 5px;'>
      <div style="font-weight: bolder;">2 문항. 서비스 사용 장소</div>
      <div style="list-style: none; margin-top: 7px;">
      <li><label for="Q2_1"><input type="checkbox" name="Q2" id="Q2_1" value="집"> 집</label></li>
      <li><label for="Q2_2"><input type="checkbox" name="Q2" id="Q2_2" value="회사"> 회사</label></li>
      <li><label for="Q2_3"><input type="checkbox" name="Q2" id="Q2_3" value="학교"> 학교</label></li>
      <li><label for="Q2_4"><input type="checkbox" name="Q2" id="Q2_4" value="기타(직접입력)"> 기타(직접입력)</label></li>
      <li><label for="Q2_a"><input type="text" name="Q2" id="Q2_a"></label></li>
      </div>
    </div>
    <div style="text-align: center; margin-top: 15px;">
      <button onclick="ans_chek()" style="font-size: 20px; padding: 7px; width: 30%;"> 제 출 </button>
    </div>
  </div>

1. 선택지는 <li>태그를 사용하여 입력
2. 사용자의 편의를 위해 각 선택지마다 <label>을 추가
3. 선택지 id는 언더바+숫자 _1 직접 입력란 id는 언더바+알파벳 _a으로 규칙을 준다

 

** 이유 **

1번은 선택지의 스타일 관리를 용이하게 하기 위함입니다.

 

따로 스타일을 설정하지 않으면 모든 선택지는 가로로 정렬되기 때문에

세로로 정렬하려면 style="display: flex; flex-direction: column;"을 추가해 줘야겠죠.

 

이것이 번거롭다고 생각하여 <li>태그를 쓰고

style="list-style: none;"을 추가하였습니다.

 

 

2번은 체크박스나 라디오박스가 작아서 클릭하기 힘들기에

text 부분을 클릭해도 선택이 되도록 사용자의 편의를 주기 위함입니다.

 

 

3번은 이후 미응답 여부를 확인할 때

id값을 작성하기 쉽게 하기 위함입니다.

 

예를들어 2문항에서 4번 선택지가 직접 입력이기에

직접 입력란의 id를 Q2_4_1이라고 작성했다 가정해 봅시다.

 

문항이 2개라면 상관없지만 20개나 30개쯤 되면

각 문항의 몇 번째 선택지가 직접 입력인지 알아야

직접 입력란의 id를 작성할 수 있을겁니다.

 

이렇게 되면 실수하기도 쉽겠죠;;

 

 

 

---

VS CODE의 자동완성

이제 구성이 짜여졌으니 선택지를 입력하는 일만 남았습니다.

 

<li><label for="Q2_1"><input type="checkbox" name="Q2" id="Q2_1" value="집"> 집</label></li>을 복사하고

선택지의 갯수만큼 붙여넣은 다음, 라벨의 for, input의 id 숫자값을 바꿔줘야겠죠.

 

하지만 이 또한 선택지가 10개쯤 넘어가면 괴로워집니다 ㅠㅠ

 

 

Visual Studio Code에는 편리한 단축키와 자동완성 기능이 존재합니다.

 

먼저 자동완성 기능을 이용해 선택지 5개를 만들어 봅시다.

li*5>label[for=Q1_$]>input:checkbox[name=Q1]#Q1_$[value=]

위 코드를 입력하고 Enter를 하면 아래와 같이 코드가 5번 반복됩니다.

 

 

<li><label for="Q1_1"><input type="checkbox" name="Q1" id="Q1_1" value=""></label></li>
<li><label for="Q1_2"><input type="checkbox" name="Q1" id="Q1_2" value=""></label></li>
<li><label for="Q1_3"><input type="checkbox" name="Q1" id="Q1_3" value=""></label></li>
<li><label for="Q1_4"><input type="checkbox" name="Q1" id="Q1_4" value=""></label></li>
<li><label for="Q1_5"><input type="checkbox" name="Q1" id="Q1_5" value=""></label></li>

자동완성 코드를 해석하자면, li가 5번 반복되는데 li*5

그 안에 >

label태그가 있고 label

for을 Q_숫자(자동증가) 규칙으로 부여해줄 것입니다. [for=Q1_$]

그리고 그 안에 체크박스 타입의 input태그가 있고 >input:checkbox

name은 Q1이고 [name=Q1]

id는 Q1_숫자(자동증가)의 규칙을 가집니다. #Q1_$

마지막으로 value는 없습니다. [value=]

 

 

자세히 보면 javascript의 문법과 닮아서 참고하여 커스텀하시면 됩니다.

 

 

 

---

단체수정을 도와줄 VS CODE 단축키

다음편에선 javascript를 이용한 미응답 여부 확인 코드를 작성할 것입니다.

 

하지만 이또한 적잖은 반복 수정 및 입력을 요구하죠.

 

 

이때 도움되는 단축키가

ctrl+alt+방향키 : 방향키의 방향대로 커서를 추가

alt+클릭 : 클릭한 위치에 커서를 추가

ctrl+shift+방향키 : 방향키의 방향대로 한 단어를 블록 선택

이렇게 3가지 입니다.

 

 

ctrl+shift+방향키를 쓰는 이유는 한 칸씩 선택하면 Q_1와 Q_11간에 1칸의 차이가 생기기 때문이죠.

 

 

 

자, 이제 빠르게 설문지 문항을 작성해 볼까요?