9. Responsive Web Design Projects - Build Survey Form

9. Responsive Web Design Projects - Build Survey Form

이번 프로젝트는 HTML에서 정말 중요한 Form을 다룹니다. Form이 중요한 이유는 Form의 내용물이 결국 서버에게 데이터를 건내는 데이터가 되고 이를 통해 서비스가 진행되기 때문입니다. 그럼 이전 리뷰와 마찬가지로 구조부터 먼저 분석하겠습니다.

1. 박스 모양으로 HTML 문서 구조 분석하기

박스를 적당한 수준에서 나누어 보았습니다. 처음 디자인 문서를 보거나 카피할 대상을 보았을때 너무 세부적인 부분까지 박스로 나누어 보다 보면 나중에 시간이 더 걸립니다. 일단 구조적 측면에서 접근하여 대략적인 틀로 먼저 나누어 문서를 작성한 후에 세부 내용을 점차 채워나가는 방식이 작업을 하시는데 유리합니다. 예전과 달리 추가된 것이 있습니다. 동그라미 모양인데 완전히 반복적인 것에 대해서는 각각을 설명하는 것이 불필요하다고 생각하여 동그라미를 치고 그 부분에 대해서 꺽쇠(<>)가 쳐진 tag들로 표현을 해주도록 하겠습니다.

예제 결과물을 보면 알겠지만 각각의 input이 label과 함께 제시되어 있습니다. 대부분의 경우 input과 label은 같이 오기 때문에 하나의 박스로 먼저 처리를 해주었습니다. 그리고 가장 큰 범위는 파란색 박스로 처리되어 있는데 두 개로 이루어져있습니다. 전체 내용을 알려주는 헤더 부분과 Form의 내용부를 이루는 메인 부분으로 나뉩니다. 여기에 user story에 따른 요구사항을 반영하면 다음과 같은 형태가 됩니다.

여기를 보시면 form 내부에 label과 input을 넣었습니다. 새로운 규칙을 추가했는데 박스가 쳐져 있는 경우에는 꺽쇠 없이 바로 글씨를 쓰지만, 박스가 없는 경우에는 꺽쇠를 치도록 하겠습니다. 또한, 별도로 박스에 대한 설명이 없는 경우에는 div라고 보시면 되겠습니다. 각각의 label, input 쌍을 div가 묶어준다고 보시면 됩니다. 동그라미의 경우 input과 label이 반복되어 나타나므로  <label><input></label>

과 같은 형태로 표현해 주었습니다.

보시면 <label><input>인 경우가 있고 <label><input></label>

로 되어 있는게 있는데 이건 label의 child로 input이 온다는 얘기입니다. 전자의 경우 label과 input을 묶기 위해서는(묶는 다는 것은 onClick event를 같이 받는 다는 것을 의미합니다) label에 for attribute로 input의 id를 주어야 합니다. 이렇게 하지 않으려면 label tag 내에 input tag를 넣으면 됩니다. 그렇게 하면 for와 id 설정 없이도 onClick을 같이 받을 수 있게 되어 글씨 부분을 선택해도 선택이 됩니다.

label element에 대하여 block 속성을 주면 전자의

경우에는 label 내용 다음 줄에 input 이 오고 후자의 경우에는 같은 줄에 둘다 옵니다. 이 걸 활용하면 br tag 의 사용을 줄일 수 있습니다.

보시다보면 legend를 사용한 부분이 있는데 원래 대로면 fieldset tag의 첫번째 child로만 등장하는 tag인데 여기서는 div의 자식으로 일단 해두었습니다. 여기서 div tag 대신 fieldset 태그를 사용하면 fieldset으로 예쁘게 border를 쳐주면서 묶어주게 됩니다. 확인해보시면 좋습니다.

2. HTML 세부 사항 설명하기

• #6를 해결하는 방법은 type="email"을 주면 됩니다. type에는 상당히 많은 값이 들어갈 수 있는데 최대한 머리속에 넣어두시길 바랍니다. type을 활용하면 복잡한 정규표현식 사용을 줄일 수 있기 때문입니다.
  • input에 대한 페이지 인데 여기서 type에 대한 설명을 잘 보시기 바랍니다. type에 들어가는 값은 직관적으로 이해할 수 있는 부분들이니 눈으로 한번씩만 보고 가시길 바랍니다.
