2024.08.23 (Day 18) - HTML/CSS [Forms(Form, Input, Textarea, Button) II ]

 

폼 요소를 적절히 초기화하고 최초 스타일 재구축
폼 요소, 최소한의 접근성 확보하기
체크박스와 라디오버튼 커스텀
버튼 커스텀

 

---

◆ (day17/meeting_room)

 

▼ input은 컨테이너가 아니기에 스타일링을 위하여 한번 감싸주기위해 div를 사용하고 작업한다

즉 이 div는 input[type='text']를 한번 감싸는 역할이다.

input 자체의 스타일을 커스텀 하면 다양한 입력 필드 유형을 소화하기 어렵기 때문이다

 

▼ input의 스타일을 변수값을 설정해서 작업을 유연하게 한다

 

 

 

■ input의 height, line-height, font-size, padding등,

 플러스 알파하여 커스텀 할 수 있는 부분을 CSS Variable로 만들어준다 -> (확장성이 좋아짐)

 

▼ 62.5= 기본폰트 16px의 62.5% -> 10px 설정, body의 폰트사이즈는 root의 폰트사이즈 1.4배를 설정

 

 

 

▼ 전역변수는 모든 input이 가지고 있는 초기의 스타일링 이였고

지역변수는 전역 변수 값을 사용하지 않고 .field.type_small 마크업 내에서 사용되는 지역변수를 만들어

입력 창 커스텀 작업 한 것(작은 버전)

작은 버전을 만들어 클래스 추가해 스타일 커스텀의 선택사항을 만든것

 

 

 

폼 관련 가상 클래스

폼과 관련된 가상 클래스는 사용자가 폼을 상호작용하는 동안 

다양한 상태에 따른 스타일을 적용하는데 활용되어 웹 접근성 / 사용자 경험 향상에 도움을 준다.

 

▷ 폼관련 주요 가상 클래스

• :focus
• :focus-within
• :focus-visible
• :checked
• :disabled
• :valid
• :invalid
• :required

▼ :focus
:focus 가상 클래스는 사용자가 입력 요소를 클릭하거나 키보드로 선택하여 포커스를 받았을 때 적용된다. 

이 상태는 사용자가 입력을 시작할 준비가 되었음을 의미한다.

▼ :focus-within
:focus-within 가상 클래스는 해당 요소 또는 자식 요소 중 하나가 포커스를 받을 때 적용된다. 

주로 폼 컨테이너나 그룹에 사용된다.

▼ :focus-visible
:focus-visible 가상 클래스는 키보드로 포커스를 이동할 때만 스타일이 적용된다. 

마우스로 포커스를 이동할 때는 스타일이 적용되지 않는다.

▼ :checked
:checked 가상 클래스는 체크박스(input[type="checkbox"])나 라디오 버튼(input[type="radio"])이 

선택된 상태일 때 적용된다.

input[type="checkbox"]:checked {
  background-color: #009688;
  border-color: #004d40;
}
input[type="radio"]:checked {
  border: 2px solid #00796b;
}

<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label>

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

▼ :disabled
:disabled 가상 클래스는 비활성화된(disabled 속성을 가진) 폼 요소에 적용된다.

비활성화된 폼 상태의 스타일링을 하여 사용자가 비활성 상태를 인지할 수 있도록 한다.

▼ :valid & :invalid
:valid 가상 클래스는 입력된 값이 폼 필드의 유효성 검사 규칙을 통과했을 때 적용된다.

반대로, :invalid 가상 클래스는 유효성 검사를 통과하지 못했을 때 적용된다..

/*HTML*/
<form>
    <label for="email">이메일:</label>
    <input id="email" name="email" type="email" placeholder="na@na.com">

    <label for="secret">닉네임</label>
    <input id="secret" name="secret" type="text"  pattern="[a-z]+" placeholder="zaaaa">

    <label for="count">나이</label>
    <input id="count" name="count" type="number"  min="1" max="99" placeholder="1">
  </form>

/*CSS*/
input:invalid {border-color: red;}

input:valid {border-color: green;}

사용자가 올바른 이메일 주소와 닉네임, 나이를 입력하면 입력 필드에 녹색 테두리가 적용되고

반대로, 이메일 형식이 잘못되었거나 지정한 규칙에 맞지 않으면 빨간색 테두리가 표시된다.

 
▼ :required
:required 가상 클래스는 required 속성이 적용된 필수 입력 필드에 적용된다. 

사용자가 필드를 채우지 않은 상태에서 제출하려고 할 때 유효성 검사가 진행되며 경고창이 뜬다.

