CSS를 사용한 스타일 입력 및 제출 버튼
제출 버튼은 데이터를 양식에 제출하는 데 사용되는 버튼 유형입니다. 일반적으로 다른 모든 필드가 채워진 후 양식 끝에 배치됩니다. 제출 버튼을 클릭하면 양식이 처리를 위해 서버로 전송됩니다.
제출 버튼의 구문은 HTML의 다른 버튼과 유사하지만 유형은 제출이어야 합니다. 이 기사에서는 CSS를 사용하여 HTML에서 입력 및 제출 버튼의 스타일을 지정하는 방법을 알려줍니다.
HTML로 제출 버튼 만들기
제출 버튼을 만드는 방법에는 두 가지가 있습니다. 첫 번째 방법은 <input> 태그를 type="submit" 속성과 함께 사용하는 것입니다.
클릭하면 양식을 제출하는 버튼이 생성됩니다.
<button type='submit'>
두 번째 방법은 <button> 태그를 사용하는 것입니다. 이렇게 하면 HTML로 사용자 정의할 수 있는 버튼이 생성됩니다.
<button> 태그는 양식을 제출하거나 JavaScript 기능을 트리거하는 데 사용할 수 있습니다.
<input type="submit" value="Submit"/>
HTML로 입력 버튼 만들기
입력 버튼은 사용자가 클릭하여 동작을 선택할 수 있는 간단한 컨트롤입니다. type 속성이 button으로 설정된 <input> 요소로 입력 버튼을 생성할 수 있습니다.
<input type="button" value="Click me!">
사용자가 버튼을 클릭하면 버튼과 관련된 작업이 수행됩니다. 대부분의 경우 작업은 JavaScript 이벤트 핸들러 형식으로 정의됩니다. 예를 들어 클릭할 때 경고 메시지를 표시하는 버튼을 정의할 수 있습니다.
<input type="button" value="Click me!" onclick="alert('Hello world!')">
value 속성 외에도 label 속성을 사용하여 버튼의 레이블을 설정할 수도 있습니다.
예를 들어
<input type="button" value="Click me!" label="Hello world!">
CSS를 활용하여 입력 버튼의 스타일을 지정할 수도 있습니다. 예를 들어 버튼의 너비, 높이, 색상 등을 설정할 수 있습니다.
CSS를 사용한 스타일 입력 및 제출 버튼
CSS로 스타일 입력 및 제출 버튼에 관해서는 디자인의 일관성을 유지하기 위해 동일한 크기, 색 구성표 및 기타 모든 스타일 속성을 선택해야 합니다.
CSS로 입력 버튼 스타일 지정
입력 버튼은 모든 웹 페이지 또는 애플리케이션의 기본 요소입니다. 사용자가 정보를 제출하거나 조치를 취할 수 있으며 브라우저의 기본 스타일을 사용하여 스타일이 지정됩니다. 그러나 CSS를 사용하여 기본 스타일을 재정의할 수 있습니다.
CSS로 입력 버튼의 스타일을 지정하는 몇 가지 방법이 있습니다. 가장 일반적인 방법은 CSS pseudo-classes: hover, :active 및 :focus를 사용하는 것입니다. 이러한 의사 클래스는 사용자가 버튼 위로 마우스를 가져가거나 클릭하거나 초점을 맞출 때 버튼의 스타일을 변경합니다.
입력 버튼의 스타일을 지정하는 또 다른 방법은 CSS3 속성인 box-shadow 및 border-radius를 사용하는 것입니다. 이러한 속성을 사용하면 버튼 주위에 그림자를 추가하고 버튼을 둥글게 만들 수 있습니다.
마지막으로 CSS3 속성인 transform을 사용하여 버튼을 scale, rotate 또는 skew할 수 있습니다. 이렇게 하면 사용자가 마우스를 가져가면 버튼이 커지는 것과 같은 흥미로운 효과를 만들 수 있습니다.
이 모든 방법을 사용하여 독특하고 세련된 입력 버튼을 만들 수 있습니다.
CSS로 제출 버튼 스타일 지정
사용 가능한 CSS 속성을 사용하여 제출 버튼의 스타일을 지정하는 한 가지 방법입니다. 이것은 버튼에 웹 사이트의 전체 스타일과 일치하는 고유한 모양을 제공하는 이상적인 방법이 될 수 있습니다.
또 다른 접근 방식은 버튼의 컨테이너 스타일을 지정하는 것입니다. 그러면 버튼의 전체적인 모양을 더 잘 제어할 수 있습니다. 버튼에 배경 이미지나 다른 요소를 추가하고 싶을 때 활용할 수 있습니다.
코드 예
<!DOCTYPE html>
<html>
<head>
<style>
input[type="submit"] {
position: absolute;
top: 65%;
left: 25%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #f1f1f1;
color: black;
font-size: 16px;
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
border: 2px solid #4caf50; /* Green */
box-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 21px 0 rgba(0, 0, 0, 0.19);
}
input[type="submit"]:hover {
background-color: #4caf50; /* Green */
color: white;
}
input[type="text"] {
width: 40%;
padding: 14px 30px;
margin: 9px 0;
box-sizing: border-box;
}
input[type="textarea"] {
padding: 36px 40px;
}
</style>
</head>
<body>
<h2>Styling form buttons</h2>
<div class="form-center">
<form action="#" method="post">
Name <input type="text" placeholder="Full name" />
<br />
Email <input type="text" placeholder="Email address" />
<br />
Date <input type="text" placeholder="Date" />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
결론
제출 버튼과 입력 필드는 모두 요소입니다. 차이점은 입력 필드는 데이터 입력을 나타내는 데 사용되는 반면 제출 버튼은 데이터를 양식에 제출하는 데 사용할 수 있다는 것입니다. 또한 버튼에 미적으로 만족스러운 모양을 제공하기 위해 border-radius 속성을 사용하여 시각적 효과를 만들 수도 있습니다.
예를 들어, 클릭하면 페이지 안으로 눌려지는 것처럼 보이는 버튼을 만들고 CSS를 사용하여 더 많은 디자인 트릭을 수행하는 데 사용할 수 있습니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn