CSS를 사용하여 마우스 오버 시 Google 검색 창(예: 입력 상자)을 강조 표시하는 방법은 무엇입니까?

소비자가 고유한 정보에 액세스하기 위해 검색 창을 사용함에도 불구하고 검색 창은 웹사이트 디자인 프로세스에서 종종 간과되는 구성 요소입니다. 검색창은 웹사이트에서 가장 일반적으로 사용되는 부분 중 하나이므로 검색창의 디자인은 사용자 경험에 상당한 영향을 미칩니다.

검색창은 100페이지가 넘는 복잡한 콘텐츠가 포함된 웹사이트에 유용합니다. 검색창은 고객이 B2C(기업과 소비자 간) 공간에서 대규모 전자상거래 사이트, 뉴스 사이트, 특가 사이트, 예약 사이트에 대한 정보를 찾는 데 사용됩니다. 그들은 또한 여러 고객 부문과 제품 라인을 갖춘 대규모 B2B 사이트에서도 고용됩니다. 페이지 수가 적은 소규모 웹사이트의 경우 검색창이 필요하지 않을 수 있지만, 웹사이트가 성장함에 따라 검색창은 필수가 될 것입니다.

검색창은 기본적으로 입력 필드와 버튼이라는 두 가지 UI 요소로 구성됩니다. 이 기사에서는 CSS 속성을 사용하여 Google 검색창과 유사한 입력 상자 강조 표시를 만드는 방법을 살펴보겠습니다.

Google 검색창

검색창은 사용자가 인터넷을 통해 필요한 정보를 검색할 수 있는 모든 인터넷 브라우저의 위치입니다. 또한 독자가 웹사이트를 탐색하는 동안 웹사이트를 검색할 수도 있습니다. 마찬가지로 사용자는 Google 검색 표시줄(Google 앱과 연결된 검색 위젯)을 사용하여 홈 화면에서 모든 유형의 검색을 수행할 수 있습니다.

입력 상자

태그는 사용자가 데이터를 제출할 수 있는 대화형 웹 기반 양식을 만드는 데 사용되는 HTML 요소입니다. 장치 유형과 사용자에 따라 다양한 입력 데이터 유형이 있습니다. 요소는 다양한 입력 데이터 유형 및 속성으로 인해 HTML에서 가장 인기 있고 일반적으로 사용되는 요소 중 하나입니다.

다음은 구문입니다 -

으아아아

참고 - 태그를 사용하여 요소의 요소를 정의하세요. 요소의 for 속성은 요소의 ID와 동일해야 합니다.

CSS 호버 속성

:hover는 사용자가 포인팅 장치를 클릭했거나 특정 요소 위로 이동했음을 알 수 있도록 하는 CSS 의사 클래스입니다. 예를 들어 페이지의 요소 위로 마우스를 가져가면 해당 요소의 글꼴 색상이나 배경 색상이 지정된 CSS 속성에 따라 변경될 수 있습니다.

예

아래 예시를 확인해 보세요 -

으아아아

Button 요소 위로 마우스를 가져가면 내부 텍스트 색상이 파란색에서 빨간색으로 변경됩니다. 또한 텍스트의 글꼴 크기도 커집니다.

상자 그림자 속성

box-shadow 속성을 사용하면 개발자가 요소에 하나 이상의 그림자를 적용할 수 있습니다. 여러 효과를 쉼표로 구분하여 할당하세요.

예

으아아아

입력 상자 강조 표시 만들기

Google 검색창과 같은 입력 상자를 만들려면 다음 단계를 따라야 합니다. -

• type="text"로 입력 필드를 만듭니다.

• CSS를 사용하여 높이와 너비를 조정하세요. 입력 필드에 그림자 효과를 제공하려면 box-shadow 속성을 사용하십시오.

• Google 검색창과 유사하게 하려면 마우스 오버 시 그림자 효과가 표시되어야 하므로 CSS 마우스 오버 속성을 사용하겠습니다.

예

으아아아

결론

이 기사에서는 마우스를 올리면 강조 표시되는 Google 검색창과 유사한 입력 상자를 만드는 방법에 대해 논의했습니다.

위 내용은 CSS를 사용하여 마우스 오버 시 Google 검색 창(예: 입력 상자)을 강조 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!