# 폼 요소 스타일링

| 속성 | 설명 | 옵션 |
|---|---|---|
| width, height | 입력 필드 크기 조절 | `width: 200px; height: 40px;` |
| padding | 내부 여백 조절 | `padding: 10px;` |
| border | 테두리 스타일 지정 | `border: 1px solid #ccc;` |
| border-radius | 입력 필드 모서리 둥글게 | `border-radius: 5px;` |
| outline| 포커스 시 외곽선 지정 | `outline: none;` |
| box-shadow | 입력 필드에 그림자 추가 | `box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);` |
| background-color | 입력 필드 배경색 변경 | `background-color: #f9f9f9;` |
| color | 텍스트 색상 변경 | `color: #333;` |
| font-size | 입력 필드 텍스트 크기 조절 | `font-size: 16px;` | 
| text-align | 텍스트 정렬 | `text-align: center;` |
| cursor | 마우스 커서 스타일 지정 | `cursor: pointer;` |
| resize | textarea 크기 조절 가능 여부 | `resize: none;` |
| appearance | 브라우저 기본 스타일 제거 | `appearance: none;` |

| 가상 클래스 | 설명 | 예시 |
|---|---|---|
| :focus | 요소가 포커스를 받았을 때 | `input:focus { border-color: blue; }` |
| :hover | 마우스를 올렸을 때 | `button:hover { background: red; }` | 
| :active | 클릭 중일 때 | `button:active { background: darkred; }` |
| :disabled | 비활성화된 요소 | `input:disabled { background: #eee; }` |
| :enabled | 활성화된 요소 | `input:enabled { background: white; }` |
| :required | 필수 입력 필드 | `input:required { border: 2px solid red; }` |
| :optional | 필수 입력이 아닌 필드 | `input:optional { border: 2px solid green; }` | 
| :checked | 체크된 체크박스/라디오 버튼 | `input:checked { accent-color: green; }` |
| :placeholder-shown | placeholder가 표시될 때 | `input:placeholder-shown { background: #f0f0f0; }` |
| :valid | 유효한 입력값일 때 | `input:valid { border: 2px solid green; }` |
| :invalid | 유효하지 않은 입력값일 때 | `input:invalid { border: 2px solid red; }` |
| :read-only | 읽기 전용 필드 | `input:read-only { background: lightgray; }` |

| 가상 요소 | 설명 | 예시 |
|---|---|---|
| ::placeholder | placeholder 텍스트 스타일링 | `input::placeholder { color: gray; }` |
| ::selection | 사용자가 선택한 텍스트 스타일 변경 | `input::selection { background: yellow; }` |

https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling

## outline
outline 속성은 요소의 테두리(윤곽선)를 강조하는 데 사용돼. border와 비슷하지만, 요소의 크기에 영향을 주지 않으며, 바깥쪽에 별도의 선을 추가하는 효과가 있어!
* border와 다르게 요소의 크기에 영향을 주지 않음
* 보통 포커스된 입력 필드나 접근성(Accessibility) 개선을 위해 사용됨
```css
.box {
  outline: 3px solid green;
  outline-offset: 5px;
}
```
### outline-width / outline-style / outline-color / outline-offset
outline은 기본적으로 요소 바로 바깥쪽에 위치하지만, outline-offset을 사용하면 윤곽선과 요소 사이의 간격을 조절할 수 있어.

## appearance
appearance 속성은 브라우저의 기본 UI 스타일을 제거하거나 변경하는 데 사용돼.
> 버튼, 입력 필드, 셀렉트 박스 등 기본 스타일이 적용된 요소를 커스텀할 때 유용!

* auto :	기본값 (브라우저 기본 스타일 유지)
* none :	기본 스타일 제거 (완전히 커스텀 가능)
* textfield :	입력 필드를 일반 텍스트 필드처럼 표시
* button :	버튼을 기본 버튼 스타일로 표시
* checkbox :	체크박스를 기본 체크박스 스타일로 표시
* radio :	라디오 버튼을 기본 스타일로 표시 

```css
input {
  appearance: none;
  border: 1px solid gray;
  padding: 10px;
  border-radius: 5px;
} /* 브라우저의 기본 입력 필드 스타일을 제거하고, 커스텀 디자인 적용 가능 */
```

## cursor
cursor 속성은 마우스를 올렸을 때 커서 모양을 변경하는 데 사용돼.
> 버튼, 링크, 드래그 가능한 요소 등에 적용 가능!

* default :	기본 커서 (화살표)
* pointer :	손가락 모양 (클릭 가능한 요소)
* text :	텍스트 입력 모드 (I자 모양)
* not-allowed :	사용 금지 (⛔)
* wait :	로딩 중 (⌛)
* progress :	진행 중 (⏳)
* move :	이동 가능 (↔️)
* grab / grabbing :	드래그 가능 (✊ → 🤲)
* crosshair :	십자선 (+)
* help :	도움말 (❓)
* none :	커서 숨기기

```css
button {
  cursor: pointer;
}
input {
  cursor: text;
}
.disabled {
  cursor: not-allowed;
}
```

## resize
resize 속성은 요소의 크기를 사용자가 조절할 수 있도록 설정하는 속성이야.
> textarea 같은 입력 필드의 크기를 조절 가능!
* none, both, horizontal, vertical
```css
textarea {
  resize: vertical;
} /* 텍스트 영역(textarea)의 세로 크기만 조절 가능하도록 설정! */
```

## 예시
### 텍스트 입력 필드
입력 필드가 포커스를 받으면 파란색 테두리와 그림자 효과 추가!
```css
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
input[type="text"]:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
```
### 버튼
버튼에 호버(마우스 오버) 시 색상이 변경됨
```css
button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
button:hover {
  background-color: #0056b3;
}
```
### 체크박스 & 라디오 버튼
accent-color 속성을 사용하면 체크박스와 라디오 버튼 색상을 쉽게 변경 가능!
```css
input[type="checkbox"], input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #007bff; /* 체크박스 & 라디오 버튼 색상 변경 */
}
```