💛[부스트코스_웹 UI 개발] 19. 폼

폼 소개

웹 서버의 정보를 주고받는 형식의 UI를 <form>태그를 이용해서 작성했다고 해서 Form UI라고 부른다.

다양한 데이터를 받을 수 있는 태그들 존재.
이런 태그들을 폼과 관련된 요소들이라고 해서 폼 요소/폼 태그라고 부른다.

여러 브라우저에서는 동일한 폼 요소도 다양한 디자인으로 표현됨
따라서 통일된 모습으로 표현하고 싶은 경우는 폼 요소들을 css를 이용하여 커스텀 해주어야 한다.

---

폼 커스텀 - 텍스트 박스

사용 예시

• 네이버 메인페이지 검색창
• 네이버 로그인 화면

텍스트 필드의 커스텀은 CSS 속성을 이용해서 단순한 박스 모델처럼 쉽게 수정가능하다.

placeholder를 어떻게 수정할 수 있는지 살펴보자

주요 태그 및 속성

• HTML
  input[type=text], input[type=password], textarea
• CSS
  ::placeholder
  placeholder로 들어가는 기본 문구는 ::placeholder를 통해 폰트 스타일을 편집할 수 있다.
  하지만 이 pseudo-class는 비표준코드이기 때문에 브라우저에 따라서 공통된 방식을 제공하질 않는다.
  그래서 각 브라우저에 따라서 대응할 수 있는 선택자를 제공하고 있다.
  w3cschool참고!

<p><input type="text" placeholder="이름을 입력해주세요."></p>

<p><input type="password" placeholder="비밀번호를 입력해주세요."></p>

<p><textarea name="" id="" cols="30" rows="10" placeholder="문구를 입력해주세요."></textarea></p>

input[type="text"],
input[type="password"] {
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ddd;
    font-size: 15px;
    text-indent: 10px;
    color: #000;
}

textarea {
    width: 280px;
    height: 130px;
    padding: 9px;
    border: 1px solid #ddd;
    font-size: 15px;
    resize: none;
    color: #000;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: red;
}
::-moz-placeholder { /* Firefox 19+ */
    color: red;
}
:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
:-moz-placeholder { /* Firefox 18- */
    color: red;
}

textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: blue;
}
textarea::-moz-placeholder { /* Firefox 19+ */
    color: blue;
}
textarea:-ms-input-placeholder { /* IE 10+ */
    color: blue;
}
textarea:-moz-placeholder { /* Firefox 18- */
    color: blue;
}

만약 브라우저에서 인식할 수 없는 선택자가 끼어있다면 그 코드 자체를 브라우저가 무시하게 됨.
그러므로 prefix가 붙는 placeholder 내용들은 따로따로 써주는것이 올바른 방법이다.

정리

• 텍스트 필드의 커스텀은 일반적인 박스 형태를 커스텀하는것과 동일
• placeholder를 커스텀할때에는 비표준 코드임을 인지하고 각 브라우저에 대응하는 방식을 잘 확인해서 사용하는것을 기억하기.

---

폼 커스텀 - 체크박스, 라디오

주요 태그 및 속성

• HTML
  input[type:checkbox], input[type:radio], label
  label 태그를 이용해서 형태 만듦
• CSS
  UI element states pseudo-classes(:checked) Pseudo-element(:before)
  :checked를 이용해서 활성화되었는지 체크하는 방식을 이용해서 상태값 반영
  :before를 이용해 커스텀 된 예제들 구현

1. CSS만을 이용한 checkbox 커스텀

<div>
    <input type="checkbox" id="check_button1" name="">
    <label for="check_button1">선택1</label>
</div>

<div>
    <input type="checkbox" id="check_button2" name="">
    <label for="check_button2">선택2</label>
</div>

input[type='checkbox'] { /* input 감추기 */
    position: absolute;
    overflow:hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}
input[type='checkbox'] + label { /*회색 배경*/
    display: inline-block;
    overflow: hidden; /*글씨 초기화*/
    position: relative; 
    width: 36px;
    height: 21px;
    border-radius: 10px;
    background: #666;
    vertical-align: top;
    color: transparent; /*글씨 초기화*/
}
input[type='checkbox'] + label:after { /*동그라미 모양*/
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 19px;
    height: 19px;
    background: #fff;
    border-radius: 50%;
}

input[type='checkbox']:checked + label { /*input이 checked 되었을때*/
    background-color: #62a7ee;
}
input[type='checkbox']:checked + label:after { /*동그라미 이동*/
    left: auto;
    right: 1px;
}

2. 이미지를 이용한 checkbox 커스텀

<div>
    <input type="checkbox" id="check_button1" name="">
    <label for="check_button1">선택1</label>
</div>

<div>
    <input type="checkbox" id="check_button2" name="">
    <label for="check_button2">선택2</label>
</div>

input[type='checkbox'] { /* input 감추기 */
    position: absolute;
    overflow:hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}
input[type='checkbox'] + label {
    display: inline-block;
    font-size: 16px;
}
input[type='checkbox'] + label:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin:-4px 5px 0 0;
    background: url(checkbox.png) no-repeat 0 0;
    background-size: 20px;
    vertical-align: top;
    content:'';
}
input[type='checkbox']:checked + label:before { /*선택했을떄 이미지 변경*/
    background-image: url(checkbox_on.png); 
}

3. 이미지를 이용한 radio 버튼 커스텀

<div>
    <input type="radio" id="radio_button1" name="radio_form">
    <label for="radio_button1">라디오1</label>