/*HTML*/
<form>
    <label for="email">이메일:</label>
    <input id="email" name="email" type="email" placeholder="na@na.com" required/>

    <label for="secret">닉네임</label>
    <input id="secret" name="secret" type="text"  pattern="[a-z]+" placeholder="zaaaa" required/>

    <label for="count">나이</label>
    <input id="count" name="count" type="number"  min="1" max="99" placeholder="1" required/>
  </form>

`

▼ has 클래스를 사용하여 input의 스타일을 전체 변경해준다.

input:focus 되었을 당시의 .field(부모)를 선택하여 스타일링한다.

.field는 그냥 div이기에 :focus는 아니된다

 

▼ 하지만 우리는 input을 선택 했을때 focus 작동될 수있게  적용

 

▼ has보다는 현재 상황에서는 모든 input,textarea등  입력 필드 전체 대상으로 focus가 표현 되어야 하기에

focus전용으로 나온 within을 사용한다.

 

▼ textarea 작업하기위해 초기화(all: unset) 하고 field 클래스 적용

 

▼ textarea의 row를 설정해주고 기본디자인 스타일링

 

 

 

 

▼ 체크박스와 라디오박스 unset으로 인해 버튼들이 사라져있다. 

레이블이 한 묶음이며 클래스를 달아준다 

checkbox와 radio button은 같은 계열이기에 공통 클래스를 생성해준 것

 

 

▼ 체크표시박스를 만들기위해 has와 :checked 가상 클래스 + ::before 가상요소를 사용하였다.

 

▼ 체크박스는 스타일 적용이가능하니 체크이미지를 포함한 위치를 잡아주고 스타일링해준다

이때 inline-flex는 기존 인라인 선상에 놓여있는 flex박스라고 보면된다 즉(inline-block = flex)

 

 

▼radio와 checkbox에 클래스를 추가하여 일반 상태와 선택 상태를 만들어준다 (가상요소)

 

 

▼ radio 가상요소가 아닌 이미지로 적용하기 svg

 

▼ 이미지커버를 넣기위해 클래스를 cover-bg 적용하여 넣어 왼쪽으로 고정시켜준다.

 

 

▼ 폼의 위치를 커버이미지 옆 오른쪽으로 조정해주기 위해

<main>마크업을 사용해 wrapper를 묶어준다.

main-aling의 부모요소인 main에 flexbox 설정해주고

자식요소에게 grow 1을 적용하여 넓이와 높이가 컨테이너에 딱 맞게 설정하였다.

또한 margin-left로 정렬 해주고 borderbox로 넘치는 것을 막아주었다.

 

 

 

▷ 커버이미지와 폼과 함께 레이아웃을 잡아주었으니 폼의 내부를 꾸며보자

우선적으로 css 초기화 및 각 라벨들에게 "form-group-label"과 그것의 부모인 div 클래스에 "form-group"

그리고 일반정보와 개인정보가 들어가있는 legend 클래스는 ir을 각각 적용해주고 버튼도 클래스명을 지정한다.

 

ir을 결정한 이유는 다음 내용인 zigzag 예제 맨밑 참고

 

 

 

▶ 일반 정보 부터 스타일링 시작

 

▼ 폼에 여러 적용되는 색 들을 전역변수 처리

 

 

 

 

[▼] svg 이미지 추가

<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7376 8.93463C14.8321 8.81125 14.875 8.67213 14.875 8.53563C14.875 8.19525 14.6072 7.875 14.2196 7.875H6.78125C6.39187 7.875 6.125 8.19613 6.125 8.53563C6.125 8.673 6.16875 8.81212 6.26412 8.9355C7.31675 10.2952 9.10962 12.6096 9.98987 13.7463C10.1141 13.9072 10.3049 14 10.5079 14C10.7091 14 10.9008 13.9064 11.025 13.7454C11.9018 12.6087 13.6885 10.2935 14.7376 8.93463Z" fill="black"/>
</svg>

 

select 필드에 ▼ 디자인 추가해주기위해 svg이미지 적용하고

만약 긴 텍스트가 들어가면 말줄임표도 적용해준다.

 

 

 

▼ ir의 일반정보와 개인정보는 사용자 웹 접근성에 따라, 적용해준다.

 

▼ 폼 내부 라벨들의 간격들 조정해주고 스타일링 해준다.

 

▼ 라디오박스와 체크박스에서 disabled된 것에 대한 마우스 커서 디자인 적용해준다.

또한 비활성화 표시 위해 disabled 상태일때 색상을 적용해준다.

 

이렇게 not-allowed 외 다른 스타일로 커스텀을 할 수있다.

 

▼ 예약하기 버튼 스타일링

 

 

▼ 반응형 제작

aspec 비율 32/9로 적용하고 포지션이나 크기높이는 부모에게 받아온다.