transform, transition, animation을 복합적으로 활용한 예제폼 요소의 기능적인 측면 이해
폼 요소의 기본 스타일 특성 이해하기
폼 요소를 적절히 초기화하고 최초 스타일 재구축
폼 요소, 최소한의 접근성 확보하기
체크박스와 라디오버튼 커스텀
버튼 커스텀
◆ (day17/music)
■ transform, transition, animation 예제
▼ 아이콘 추가하여 하나로 합친 후 가운데 정렬
또는 left 50% right 50%
▼ transform을 사용하여 중앙 정렬 할 수 있다.
▼ 네거티브 마진을 사용하여 중앙 정렬 할 수 있다
▼ nth-child와 transform translate rotate를 적절히 사용하여 각 아이콘들의 위치를 조정해준다
▼ rotate로 인해 이미지가 틀어졌기 때문에 음수값으로 원래 rotate로 되돌려준다
▼ 애니메이션을 적용 해주기 위해 y축의 전역변수 설정해주고 transtion을 사용해준다.
▼ whell-item도 hover되는 현상을 막기위해 point event none을 사용해준다.
▼keyframe사용하여 애니메이션에 좀 더 유연하게 적용
▼ 아이콘도 같이 돌아가는걸 막기위해 item 하위에 이미지를 돌려준다.
▼ 기능이 잘 작동하는 것을 확인한다
▼ hover 되었을때 딜레이를 적용 할 수있다.
◆ (day17/meeting_room)
■ Form 폼
폼(Form)은 사용자가 웹 페이지에서 데이터를 입력하고 서버로 전송할 수 있도록 하는 인터페이스를 제공한다.
폼은 로그인, 회원가입, 검색 등의 작업을 수행할 때 사용되며, 다양한 입력 요소들을 포함할 수 있다.
▼ <form>
form 요소는 폼을 정의하는 데 사용한다.
이 요소는 사용자가 입력한 데이터를 서버로 전송하기 위한 컨테이너 역할을 한다.
▷ 주요 속성 (attribute)
◎ action: 폼 데이터를 제출할 때 데이터를 처리할 서버의 URL을 지정한다.
◎ method: 폼 데이터를 서버에 전송하는 방법을 지정한다. 보통 GET 또는 POST를 사용한다
1. GET: URL에 데이터를 붙여 서버에 전송한다 데이터를 URL에 표시하기 때문에 보안이 낮고,
소량의 데이터를 전송할 때 주로 사용한다.
2. POST: 데이터를 HTTP 메시지 본문에 담아 서버에 전송한다. 보안이 높고, 대용량 데이터를 전송할 때 사용한다.
<form action="/submit" method="get">
<!-- 입력 요소들 -->
</form>
▼ <fieldset>
fieldset요소는 폼 요소들을 그룹화하는 데 사용된다.
그룹화된 폼 요소들은 시각적으로 구분되며, 관련된 폼 요소들을 논리적으로 묶을 수 있다.
<form action="/submit" method="post">
<fieldset>
<legend>기본 회원정보</legend>
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="email">이메일주소:</label>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend>계정정보</legend>
<label for="username">회원 아이디:</label>
<input type="text" id="username" name="username" required>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit">회원가입</button>
</form>
▼ <legend>
legend요소는 fieldset의 첫 번째 자식으로, 폼 요소 그룹의 제목을 정의한다.
이 제목은 폼 요소 그룹의 의미를 명확하게 설명하는 데 유용하다.
▼ <input>
input요소는 사용자가 데이터를 입력할 수 있는 다양한 종류의 필드를 제공한다.
▷주요 속성 (attribute)
◎ type: 입력 필드의 종류를 지정한다.
1. text: 한 줄의 텍스트 입력 필드.
2. password: 비밀번호 입력 필드. 입력한 내용이 보이지 않음.
3. email: 이메일 주소 입력 필드.
4. number: 숫자 입력 필드.
5. checkbox: 체크박스.
6. radio: 라디오 버튼.
7. file: 파일 업로드 필드.
◎ name: 폼 데이터를 제출할 때 각 입력 요소의 이름을 지정
◎ value: 입력 필드의 기본 값을 설정
◎ placeholder: 입력 필드에 힌트를 표시
◎ required: 필수 입력 필드로 지정
◎ disabled: 해당 필드를 비활성화
◎ id: label요소의 for값과 연동 / label요소 클릭 시, 해당 input에 포커스가 잡힌다
◎ submit: 폼의 제출 버튼 / 최근에는 button요소가 주로 사용한다
<form action="/submit" method="post">
<label for="username">아이디:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Submit">
</form>
▼ <select>, <option>
select요소는 드롭다운 메뉴를 생성하는 데 사용하며 option요소는 드롭다운 메뉴의 선택지를 정의한다.
<label for="country">국가:</label>
<select id="country" name="country">
<option value="kr">대한민국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
</select>
▼ <label>
label요소는 입력 요소에 대한 설명(레이블)을 제공한다. 레이블을 클릭하면 관련된 입력 요소에 포커스가 이동하고
label요소의 for 속성은 관련된 입력 요소의 id와 연결되어야 하는데
<label> 태그 내부에 <input> 요소를 포함하는 방법도 있다.
이 방법은 특히 사용자 경험(UX) 측면에서 유용하며 레이블이 클릭될 때, 포함된 <input> 요소도 함께 활성화되기 때문에
라디오 버튼이나 체크박스와 같은 요소에서 매우 편리하다.
▼<input type="checkbox"> <input type="radio">
checkbox: 여러 개의 선택지를 중복 선택할 수 있는 입력 요소
radio: 동일한 그룹 내에서 하나의 선택지만 선택가능. name 속성이 동일한 라디오 버튼 그룹에서 하나의 값만 선택
<form action="/submit" method="post">
<label for="subscribe">밥 먹었니?</label>
<input type="checkbox" id="subscribe" name="subscribe"> 먹었습니다.
<label>직업은?</label>
<input type="radio" id="developer" name="job" value="developer">
<label for="developer">개발자</label>
<input type="radio" id="designer" name="job" value="designer">
<label for="designer">디자이너</label>
<button type="submit">전송</button>
</form>
▼ <button>
<button> 태그는 클릭 가능한 버튼을 정의한다. type 속성에 따라 버튼의 동작을 지정할 수 있다.
▷주요 type
submit: 폼 데이터를 제출 / 기본값이며 type값 생략시 사용한다.
reset: 폼의 입력 값을 초기화
button: 자바스크립트 등에서 사용하기 위해 버튼을 정의함 / 별도의 기본 동작이 없다.
▼ 폼의 시멘틱 마크업
폼을 설계할 때는 모든 사용자가 쉽게 이용할 수 있도록 접근성을 고려해야 한다.
이를 위해 <fieldset>, <legend>, <label>과 같은 시멘틱 요소를 적극적으로 활용하는 것이 중요하며
또한 관련 가상 클래스를 잘 활용해야 한다.
◎ 그룹화: 관련된 필드들을 <fieldset>으로 그룹화하여 폼의 논리적인 구조를 명확히 한다.
◎ 명확한 레이블: 모든 입력 요소에 대한 명확한 레이블을 제공하여 사용자가 각 필드의 목적을 이해할 수 있도록 한다.
◎ 포커스의 명확성: 사용자가 현재 어느 필드를 입력중인지, 입력 가능한 상태인지 명확하게 전달한다.
◎ 입력 도움말: placeholder, title 등의 속성을 사용하여 추가적인 설명을 제공한다.
◎ 입력 내용 검증: 입력된 내용을 한차례 검증하여 사용자가 올바른 데이터를 입력 할 수 있도록 추가적인 설명을 제공한다.
▼ 폼의 스타일링
폼은 사용자의 입력을 받기 위해 기본 HTML단에서 제공하는 기능이 매우 많이 있다.
그러한 이유로 브라우저가 기본으로 제공하는 스타일이 상대적으로 많은 편이며니
이에 폼 요소 초기화가 선행 되어야 안정적인 스타일링 작업이 될 수 있다.
▼ div요소의 사용
<form action="/submit" method="post">
<div class="form-group">
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">전송</button>
</form>
<div> 태그는 범용적인 블록 요소로, 폼에서 특정 입력 요소들을 그룹화하거나 스타일링할 때 사용한다.
대부분의 폼 요소가 인라인 레벨 요소임으로 폼 요소의 레이아웃 관리에 어려움을 많이 겪는다.
fieldset요소와 달리 시멘틱한 의미를 가지지 않지만,
시각적인 레이아웃을 관리할 때 필수적으로 사용된다. (시각적인 목적으로만 사용)
▼ 폼 구성하기
▼ name라벨에 벨류값을 미리 지정할 수있다.
▼ checked, disabled, readonly
checked - 체크박스는 다중선택 가능
disabled - 해당 필드를 아예 비활성화 시킴
readonly - 값으로서 의미가 있지만, 사용자가 수정을 직접적으로 못하게 막는것
▼ fieldset을 사용하여 그룹화
■ 폼 요소 초기화
input, button과 같은 폼 요소는 사용자와의 상호작용을 처리해야 하므로,
별도의 레이아웃 기법과 렌더링 개념이 적용된다.
사용자 에이전트 스타일시트는 이러한 폼 요소들이 기본적인 스타일과 동작을
일관되게 가지도록 정의하기 위해 상대적으로 더 많은 양의 기본 스타일 규칙이 적용되어 있다.
사용자 에이전트 스타일시트에 작성된 내용은 unset을 이용하여 비교적 간편하게 초기화를 진행할 수 있다.
input[type="text"] {
all: unset; /* input text요소의 모든 속성을 선택하여 unset 시도 */
}
all 속성은 모든 CSS 속성을 한 번에 다루는 기법이다.
즉, input[type="text"] 요소에 지정된 모든 속성을 unset으로 초기화한 것이다.
이는 input[type="text"]요소에 적용된 모든 스타일을 초기값 (initial) 또는 상속(inherit)으로 되돌린다.
input[type="text"] 요소에는 사용자 상호작용을 위한
다양한 사용자 에이전트 스타일시트가 기본적으로 적용되어 있다.
all: unset을 사용하면 이러한 스타일을 모두 초기화하게 되므로, 일부 필수 기능까지 제거될 수 있다,
따라서 all: unset을 적용한 후에는 input[type="text"] 요소의 기본 기능과 사용성을 유지하기 위해
필수적인 스타일을 반드시 추가 정의해야 한다.
이렇게 함으로써 불필요한 스타일은 제거하면서도 입력 필드의 핵심 기능과 사용자 경험을 보장할 수 있다.
input[type="text"] {
all: unset; /* input text요소의 모든 속성을 선택하여 unset 시도 */
display: block;
width: 100%;
box-sizing: border-box;
padding: 0 20px;
line-height: 1;
height: 32px;
border: 1px solid #999;
}
이 접근 방식은 단순한 CSS 초기화를 넘어서 구체적인 디자인 요소를 포함하고 있다.
일견 CSS 초기화의 본래 취지와 거리가 있어 보일 수 있으나,
input 요소가 웹사이트 전반에 걸쳐 일관된 형태로 사용된다는 점을 고려하면,
이러한 스타일 정의는 실용적인 관점에서 CSS 초기화의 확장된 형태로 볼 수 있다.
이는 기본적인 초기화와 함께 사용성과 디자인의 일관성을 동시에 확보하는 방법이 된다.
위 코드는 input요소가 가져야 할 최소한의 스타일 추가 정의일 뿐이며
실무적으로는 접근성을 위해 반드시 추가되어야 하는 요소들이 많이 있다.
▼ 각 마크업들을 구분하고 스타일링하기위해 div로 묶어놓고 초기화 작업 진행
fieldset{
all: unset;
}▲ all:unset을 적용해주면 전체 초기화 가능하다.
(초기화 unset은부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용한다.)
▼ 하지만 모든 속성을 전체 초기화다보니 필요한 속성들이 있음에도, 초기화 할 필요없는 것도 다 없애버린다.
즉 사용자 에이전트에 관심을 가져야한다.
display 기본값은 inline이기 때문에 다시 block 속성으로 바꿔줘야 한다.
fieldset{
all: unset;
display: block;
}
▼ 버튼도 all: unset을 통해 초기화한다
기본으로 제공하는 웹 접근성관련 주요 기능들의 시각적 특성이 사라져있는 것을 볼 수있다.
하지만 html 요소 고유의 기능 submit 또는 focus 기능 자체는 유지 되어있다.
button{
all: unset;
display: block;
}
▼ select와 input도 초기화한다
둘은 공공UI이다. 반복해서 쓰이는게 기본값이다.
그래서 초기화부터 진행하고 바로 뒤이어 디자인 평준화를 진행한다.
참고로 width auto는 컨테이닝 블록 기준으로 가득차지 않기에 억지로 100% 적용해줘야한다
▼ 주요 속성에 소개 되어있는 것처럼 여러 속성들을 이러한 방법으로 추가하여 스타일을 지정 할 수있다.
