CSS로 공통 폼 요소 스타일링하는 방법

저자는 프로그램의 일환으로 기부금을 받을 다양성 기술 기금(Diversity in Tech Fund)을 선택했습니다.

소개

웹 폼은 웹사이트 디자인의 일반적인 요소로, 검색 폼 필드에서부터 연락처 폼 및 복잡한 데이터 필터링까지 다양합니다. 이러한 요소들을 CSS를 사용하여 스타일링하고 작업하는 방법을 알면 이러한 일상적인 문제에 대해 더 나은 해결책을 제공할 수 있으며, 웹사이트 사용자의 경험을 향상시킬 수 있습니다.

이 자습서에서는 사용자로부터 다양한 데이터를 요청하는 웹 폼의 생성 및 스타일링을 다룹니다. 이 폼은 텍스트 필드, 라디오 버튼, 체크박스, 드롭다운 선택, 텍스트 영역, 제출 및 재설정 버튼을 사용할 것입니다. 이 폼과 그 요소들을 생성하고 스타일링하는 방법은 appearance 속성을 사용하여 스타일을 재설정하고, 폼에 일관된 스타일을 설정하고, 텍스트 필드에 플레이스홀더 답변을 추가하고, 라디오 버튼 및 체크박스를 다양한 가상 클래스와 가상 요소로 사용자 정의하는 것입니다.

필수 사항

CSS를 사용하여 HTML 요소를 찾고 스타일을 적용하는 고급 선택기를 사용한 경험. 이에 대한 자세한 내용은 CSS에서 ID, 클래스 및 속성 선택기를 사용하여 HTML 요소 선택하기 자습서를 참조하십시오.
CSS 박스 모델에 대한 지식은 CSS에서 상자 모델 사용하기 자습서에서 찾을 수 있습니다.
CSS의 가상 클래스에 익숙함. 소개는 CSS에서 상태 가상 클래스와 링크 및 버튼 사용하기를 확인하십시오.
로컬 머신에 index.html로 저장된 빈 HTML 파일. 텍스트 편집기 및 웹 브라우저에서 액세스할 수 있습니다. 시작하려면 HTML 프로젝트 설정하기 자습서를 참조하고 HTML을 브라우저에서 볼 수 있는지 확인하려면 HTML 요소 사용하기와 이해하기를 따르십시오. HTML에 익숙하지 않은 경우 HTML 웹사이트 만들기 시리즈 전체를 시도해보세요.

기본 HTML 및 CSS 설정

이 첫 번째 섹션에서는 튜토리얼의 나머지 부분에서 작업할 HTML 및 초기 스타일을 설정합니다. 이 HTML은 페이지의 골조를 설정하고 나중에 스타일을 지정할 양식 필드를 생성합니다.

먼저 편집기에서 index.html 파일을 엽니다. 그런 다음 다음 HTML을 추가하여 파일에 기본 구조를 제공합니다:

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

<head> 요소에 포함된 요소는 <title> 요소로 페이지의 이름을 정의하고 <link> 요소를 통해 스타일 시트를 로드할 위치를 정의합니다. <meta> 태그는 문자 인코딩을 정의하고 브라우저에 작은 화면 장치에서 사이트를 표시하는 방법을 지시합니다. 주요 양식 내용은 <body> 및 <main> 태그 내에 있습니다.

다음으로, <main> 요소 내부에 <form> 요소를 만듭니다. <form> 내부에는 다양한 양식 요소와 레이아웃을 지원하는 <div> 요소를 추가합니다. 이 튜토리얼에서는 이전 단계의 코드에 추가 사항을 강조했습니다. 다음 코드 블록에서 강조된 HTML을 index.html 파일에 추가합니다:

index.html

...
<main>
  <form>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" />
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" type="email" />
    </div>
    <div>
      <label for="comp">Favorite CSS Compiler</label>
      <select id="comp">
        <option value="sass">Sass</option>
        <option value="less">Less</option>
        <option value="stylus">Stylus</option>
        <option value="postcss">PostCSS</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div>
      <fieldset>
        <legend>Are you familiar with CSS Grid?</legend>
        <input type="radio" name="grid" id="yes" value="yes" />
        <label for="yes">Yes</label>
        <input type="radio" name="grid" id="no" value="no" />
        <label for="no">No</label>
      </fieldset>
    </div>
    <div class="full-width">
      <label for="message">Message</label>
      <textarea id="message"></textarea>
    </div>
    <div class="full-width">
      <input type="checkbox" id="newsletter" />
      <label for="newsletter">Receive our newsletter?</label>
    </div>
    <div class="full-width">
      <button type="submit">Send Response</button>
      <button type="reset">Clear Form</button>
    </div>
  </form>
