폼 요소 스타일링

속성	설명	옵션
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) 개선을 위해 사용됨

.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 : 라디오 버튼을 기본 스타일로 표시

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 : 커서 숨기기

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

resize

resize 속성은 요소의 크기를 사용자가 조절할 수 있도록 설정하는 속성이야.

textarea 같은 입력 필드의 크기를 조절 가능!

none, both, horizontal, vertical

textarea {
  resize: vertical;
} /* 텍스트 영역(textarea)의 세로 크기만 조절 가능하도록 설정! */

예시

텍스트 입력 필드

입력 필드가 포커스를 받으면 파란색 테두리와 그림자 효과 추가!

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);
}

버튼

버튼에 호버(마우스 오버) 시 색상이 변경됨

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 속성을 사용하면 체크박스와 라디오 버튼 색상을 쉽게 변경 가능!

input[type="checkbox"], input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #007bff; /* 체크박스 & 라디오 버튼 색상 변경 */
}

5.8 KiB Raw Blame History