• #8,9 type을 number로 하는 경우 min, max값을 설정할 수 있습니다. 이를 활용하면 그 숫자 범위 밖의 값은 입력할 수 없게 됩니다. input에 대한 페이지 링크를 타고 가서 잘 읽으면 아시겠지만 type이 date인 경우에도 min, max 값 설정이 가능합니다.
• #11 placeholder attribute에 글씨를 주면 그림과 같이 회색 글씨로 input 들어갈 부분에 글씨가 보이게 됩니다. type text, textarea 등에 나타납니다.
• #13, 14 radio button을 name attribute로 묶어주는 부분입니다. 각 radio input에 동일한 name을 주면 됩니다. 이렇게 하는 이유는 Post를 요청하는 경우에 이렇게 해야 query문의 key value pair에 정상적으로 들어가기 때문입니다. 그 때 value값은 selected된 radio input의 value가 됩니다. 각 input에 name, value를 넣는 것은 다 이러한 이유 때문입니다. 이렇게 하는 경우 별도의 JS 구현 없이도 POST를 어느 정도는 할 수 있게 됩니다.

3. CSS로 스타일 입히기

User Story에 CSS에 대한 요구사항이 없어 이 부분은 넘아갑니다.

4. 예제 따라하기

• 먼저 따라해볼 것은 색과 이미지가 같이 있으면서 흐릿하게 보이는 배경입니다. 또한 이 배경은 스크롤을 내려도 움직이지 않아야 합니다. CSS 배경 관련 요소를 혼합하여 사용하면 됩니다. background-image 속성을 주시고 color 값을 rgba로 주시면 됩니다. 이때 중요한 것이 rgba값의 a로 투명도를 조절해야지 opacity 속성으로 투명도를 조절하면 안된다는 것입니다. opacity의 경우 child inherit이 되기 때문에 그 이하 모든 자식 요소 들이 투명해지는 문제가 있습니다. 또한 이 값을 변경해서 투명하지 않게 하는 것도 통하지 않고요. 나머지 속성은 다음의 코드를 참고하시길 바랍니다.

body { 
	background: rgb(138, 43, 226, 0.7) 
    url('https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2021/06/two_developers_pair_coding.jpg') center fixed;
    backdrop-filter: blur(3px); 
    background-size: cover
    ; background-blend-mode: multiply; 
}

• center는 background-position 값입니다. 그림의 가운데를 보여주기 위해 넣었습니다. fixed는 scroll 움직임에 따라서 배경이 움직이지 않기 위해 들어갔습니다.
• background-fileter는 흐릿한 효과(blur)를 위해 들어갔고 background-size: cover는 그림이 전체를 뒤덮는 사이즈가 되기 위해 넣었습니다. background-blend-mode는 색상과 그림이 섞이는 방식을 정하기 위해 들어갔습니다.

• Select current role과 Select your option 부분을 클릭해보면 다른 부분 선택할 수는 있지만 선택하면 다시 해당 부분을 선택할 수는 없게 되어 있습니다. 이 때 2개의 boolean attribute를 활용합니다. option tag 에 disabled와 selected attribute를 주면 선택할 수는 없지만 첫 값으로는 선택되도록 할 수가 있습니다. 여기에 value를 넣은 것은 빈 무언가를 보내도록 하는 것입니다. 나머지 input 들 각각이 value를 가지므로 여기도 갖게 해주는 거죠.
• label tag에 block 속성을 주면 label이 div와 같은 역할을 하게 됩니다. 이를 이용하여 <label><input></label>의 경우 input과 label을 같은 줄에, <label><input>은 다른 줄에 둘 수 있게 됩니다.
• 몹시도 거슬리는 부분이 일단 다 해놓고 나면 dropdown의 width와 text나 number input의 width가 미묘하게 차이가 나는 점이다. 이 부분은 box-model에 대한 이해가 필요하다. 링크를 보고 이해한 부분은 box-sizing: content-box의 특성이다.(content-box가 default) 축약해서 얘기하면 이 content-box의 특성(border가 content의 밖에 있는 것) 때문에 삐져나올 수 밖에 없기 때문에 border-box를 사용해야 한다.