</main>
...

HTML 양식 구조는 올바르게 작동하려면 서로 연결된 속성 값으로 이루어져 있어야 합니다. 이 코드는 사용자에게 이름과 이메일을 요청하는 양식을 생성하고, 사용자가 좋아하는 CSS 컴파일러를 묻고 CSS 그리드를 알고 있는지 물으면 사용자가 작성한 메시지를 위한 필드를 제공하며, 사용자를 뉴스레터에 가입할 수 있는 확인란이 있습니다. HTML에서 양식 구조를 구성하는 방법에 대해 자세히 알아보려면 웹 폼 구조에 관한 Mozilla 웹 문서 페이지를 참조하십시오.

변경 사항을 index.html에 저장한 후, 동일한 디렉토리에 styles.css라는 새 파일을 만드십시오.

텍스트 편집기에서 styles.css를 엽니다. 이 파일은 브라우저가 index.html의 내용에 적용할 스타일을 제공합니다. styles.css 파일에 다음 CSS 코드를 추가하십시오:

styles.css

body {
  margin: 0;
  background-color: hsl(0, 0%, 98%);
  color: #333;
  font: 100% / normal sans-serif;
}

main {
  margin: 0 auto;
  padding: 4rem 0;
  width: 90%;
  max-width: 60rem;
}

