153 lines
5.8 KiB
Markdown
153 lines
5.8 KiB
Markdown
# 폼 요소 스타일링
|
|
|
|
| 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| 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; /* 체크박스 & 라디오 버튼 색상 변경 */
|
|
}
|
|
``` |