</div>

<div>
    <input type="radio" id="radio_button2" name="radio_form">
    <label for="radio_button2">라디오2</label>
</div>

<div>
    <input type="radio" id="radio_button3" name="radio_form">
    <label for="radio_button3">라디오3</label>
</div>

input[type='radio'] { /* input 감추기 */
    position: absolute;
    overflow:hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}
input[type='radio'] + label {
    display: inline-block;
    font-size: 16px;
}
input[type='radio'] + label:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin:-4px 5px 0 0;
    background: url(radio.png) no-repeat 0 0;
    background-size: 20px;
    vertical-align: top;
    content:'';
}
input[type='radio']:checked + label:before {
    background-image: url(radio_on.png); 
}

정리

• input과 label의 연결을 통한 UI 컨트롤
  (for, id 연결해야 연결됨)
• UI element states pseudo-classes(:checked)를 이용한 상태 구분

---

폼 커스텀 - 파일찾기

주요 태그 및 속성

• HTML
  input[type=file]
• CSS
  opacity
  파일찾기 type의 input을 opacity값을 이용해서 사용자 눈에는 보이지 않게 바꾸고 우리가 원하는 모양을 그 위에 덮어씌우는 방식으로 커스텀

1. CSS만을 이용한 파일 선택 버튼 커스텀

<div class="file_form">
  <input type="file">
  <span class="text">filename..</span>
</div>

.file_form {
    position: relative; /* position 기준 */
    display: inline-block;
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid cornflowerblue;
    font-size: 12px;
}
.file_form .text { /*말줄임*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 50px 0 10px;
    white-space: nowrap;
}
.file_form .text:after { /* 버튼형태 구현 */
    position: absolute;
    top:0;right:0;
    width: 50px;
    background-color: cornflowerblue;
    text-align: center;
    color: #fff;
    content:'파일찾기';
}
.file_form input[type='file'] { /*input을 커스텀한 사각형 위로 띄워주기*/
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10; /*'파일찾기'보다 올려줌*/
    width: 100%;
    opacity: 0;
}

2. 이미지 버튼을 이용한 프로필 등록 만들기

<div class="file_form_img">
  <span class="img"><img src="default.png" alt="프로필 이미지"></span>
  <label class="file"><input type="file"></label>
</div>

.file_form_img {
    width: 100px; /* 프로필 등록 사이즈 지정 */
}
.file_form_img .img {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    border:1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%; /* 원 모양*/
}
.file_form_img .img img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.file_form_img .file {
    position: relative;
    display: block;
    margin: 10px auto 0; /* 버튼 가운데 정렬 */
    background:url(btn_file.jpg) no-repeat;
    width: 82px;
    height: 24px;
}
.file_form_img .file input[type=file] {
    position: absolute;
    z-index: 10;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    opacity: 0;
}

정리

• opacity를 이용해서 input:file의 기능만 남기고 가리기
  file type은 버튼의 모양과 그 파일명이 노출되는 영역에 세부적으로 커스텀을 할 수 없다.

• 선택된 값은 다른 공간으로 보여주도록 js를 이용한 개발대응
  선택된 파일명이나 파일 정보들을 미리보기 형식으로 보여주기 위해서는 개발대응이 꼭 필요하다.

---

폼 커스텀 - SELECT 메뉴

select 메뉴를 클릭했을때 나오는 아래의 선택형 내용들은 CSS만으로 커스텀을 할 수가 없다.
그래서 펼쳐진 드롭박스의 모양이 기존 모습과 다른 경우는 모두 레이어 형태로 리스트를 만들고 프론트 엔드 개발 대응으로 select의 동작을 구현한 것이다.

주요 태그 및 속성

• HTML
  select
• CSS
  appearance
  기본 버튼 모양 방식을 appearance를 통해 없애고 그 위치에 원하는 이미지를 넣어서 커스텀 하는 방식

<div class="select_form">
    <select name="" id="">
        <option value="">선택1</option>
        <option value="">선택2</option>
        <option value="">선택3</option>
    </select>
</div>

.select_form {
    display: block;
    position: relative;
    width: 198px;
    height: 38px;
    line-height: 40px;
    border: 1px solid #ddd;
    text-align: left;
}
.select_form select {
    width: 100%;
    height: 100%;
    padding: 0 30px 0 10px;
    background-color: transparent;
    border: 0 none;
    font-size: 16px;
    appearance: none; /*기본 버튼 모양 없애기*/
    /*appearance 속성이 webkit 엔진과 Mozilla사에서 사용하는 Gecko 엔진에서만 제공하기 때문에 prefix를 붙여준 다음 없애줘야만 한다. appearance도 비표준 코드*/
    -moz-appearance: none;
    -webkit-appearance: none;
}
.select_form:after { /*버튼 형태*/
    position: absolute;
    top: 16px;
    right: 10px;
    background:url(select.png) no-repeat 0 0;
    width: 13px;
    height: 7px;
    display: block;
    content:'';
}

정리

appearance 속성을 이용하여 기본 버튼 기능을 감추기

appearance 속성 또한 placeholder 커스텀할때와 마찬가지로 비표준 코드로, webkit과 Gecko 엔진 기반의 브라우저에서만 동작한다.
즉 MS사에서 제공하는 인터넷 익스플로러에서는 대응코드가 없기 때문에 IE에서 커스텀 된 셀렉트 박스를 제공하기 위해서는 레이어 형태의 드롭다운방식을 만들어서 개발 구현해야 한다는 것을 기억하자