form {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 1rem;
  background-color: hsl(0, 0%, 100%);
  border: 4px solid hsl(0, 0%, 90%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.full-width {
  grid-column: span 2;
}

body와 main 요소 선택기는 전체 페이지에 대한 초기 텍스트 스타일링과 레이아웃을 생성합니다. form 요소 선택기는 전체 양식 컨테이너에 대한 스타일을 생성하고, grid-template-columns: 1fr 1fr;와 같이 두 개의 동일한 크기의 열로 구성된 CSS 그리드를 정의합니다. 그런 다음 gap: 2rem은 그리드 내 각 행과 열 사이의 간격을 2rem으로 제공합니다. 마지막으로, .full-width 클래스 선택기는 이 클래스를 가진 컨테이너가 두 열 사이에 확장되어 한 열에 남지 않도록 합니다.

styles.css에 변경 사항을 저장하세요. 그런 다음 웹 브라우저를 선택하세요. 브라우저에서 파일 메뉴 항목을 선택한 다음 열기 옵션을 선택하세요. 다음으로 프로젝트 폴더로 이동하고 브라우저에서 index.html 파일을 로드하세요. 다음 이미지는 페이지가 브라우저에서 렌더링될 것을 보여줍니다:

양식은 흰색 상자에 연한 회색 배경으로 표시됩니다. 각 양식 요소는 그리드 전체에 분산되어 상위 네 항목이 두 열 사이를 번갈아가며 나열되고 마지막 세 항목이 두 열에 걸쳐 쌓입니다. 양식 요소의 기본 스타일은 Firefox에서 표시된 것과 같습니다. 각 브라우저마다 양식 요소의 기본 스타일이 다릅니다.

이 섹션에서는 양식 요소와 관련된 초기 HTML 및 CSS를 설정했습니다. 또한 각 브라우저가 이러한 요소의 스타일링을 다르게 처리하는 방법을 배웠습니다. 다음 섹션에서는 모든 브라우저에서 양식 요소의 스타일을 동일하게 만들기 위해 appearance 속성을 사용할 것입니다.

`appearance` 속성을 사용하여 양식 스타일 재설정

모든 브라우저는 폼 요소의 시각적 스타일링을 다르게 처리합니다. 이러한 요소의 스타일링은 종종 CSS의 초기 기능을 넘어서 운영 체제나 브라우저의 디자인 언어를 따릅니다. 모든 브라우저에 일관된 스타일링을 생성하기 위해 이 섹션에서는 appearance 속성 및 다른 속성을 사용하여 기본 브라우저 스타일을 제거합니다.

시작하려면 텍스트 편집기에서 styles.css를 엽니다. button, fieldset, input, legend, select, 및 textarea로 구성된 새 그룹 선택기를 만듭니다. 그런 다음 선택기 블록 내에 appearance 속성을 none으로 설정하여 다음 코드 블록에서 강조된 대로 추가합니다:

styles.css

...
button,
fieldset,
input,
legend,
select,
textarea {
  appearance: none;
}

appearance 속성은 폼 요소의 특별한 스타일링을 제거하는 의도된 방법입니다. 그러나 이 속성의 연령 및 구현으로 인해 대부분의 브라우저는 여전히 속성 이름에 벤더 접두사가 필요합니다. 벤더 접두사는 특정 브라우저를 식별하기 위한 식별자로 속성 이름 앞에 추가되는 특수한 코드 추가입니다. Chrome, Safari, 및 최신 버전의 Edge와 Opera에 대해 해당 접두사는 -webkit-입니다. Firefox는 -moz- 접두사를 사용합니다.

벤더 접두사를 사용할 때는 속성의 벤더 접두사 버전을 먼저 넣고, 접두사 없는 버전으로 마무리하는 것이 중요합니다. 이렇게 하면 접두사만 지원하는 이전 브라우저는 접두사를 사용하지만, 접두사와 접두사 없는 버전을 모두 지원하는 새로운 브라우저는 접두사 없는 표준 버전을 사용합니다. 다음 코드 블록에 있는 appearance 속성에 하이라이트를 추가하세요:

styles.css

legend,
fieldset,
select,
textarea,
input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

변경 사항을 styles.css에 저장한 다음 브라우저에서 index.html을 엽니다. appearance 속성은 장식 스타일을 제거하고 더 간단한 스타일로 변경되었습니다. 다음 이미지에서 렌더링된 것처럼:

appearance 속성은 브라우저별 스타일을 변경할 수 있습니다. appearance: none 속성 값이 가장 큰 변경을 만들었습니다. 라디오 버튼과 확인란을 완전히 제거했습니다. 나머지 폼 요소에 대해서는 기본 스타일을 완전히 제거하기 위해 몇 가지 속성이 필요합니다. 다음 코드 블록에 하이라이트된 CSS 속성은 기본 스타일을 제거하기 위해 필요한 스타일을 추가합니다:

styles.css

...
button,
fieldset,
input,
legend,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

이 CSS는 배경 색상을 제거하고 상자 모델의 매개변수를 재설정합니다. 이러한 스타일이 모든 요소에 필요한 것은 아니지만, 이러한 리셋 스타일을 모든 요소에 대해 그룹화하는 것이 허용됩니다.

styles.css에 변경 사항을 저장한 다음 브라우저에서 index.html을 새로 고칩니다. 폼 요소가 페이지에서 시각적으로 사라졌습니다. 다음 이미지에서 보여지는 대로:

이 섹션에서는 외관과 추가 속성을 사용하여 폼 요소의 기본 스타일을 완전히 제거했습니다. 또한 미래 브라우저 버전에 대비하여 속성을 적절한 순서로 적용하기 위해 공급 업체 접두사를 사용했습니다. 다음 섹션에서는 폼 필드의 시각적 스타일링을 사용자 정의하기 시작합니다.

폼 필드 간 일관된 스타일 설정

기본 브라우저 스타일이 완전히 제거되었으므로 모든 폼 요소에 일관된 사용자 정의 미학을 적용할 것입니다. 이는 특정 폼 특성을 대상으로하는 여러 그룹 선택기를 만들어 해당 스타일을 적용하는 것을 포함합니다.

시작하려면 텍스트 편집기에서 styles.css를 엽니다. 그런 다음, input, select 및 textarea로 구성된 그룹 선택기를 만듭니다. 다음 코드 블록에서 강조된 스타일을 추가하십시오:

styles.css

...
legend,
fieldset,
select,
textarea,
input,
button {
  ...
}

input,
select,
textarea {
  border: 2px solid #333;
  background-color: white;
  border-radius: 0.25rem;
}

이 스타일은 각 데이터 입력 요소 주위에 2px 어두운 회색 테두리를 추가하고 흰색 배경과 둥근 모서리를 제공합니다.

다음으로, 텍스트를 포함하는 데이터 입력 요소에 대한 스타일을 적용합니다. 속성 선택기를 사용하여 type 속성 값에 따라 대상으로하는 input 요소를 지정합니다. 다음 코드 블록에서 강조된 CSS는 필요한 요소에 대한 스타일을 제공합니다:

styles.css

...
input,
textarea,
select {
  ...
}

input[type="text"],
input[type="email"],
select,
textarea {
  font: 1.25rem / 1.5 sans-serif;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
}

이러한 스타일은 모든 요소에 일관된 글꼴 크기와 패밀리를 적용합니다. 예를 들어, <textarea> 요소는 body 요소로부터 글꼴 설정을 상속하지 않습니다. display, box-sizing, width, 및 padding 속성들은 각 데이터 입력 요소에 대해 일관된 레이아웃과 구조를 제공합니다.

styles.css에 변경 사항을 저장한 다음 웹 브라우저에서 index.html을 엽니다. 다음 이미지에 표시된대로, 이제 필드 주위에 더 두꺼운 짙은 회색 테두리가 있으며 <select> 요소의 텍스트는 이제 훨씬 큽니다:

다음으로, 이미 작성한 넓은 스타일링에 추가로 몇 가지 특별한 스타일링이 필요한 두 개의 요소가 있습니다. 첫 번째는 textarea에 더 많은 높이를 부여하는 것이고, 두 번째는 <select> 요소에 사용자 정의 드롭다운 화살표를 적용하는 것입니다.

styles.css로 돌아가서 textarea 요소 선택기를 추가합니다. 선택기 블록 내부에 min-height 속성을 만들고 값을 10rem으로 설정합니다. 이렇게하면 양식 사용자가 텍스트를 입력할 수 있는 초기 영역이 더 커집니다. 다음 코드 블록에서 강조된 CSS는 이렇게 작성되는 방법을 보여줍니다:

styles.css

...
input[type="text"],
input[type="email"],
select,
textarea {
  ...
}

textarea {
  min-height: 10rem;
}

textarea의 스타일을 추가한 후에 해야 할 다음 작업은 image 디렉토리를 만드는 것입니다. 이것은 다음을 실행하여 index.html 및 styles.css 파일과 동일한 디렉토리 내에서 명령 프롬프트에서 수행할 수 있습니다:

mkdir images

다음 curl 명령을 실행하여 작업할 첫 번째 이미지를 새로운 images 디렉토리로 다운로드합니다:

curl -sL https://assets.digitalocean.com/articles/68129/down-arrow.svg -o images/down-arrow.svg

다운로드한 이미지는 SVG로, 도형을 그리기 위한 HTML과 유사한 마크업 언어입니다.

이 새 이미지를 <select> 요소에 추가하려면 styles.css로 돌아가십시오. 그런 다음, select 요소 선택기를 만들고 다음 코드 블록에서 강조된 값으로 background 속성을 추가하십시오:

styles.css

...
textarea {
  min-height: 10rem;
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}

이 background 속성은 이미지를 <select> 요소의 배경으로 로드하고 이미지를 반복하지 않습니다. 그런 다음 center로 이미지를 수직으로 가운데 정렬하고 right 0.75rem으로 오른쪽에서 이미지를 오프셋합니다.

styles.css에 대한 변경 사항을 저장한 다음 브라우저로 돌아가 페이지를 새로 고칩니다. <textarea>는 이제 원래 높이의 두 배입니다. <select> 요소에는 오른쪽에 파란색 화살표가 있습니다. 다음 이미지는 브라우저에서 이를 어떻게 렌더링하는지 보여줍니다:

이 섹션에서는 폼 데이터 입력 요소의 사용자 정의적인 미학을 만들었습니다. 또한 <select> 요소에 기본 화살표를 대체하는 배경을 만들었습니다. 다음 섹션에서는 사용자 정의 라디오 버튼과 체크박스를 만들고 선택된 상태가 되었을 때 적용합니다.

체크된 가상 클래스로 라디오 버튼 및 확인란 사용자 정의하기

이제 폼의 기본적인 미학을 만들었으니, 그 시각적 스타일을 라디오 버튼과 확인란의 대화형 input 항목에 적용할 시간입니다.

styles.css 파일을 텍스트 편집기에서 열어주세요. type 속성이 radio 또는 checkbox인 input 요소를 동일한 높이와 너비 값으로 변경할 것입니다. 그런 다음, 라디오 버튼을 원형으로 바꿀 것입니다. 다음 코드 블록의 강조된 부분은 이러한 형식이 어떻게 되는지를 보여줍니다:

styles.css

...
select {
  ...
}

input[type="radio"],
input[type="checkbox"] {
  height: 1.5em;
  width: 1.5em;
  vertical-align: middle;
}

input[type="radio"] {
  border-radius: 50%;
}

vertical-align 속성은 인라인 텍스트 항목을 정렬하는 데 사용됩니다. 이를 middle로 설정하면 입력 필드가 텍스트 정렬 중간에 위치합니다. 그런 다음, height와 width가 동일하기 때문에 border-radius 속성이 50%로 설정된 라디오 입력은 원을 만듭니다.

styles.css에 대한 변경 사항을 저장한 다음 브라우저에서 index.html을 엽니다. 이제 두 개의 라디오 버튼과 확인란이 다음 이미지처럼 더 크고 눈에 띄게 렌더링됩니다:

라디오 버튼이나 체크 박스와 상호 작용하면 아무것도 보이지 않습니다. appearance 속성은 이러한 유형의 입력에 대한 선택된 표시기도 제거합니다. 다음으로 선택된 입력 항목에 스타일을 적용하기 위해 :checked 가상 클래스 선택기를 사용할 것입니다.

styles.css로 돌아가서 :checked 의사 클래스가 있는 라디오 버튼 입력에 대한 새로운 선택기를 만듭니다. 그런 다음 선택기 블록 내부에 선택된 라디오 버튼에 채워진 스타일이 적용될 수 있도록 radial-gradient를 사용한 background-image를 추가합니다. 다음 코드 블록에서 강조된 CSS는 이렇게 포맷되어 있습니다:

styles.css

...
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-image: radial-gradient(
    hsl(213, 73%, 50%) 40%,
    transparent calc(40% + 1px)
  );
}

calc() 함수를 사용하면 transparent 속성을 색상 값 후 1px로 설정할 수 있어 입력 필드 내부에 솔리드 블루 원이 생성됩니다.

styles.css에 변경 사항을 저장하고 브라우저에서 index.html로 돌아갑니다. 이제 라디오 버튼에는 입력 내부에 흰색으로 둘러싸인 솔리드 블루 원이 있습니다. 다음 이미지는 선택된 예 라디오 버튼을 보여줍니다:

다음으로, 체크 박스는 <select> 드롭다운의 화살표와 유사하게 :checked 상태를 나타내기 위해 배경 이미지를 사용할 것입니다.

curl 명령을 실행하여 확인 표시 이미지를 images 디렉토리로 다운로드합니다:

curl -sL https://assets.digitalocean.com/articles/68129/check.svg -o images/check.svg

이미지를 다운로드하고 사용할 준비가 되었으므로 텍스트 편집기에서 styles.css로 돌아갑니다.

다음으로, input[type="checkbox"] 선택기에 :checked 가상 클래스를 추가합니다. 선택기 블록에 background 속성을 추가하여 check.svg 이미지를 로드하고 상자에 맞게 축소합니다. 다음 코드 블록의 강조된 CSS는 이렇게 작성됩니다:

stlyes.css

...
input[type="radio"]:checked {
  ...
}

input[type="checkbox"]:checked {
  background: url('images/check.svg') no-repeat center / 75% auto;
}

background 속성 값은 체크 마크 이미지가 컨테이너에 가운데 정렬되고 반복되지 않으며 비율을 유지한 채로 75%로 축소됨을 보장합니다.

변경 사항을 styles.css에 저장한 다음 브라우저에서 페이지를 새로 고칩니다. 이제 우리의 뉴스레터 받기 확인란을 선택하면, 다음 이미지에 설명된대로 상자 안에 체크 마크가 나타납니다:

이 섹션에서는 사용자 정의 라디오 버튼과 입력 필드를 생성하고 :checked 가상 클래스를 사용하여 선택된 상태에 맞게 조정했습니다. 다음 섹션에서는 페이지의 <label> 및 <legend> 요소를 스타일링합니다.

레이블 및 범례에 특별한 스타일 추가

다음으로, 폼의 <label> 및 <legend> 요소를 스타일링합니다. 사용할 두 가지 다른 스타일은 라디오 버튼과 확인란을 위한 작은 라벨 스타일과 나머지 요소를 위한 큰 라벨 스타일입니다.

텍스트 편집기에서 index.html을 엽니다. 다음 코드 블록에서 각 <label>과 <legend>에 large-label 또는 small-label 값의 class 속성을 추가하십시오:

index.html

...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" />
  </div>
  <div>
    <label for="comp" class="large-label">Favorite CSS Compiler</label>
    ...
  </div>
  <div>
    <fieldset>
      <legend class="large-label">Are you familiar with CSS Grid?</legend>
      <input type="radio" name="grid" id="yes" value="yes" />
      <label for="yes" class="small-label">Yes</label>
      <input type="radio" name="grid" id="no" value="no" />
      <label for="no" class="small-label">No</label>
    </fieldset>
  </div>
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message"></textarea>
  </div>
  <div class="full-width">
    <input type="checkbox" id="newsletter" />
    <label for="newsletter" class="small-label">Receive our newsletter?</label>
  </div>
  ...
</form>
...

이러한 추가 사항을 index.html에 저장한 다음 텍스트 편집기에서 styles.css를 엽니다.

styles.css에서 .large-label 클래스 선택기를 추가하고 다음과 같이 강조된 속성을 추가하십시오:

styles.css

...
.full-width {
  grid-column: span 2;
}

.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}
...

