보내기 버튼부터 시작해 보겠습니다. 현재 CSS 상태는 다음과 같아야 합니다:
input[type="submit"] { 배경색: #3399FF; 색상: #fff; 커서: 포인터; 글꼴: 굵은 1em/1.2 Georgia, "Times New Roman ", Serif; 테두리: 1px 단색 #000; 패딩: 5px 10px; 너비: 자동; }이 구문은 다음과 같은 결과를 가져옵니다:
이것은 일반 버튼입니다. 특별히 흥미로운 디자인은 아니지만 확실히 목적을 달성합니다. 그럼에도 불구하고 약간의 양념을 더해야 합니다. 최종 결과는 다음과 같습니다:
호버 효과도 있습니다. 즉, 마우스 포인터를 버튼 위로 이동하면 버튼의 색상이 변경됩니다.
버튼을 자세히 살펴보면 모서리가 둥글게 처리된 것을 확인할 수 있습니다. 이것은 확실히 웹 디자이너들이 오랫동안 기다려온 CSS 혁신 중 하나입니다. "과거에는" 그런 옵션이 없었기 때문입니다. (물론 이미지로 작업할 수 있는 버튼 요소는 예외입니다).
이제 둥근 모서리는 일반 페이지 요소뿐만 아니라 버튼에도 적용할 수 있습니다.
CSS3 작업 초안에는 이를 위한 테두리 반경 속성이 포함되어 있습니다. Mozilla 및 WebKit 브라우저는 이 속성의 실험적 지원을 위해 대체 철자를 제공합니다.-moz-border-radius-webkit-border-radius
그러나 이제 모든 최신 브라우저는 둥근 모서리를 지원합니다.
이 지식을 바탕으로 이제 테두리-반경 정의는 다음과 같이 보일 수 있습니다:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
하지만 자세히 살펴보면 눈에 띄는 다른 점이 있습니다. 버튼에 실제로 색상 그라데이션도 할당되었습니다.
CSS 온보드 도구를 사용하면 이와 같은 효과를 구현할 수 있습니다. 이를 위해 다양한 그라데이션 프로퍼티가 사용됩니다. 이러한 프로퍼티는 배경 프로퍼티에 값으로 할당됩니다. 또한 색상 그라디언트를 생성하는 데 사용할 수 있는 다양한 도구가 있습니다.
예를 들어 http://www.css3factory.com/linear-gradients/ 페이지에서 이러한 도구 중 하나를 찾을 수 있습니다. 다음 구문에서는 색상 그라데이션과 친숙한 둥근 모서리를 정의했습니다.
현재 예제에서 버튼의 구문은 다음과 같습니다:
input[type="submit"] { border-top: 1px solid #96d1f8; background: #65a9d7; background: -webkit-gradient(linear, 왼쪽 상단, 왼쪽 하단, from(#3e779d), to(#65a9d7)); background: -webkit-linear-gradient(top, #3e779d, #65a9d7); background: -moz-linear-gradient(top, #3e779d, #65a9d7); background: -ms-linear-gradient(top, #3e779d, #65a9d7); background: -o-linear-gradient(top, #3e779d, #65a9d7); background: -linear-gradient(top, #3e779d, #65a9d7); padding: 10px 20px; -webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; 색: 흰색; 글꼴 크기: 21px; 글꼴 가족: 'Lucida Grande', Helvetica, Arial, Serif; 텍스트 장식: 없음; 세로 정렬: 가운데; 너비: 자동; }
마우스 포인터가 버튼 위로 이동하면 버튼이 반응해야 한다고 이미 표시했습니다. 이를 위해 익숙한 :hover가 사용됩니다.
#제출:호버 { 테두리 상단 색상: #28597a; 배경: #28597a; 색상: #ccc; }버튼은 다른 이벤트에 반응합니다. 이를 위해 의사 클래스 :active가 사용됩니다. 버튼을 클릭했을 때 반응하는 데 사용할 수 있습니다.
#제출:활성 { 테두리-상단 색상: #1b435e; 배경: #1b435e; }
현재 예시에서는 버튼을 클릭하면 상단 테두리의 색상과 버튼의 배경색이 변경됩니다.
필드의 둥근 모서리
소위 둥근 모서리는 물론 버튼뿐만 아니라 입력 필드에도 적용할 수 있습니다. 결과는 다음과 같이 보일 수 있습니다:
다음은 해당 구문입니다:
input[type="text"], input[type="email"], textarea { border: 1px solid #bebebe; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
이러한 둥근 모서리를 정의하는 데 필요한 속성을 이미 알고 있습니다.
CSS3를 사용한 양식 유효성 검사
현재 방문자는 입력 필드에 원하는 내용을 입력할 수 있습니다. 입력한 값은 확인되지 않습니다. 이것은 곧 바뀔 것입니다. 필드는 다음 기준에 따라 확인됩니다:
- 이름 필드는 반드시 입력해야 합니다.
- 이메일 필드에는 구문상 올바른 이메일 주소가 포함되어야 합니다.
- 여러 줄 입력 필드도 작성해야 합니다.
이러한 기준을 충족한 경우에만 양식을 제출할 수 있습니다.
필드를 필수 필드로 표시하려면 필수 속성이 필드에 할당됩니다. 이 속성이 지정된 필드는 반드시 입력해야 하며, 비어 있으면 안 됩니다.
해당 애플리케이션은 다음과 같이 표시됩니다.
<form> <입력 유형="텍스트" 이름="이름" id="이름" 값="" 필수/> </form>
여기서 브라우저는 필드가 채워졌는지 여부를 확인합니다. 필드가 비어 있는데도 양식을 제출하려고 시도하면 브라우저에 오류 메시지가 표시됩니다.
이메일 필드에서는 상황이 조금 더 복잡해집니다. 여기에는 type="email" 과 필수 속성이 할당됩니다. 이제 값뿐만 아니라 실제로 올바른 이메일 주소를 필드에 입력해야 하며, 그렇지 않으면 양식이 전송될 때 오류 메시지가 표시됩니다.
이제 양식은 다음과 같이 보일 수 있습니다:
<ol> <li> <label for="name">이름:</label> <input type="text" name="name" id="name" value="" required/> </li> <li> <label for="email">이메일 주소:</label> <입력 유형="이메일" name="이메일" id="이메일" value="" 필수/> </li> <li> <label for="댓글">댓글:</label> <textarea cols="32" rows="7" name="content" id="content" required></textarea> </li> <li class="button"> <input type="submit" name="submit" id="submit" value="Submit" /> </li> </ol>
특히 더 광범위한 양식에는 필수 입력란도 물론 있지만 반드시 입력하지 않아도 되는 입력란도 있을 수 있습니다. 이러한 경우 필수 필드를 별도로 표시할 수 있습니다. 필수 필드는 CSS에서:required를 통해 액세스할 수 있습니다.
필수 { 배경색: #ff0000; }이 구문은 필수 필드에 빨간색 배경색을 부여합니다.
필수 필드에 주의를 끌 수 있는 또 다른 변형은 다음 구문입니다:
입력:필수:포커스 { 테두리: 1px 단색 빨간색; 아웃라인: 없음; }
여기서 양식을 제출하려고 시도하면 입력되지 않았거나 유효성 검사 요건을 충족하지 않는 첫 번째 필드에 빨간색 테두리와 초점이 지정됩니다.
사용자가 이 필드를 올바르게 채웠지만 채우지 않은 다른 필드가 있는 경우 다음 제출 방문 후 이 필드에도 초점이 맞춰지고 빨간색 테두리가 표시됩니다.
