웹 양식은 많은 웹사이트의 필수적인 부분이며 웹사이트 운영자가 사용자의 입력을 수락할 수 있도록 합니다. 예를 들어 웹 양식을 사용하여 웹 사이트의 이메일 뉴스레터에 가입하려는 사용자의 이메일 주소를 수락할 수 있습니다.
CSS를 사용하여 웹 페이지의 양식 입력에 사용자 정의 스타일을 추가할 수 있습니다. 이를 통해 방문자가 정보를 제출하는 데 사용할 수 있는 미학적으로 보기 좋은 양식 필드를 만들 수 있습니다.
이 자습서에서는 HTML 입력의 기본 사항과 CSS를 사용하여 웹 페이지의 입력 필드 스타일을 지정하는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽고 나면 CSS를 사용하여 입력 필드 스타일을 지정하는 전문가가 될 것입니다.
HTML 및 CSS 입력
웹 페이지에서 양식을 정의하려면 HTML을 사용해야 합니다. HTML 언어를 사용하면 양식의 구조(양식 필드가 표시될 위치 및 표시할 위치)를 정의한 다음 CSS를 사용하여 양식의 요소에 사용자 정의 스타일을 적용할 수 있습니다.
HTML에서 태그는 양식에서 사용자 입력을 수락하는 데 사용됩니다. HTML 의 기본 구문은 다음과 같습니다.
<input type="typeOfInput">
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
HTML 입력에 대해 자세히 알아보려면 HTML 입력에 대한 초보자 가이드를 읽어보세요. 다음은 사용자 이름을 허용하는 양식 필드의 기본 예입니다.
<label for="userName">Name</label> <input type="text" name="userName">
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
우리의 입력 필드는 다소 기본적인 태그에 대한 기본 HTML 스타일을 사용합니다. 또한
CSS 입력
CSS를 사용하여 양식 요소의 스타일을 지정하는 방법에 대한 몇 가지 예를 살펴보겠습니다.
입력 너비 설정
양식을 제출하는 사람들의 이름을 수집하는 지역 우표 클럽의 양식 필드를 디자인한다고 가정합니다. 이 양식은 웹 페이지 너비의 50%를 차지해야 합니다. 다음 코드를 사용하여 이 양식을 만들 수 있습니다.
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
width: 50%;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
이 예에서는 웹 페이지 너비의 50%에 해당하는 양식 필드를 만들었습니다.
HTML 코드에서
테두리 입력
시애틀 스탬프 클럽은 연한 파란색이 클럽의 색상이기 때문에 각 양식 필드 주위에 연한 파란색 테두리를 추가하도록 요청했습니다. 테두리의 너비는 3px이어야 합니다. border 속성을 사용하여 각 양식 입력 필드 주위에 테두리를 추가할 수 있습니다.
다음은 입력 필드 주위에 테두리를 추가하는 데 사용할 코드입니다.
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightblue;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
코드에서 테두리 스타일을 사용하여 입력 필드 주위에 테두리를 추가합니다. 이 테두리의 두께는 3px입니다. 보시다시피 양식 필드에는 연한 파란색 테두리가 있습니다.
CSS 테두리에 대해 자세히 알아보려면 CSS 테두리에 대한 궁극적인 가이드를 읽어보세요.
하단 테두리가 있는 입력
또한 양식의 특정 가장자리에 테두리를 추가할 수도 있습니다. 따라서 필드의 맨 아래에만 테두리가 나타나도록 하려면 border-bottom 속성을 사용할 수 있습니다. 사용할 코드는 다음과 같습니다.
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
border-bottom: 3px solid lightblue;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
코드에서 border-bottom 속성을 사용하여 입력 필드의 맨 아래에 테두리를 추가합니다.
패딩을 사용한 입력
시애틀 스탬프 클럽은 양식의 내용(사용자가 정보를 입력하는 공간)과 양식의 테두리 사이에 공백을 표시하도록 요청했습니다.
클럽은 상단 및 하단 테두리와 양식 콘텐츠 사이에 10px 패딩이 표시되기를 원합니다. 또한 클럽은 왼쪽과 오른쪽 테두리와 양식 콘텐츠 사이에 15px 패딩이 표시되기를 원합니다.
다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
padding: 10px 15px;
box-sizing: border-box;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
이 예에서는 패딩 스타일을 사용하여 양식 필드의 내용과 양식 필드의 테두리 사이에 패딩을 적용했습니다. 첫 번째 값(10px)은 위쪽 및 아래쪽 가장자리의 패딩을 설정하고 두 번째 값(15px)은 왼쪽과 오른쪽 가장자리의 패딩을 설정합니다.
또한 box-sizing 속성의 값을 border-box로 설정했습니다. . 이렇게 하면 요소의 전체 너비에 패딩이 포함됩니다.
CSS 패딩 속성에 대해 자세히 알아보려면 CSS 패딩 가이드를 읽어보세요.
집중 입력이 있는 스타일
대부분의 브라우저에서 양식 필드를 클릭하면 필드에 파란색 윤곽선이 추가됩니다. 이 기능은 현재 집중하고 있는 양식을 강조 표시하는 데 사용됩니다.
그러나 :focus CSS 선택기를 사용하여 이를 사용자 정의할 수 있습니다. 시애틀 스탬프 클럽은 사용자가 양식을 클릭할 때 양식 하단에 밝은 회색 테두리를 추가하도록 요청했습니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input:focus {
outline: none;
border-bottom: 3px solid lightgray;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
웹 양식은 기본 HTML 스타일을 사용하여 나타납니다. 그러나 양식을 클릭하면 3px 너비의 단색 연한 회색 테두리가 양식 하단에 적용됩니다.
이는 사용자가 입력 필드를 클릭할 때 스타일을 적용할 수 있는 :focus 선택기를 사용했기 때문입니다. 또한 사용자가 양식 입력 필드를 클릭할 때 기본 파란색 윤곽선이 표시되지 않도록 하는 아웃라인:없음 규칙을 사용했습니다.
포커스 선택기에 대해 자세히 알아보려면 CSS :focus 선택기에 대한 가이드를 읽어보세요.
모서리가 둥근 입력
Seattle Stamp Club은 입력 필드의 모든 가장자리와 입력 모서리를 둥글게 하는 밝은 회색 테두리를 추가하도록 요청했습니다. rounded corners를 만들 수 있는 border-radius 속성을 사용하여 그렇게 할 수 있습니다. CSS에서 효과.
다음은 모서리가 둥근 양식 필드를 만드는 데 사용할 코드입니다.
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightgray;
border-radius: 10px;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
이 예에서는 입력 필드 주위에 나타나는 3px 너비의 밝은 회색 테두리를 정의합니다. 그런 다음 border-radius 속성을 사용하여 양식 필드의 모서리를 둥글게 만듭니다.
웹 페이지의 HTML 요소에 둥근 모서리를 적용하는 방법에 대해 자세히 알아보려면 CSS 둥근 모서리 가이드를 읽어보세요.
배경색으로 입력
시애틀 우표 클럽은 우리에게 하나의 최종 양식 필드를 만들 것을 요청했습니다. 이 양식 필드에는 3픽셀 너비의 단색 연한 회색 테두리가 있어야 하며 연한 파란색 배경이 있어야 합니다.
다음 코드를 사용하여 이 양식 필드를 만들 수 있습니다.
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightgray;
background-color: lightblue;
}
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
코드에서 border 속성을 사용하여 입력 필드 주위에 3px 너비의 단색 연한 회색 테두리를 정의했습니다. 그런 다음 background-color 속성을 사용하여 양식 필드의 배경색을 하늘색으로 설정했습니다.
특정 입력 필드에 스타일 적용
이 튜토리얼에서는 필드에 스타일을 적용하는 방법에 대해 논의했습니다. 그러나 특정 입력 유형에만 스타일을 적용할 수 있는 방법이 있습니다.
이것이 속성 선택기가 들어오는 곳입니다. input을 사용하는 대신 스타일에서 특정 입력에만 스타일을 적용하려면 다음 선택기 중 하나를 사용할 수 있습니다.
- input[type=text]:모든 텍스트 필드에 스타일을 적용합니다.
- input[type=email]:모든 이메일 필드에 스타일을 적용합니다.
- input[type=password]:모든 비밀번호 필드에 스타일을 적용합니다.
- input[id=userName]:ID가
userName인 요소에 스타일을 적용합니다. .
속성 선택기의 작동 방식에 대해 자세히 알아보려면 CSS 속성 선택기에 대한 Career Karma 가이드를 읽어보세요.
결론
CSS를 사용하면 미학적으로 보기에도 좋고 기능적으로도 사용자 정의 디자인된 웹 양식을 만들 수 있습니다. 먼저 HTML을 사용하여 양식의 구조를 디자인한 다음 CSS 스타일을 사용하여 양식에 스타일을 적용할 수 있습니다.
이 자습서에서는 예제를 참조하여 HTML 입력의 기본 사항과 CSS를 사용하여 입력 필드의 스타일을 지정하는 방법에 대해 설명했습니다. 이제 CSS를 사용하여 전문가처럼 입력 필드의 스타일을 지정하는 데 필요한 지식을 갖추었습니다!