이 스타일은 large-label 요소를 크고 볼드체로 설정하며 글꼴 크기를 1.5rem(24px와 동일)로 설정합니다. 그런 다음 margin-bottom 속성을 사용하여 라벨과 해당 친구들 사이에 일정한 공간을 제공합니다.

이 변경 사항을 styles.css에 저장한 다음 웹 브라우저에서 index.html을 엽니다. 데이터 입력 필드 위의 라벨 텍스트는 크고 볼드체로 렌더링됩니다. 다음 이미지에 표시된 것과 같습니다:

styles.css로 돌아가서 .small-label에 대한 또 다른 클래스 선택기를 만듭니다. 이 라벨은 라디오 버튼 또는 체크박스 오른쪽에 있으므로 .large-label과는 다른 간격 및 크기 스타일이 필요합니다. 다음 코드 블록에서 styles.css에 강조된 CSS를 추가하십시오:

styles.css

...
.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}

.small-label {
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.25rem;
  margin-right: 1.5rem;
  font: 1.25rem sans-serif;
}
...

vertical-align: middle는 텍스트를 약간 오프셋합니다. 글꼴 크기는 1.25rem(20px와 동일)로 설정되며 선호하는 글꼴로 설정됩니다. 왼쪽 및 오른쪽의 margin 속성은 입력 필드와 라벨 사이의 공간을 제공합니다.

에 대한 업데이트를 저장하고 브라우저에서 을 새로 고치십시오. 라디오 버튼과 확인란 옆의 레이블이 더 크고 더 많은 간격을 제공합니다. 다음 이미지에 렌더링된 것처럼:

이 섹션에서는 입력 값과의 관계에 따라 두 가지 다른 유형의 레이블에 대한 스타일을 만들었습니다. 레이블이 지금은 강조되어 양식 전체에서 쉽게 읽을 수 있고 탐색할 수 있습니다. 다음 섹션에서는 placeholder 속성을 사용하여 예제 데이터 형식을 제공합니다.

`::placeholder` 가상 요소를 사용하여 자리 표시자 콘텐츠 제공

또는 요소의 자리 표시자 콘텐츠는 양식 사용자에게 어떤 종류의 정보가 요청되고 어떻게 형식화해야 하는지 시각적으로 보여줍니다. <code>placeholder</code> 속성은 HTML에 추가되어 그 값을 설명합니다. 그런 다음 <code>::placeholder</code> 가상 요소를 사용하여 텍스트의 모양을 사용자 정의할 수 있습니다.

플레이스홀더 콘텐츠를 만들기 시작하려면 텍스트 편집기에서 index.html을 엽니다. 이름 텍스트 <input />, 이메일 <input />, 그리고 <textarea> 요소에 placeholder 속성을 추가합니다. 다음 코드 블록에서 강조된 HTML은 placeholder를 추가할 위치와 사용할 값을 나타냅니다:

index.html

...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" placeholder="First or Full Name" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" placeholder="[email protected]" />
  </div>
  ...
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message" placeholder="Leave a message…"></textarea>
  </div>
  ...
</form>
...

index.html에서 변경 사항을 저장한 다음 웹 브라우저에서 페이지를 엽니다. 이제 이 세 개의 텍스트 입력 영역에는 내용이 들어 있습니다. 이 텍스트 입력 필드를 선택하고 내용을 추가하면 브라우저가 플레이스홀더 텍스트를 제거합니다. 다음 이미지는 브라우저에서 기본 플레이스홀더 스타일이 어떻게 나타나는지 보여줍니다:

placeholder를 스타일링하려면 텍스트 편집기에서 styles.css를 엽니다. input::placeholder와 textarea::placeholder를 위한 그룹 선택기를 추가합니다. 가상 요소와 가상 클래스를 구별하기 위해 선택기와 가상 요소 사이에 이중 콜론을 사용하는 것이 중요합니다. 다음 코드 블록에서 강조된 CSS는 이렇게 작성됩니다:

styles.css

...
textarea {
  min-height: 10rem;
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* Firefox */
  color: hsl(213, 73%, 50%);
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}
...

주의할 점은 Firefox에서 완전한 색상 값을 얻으려면 opacity 값을 1로 설정해야 한다는 것입니다. 그렇지 않으면 Firefox가 opacity를 줄여 텍스트 색상을 어둡게 만들고 색상 값에 따라 접근 가능한 색상 대비 문제가 발생합니다. 이것은 Firefox 전용 상황이므로 opacity 속성의 목적을 설명하는 주석이 있습니다.

styles.css를 저장하고 브라우저로 돌아가서 index.html을 새로 고칩니다. 플레이스홀더 텍스트는 이제 드롭다운 화살표 및 라디오 버튼 및 확인란의 선택된 상태에 사용된 파란색과 동일합니다. 다음 이미지는 브라우저가 placeholder 콘텐츠를 렌더링하는 방식을 보여줍니다:

이 섹션에서는 텍스트 입력 필드에 placeholder 콘텐츠를 생성하고 ::placeholder 의사 요소를 사용하여 스타일을 지정했습니다. 다음 섹션에서는 폼 <button> 요소에 대해 사용자 정의 스타일을 생성할 것입니다.

대화형 버튼 스타일 생성

웹 폼에서 <button> 요소는 종종 폼을 제출하거나 재설정하는 데 사용됩니다. index.html에는 submit 유형과 reset 유형을 가진 두 개의 버튼이 있습니다. 두 버튼 모두 기능적으로 유용하지만 반대 작업을 수행합니다. submit 버튼은 폼을 프로세서로 보내고, reset 버튼은 폼에서 입력된 모든 데이터를 지웁니다. 이러한 다른 작업으로 인해 <button> 요소도 시각적으로 다르게 보여야 합니다.

시작하려면 텍스트 편집기에서 styles.css를 열고 button 요소 선택기를 만듭니다. 이 선택기 블록에는 다음 코드 블록에서 강조된 대로 submit 및 reset <button> 요소 사이에서 공유되는 스타일을 추가합니다:

styles.css

...
input[type="checkbox"]:checked {
  background: url("images/check.svg") no-repeat center / 75% auto;
}

button {
  font: 1.25rem sans-serif;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0.75rem 1.25rem;
}

font는 두 버튼 모두 동일한 글꼴 스타일과 크기로 설정합니다. 그런 다음 border-radius는 두 버튼에 모두 둥근 모서리를 추가합니다. cursor 속성은 커서 스타일을 손 형식 포인터로 변경합니다. 마지막으로 padding 속성은 버튼 내부의 공간을 정의합니다.

styles.css에 변경 사항을 저장한 다음 웹 브라우저에서 index.html을 엽니다. 버튼 내의 텍스트가 커지고 패딩으로 인해 텍스트 사이의 간격이 시각적으로 증가합니다. 다음 이미지는 브라우저에서 버튼이 렌더링되는 방식을 보여줍니다:

그런 다음 styles.css로 돌아가 각 버튼 type에 대한 스타일을 추가하십시오. 각각을 대상으로 하는 속성 선택기를 사용하여 submit 버튼에는 파란색 background-color와 white 텍스트 색상을 추가합니다. reset 버튼은 링크와 같은 밑줄과 버튼 사이의 더 많은 공간을 추가하기 위해 margin을 얻습니다. 다음 코드 블록에서 강조된 CSS를 styles.css 파일에 추가하십시오:

styles.css

...
button {
  ...
}

button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

styles.css에 이러한 추가 사항을 저장한 다음 텍스트 편집기에서 index.html을 새로 고칩니다. submit 버튼은 이제 주목할만한 파란색과 흰색입니다. 한편 reset은 주조한 밑줄이 있는 텍스트로 렌더링됩니다. 아래 이미지에 표시된 것처럼요:

<button> 요소는 기본적으로 :hover 상태를 갖고 있지 않으므로 이제 스타일에 이를 추가할 것입니다. :hover 상태는 커서를 사용하는 사용자가 버튼 위에 커서가 위치한 것을 시각적으로 확인할 수 있도록 도움이 됩니다.

이러한 <button> 요소에 :hover 상태를 생성하려면 텍스트 편집기에서 styles.css로 돌아가세요. submit 버튼의 backgound-color를 호버할 때 어둡게 설정하십시오. 그런 다음 reset 버튼이 호버될 때 밑줄을 없애세요. 다음 코드 블록에서 강조된 HTML은 이러한 스타일을 작성하는 방법을 보여줍니다:

styles.css

...
button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="submit"]:hover {
  background-color: hsl(213, 73%, 40%);
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

button[type="reset"]:hover {
  text-decoration: none;
}

styles.css에 대한 변경 사항을 저장한 다음 브라우저로 돌아가 index.html을 새로 고칩니다. 다음 애니메이션에서 볼 수 있듯이 마우스 커서가 버튼 위로 올라가면 <button> 요소는 스타일이 변경됩니다:

이 섹션에서는 <button> 요소에 대한 스타일을 만들어 시각적으로 구별되도록 했습니다. 호버시 커서가 어떻게 표시되는지를 cursor 속성을 조정하여 변경했습니다. 또한 각 버튼에 적용할 사용자 정의 스타일을 만들어 추가적인 시각적 피드백을 제공했습니다. 마지막 섹션에서는 폼 요소가 현재 사용 중일 때 :focus 가상 클래스를 사용하여 시각적인 활동 피드백을 제공할 것입니다.

`:focus`로 활성화된 폼 필드 명확히하기

양식을 작성할 때 사용자가 현재 작업 중인 필드를 알 수 있어야 합니다. 이를 :focus 가상 클래스를 사용하여 달성할 수 있습니다. 기본적으로 브라우저는 요소에 :focus가 있을 때를 나타내기 위해 outline 속성을 사용하지만 때로는 인지하기 어려운 지시자일 수 있거나 다른 시각적 디자인 요소와 충돌할 수 있습니다. 이 섹션에서는 양식의 미학에 맞는 사용자 정의 :focus 상태를 생성합니다.

양식 필드 :focus 상태 작업을 시작하려면 텍스트 편집기에서 styles.css를 엽니다. 다음 코드 블록에서 강조된대로 input, select, 및 textarea에 대한 :focus 가상 클래스를 사용하여 그룹 선택기를 만듭니다:

styles.css

...
input,
select,
textarea {
  ...
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px hsl(213, 90%, 70%);
}

input[type="text"],
input[type="email"],
select,
textarea {
  ...
}
...

이 스타일은 브라우저 기본 outline 값을 제거하고 box-shadow 속성을 사용하여 두꺼운 파란색 스트로크로 대체합니다. box-shadow의 처음 세 값은 그림자의 위치 및 흐림 정도입니다. 네 번째 값은 전파라고 불리며, 이 경우 4px 스트로크를 생성합니다.

다음으로 버튼은 약간 다른 포커스 상태를 받게 됩니다. submit 버튼은 동일한 파란색입니다. 포커스 상태의 목적과 의도는 포커스된 요소에 주목할 수 있도록 하는 것이므로 이러한 윤곽선을 다른 방식으로 구별합니다.

styles.css에 button:focus 선택기를 추가하십시오. 선택기 블록에서 outline 기본값을 비활성화하고 box-shadow 속성을 추가하십시오. 배치, 흐림 및 확장 값은 입력 필드와 동일하게 유지되지만 색상은 파란색 대신 검은색으로 지정하십시오. 다음 코드 블록에서 강조된 내용과 동일합니다:

styles.css

...
button {
  ...
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 4px black;
}

button[type="submit"] {
  ...
}
...

styles.css에 변경 사항을 저장하고 브라우저로 돌아갑니다. index.html을 새로 고치고 양식 내의 각 요소 간에 포커스가 이동하도록 Tab 키를 누르기 시작합니다. 다음 애니메이션은 포커스가 Tab 키로 변경됨에 따라 포커스 스타일이 적용되는 방식을 보여줍니다:

이 섹션에서 포커스 상태 스타일을 생성하여 양식 요소가 포커스를 가질 때 명확한 시각적 피드백을 제공했습니다. 이 시각적 스타일링은 마우스, 터치 및 키보드 입력 사용자에게 도움이 됩니다.

결론

양식은 웹 디자인의 공통 요소입니다. 사용자가 앱과 상호 작용하고 콘텐츠를 검색하며 피드백을 제공할 수 있도록 합니다. 이 자습서에서는 완전한 형식을 만들고 스타일을 지정했습니다. 모양 속성을 사용하여 브라우저 기본 스타일을 제거하고 다양한 요소에 새로운 사용자 정의 미적 요소를 만들었습니다. 라디오 버튼과 체크박스에 대한 선택된 상태를 만들기 위해 :checked 가상 클래스를 사용했습니다. 그런 다음 placeholder 콘텐츠를 추가하고 ::placeholder 가상 요소와 일치하는 스타일을 적용했습니다. 사용자 지정 버튼 스타일을 만든 후 :focus 스타일을 적용하여 양식 사용자에게 가치 있는 시각적 상호 작용 피드백을 제공했습니다.

더 많은 CSS 자습서를 읽고 싶다면 CSS 시리즈에서 다른 자습서를 시도해보세요.

Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css