Advertisement
  1. Web Design
  2. Form Design
Webdesign

검색 폼의 Input과 버튼에 관한 CSS 코드 실험

by
Difficulty:IntermediateLength:LongLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

저는 이 튜토리얼에서 검색의 기본 폼을 꾸미는 방법에 대해 살펴보려 합니다. 전혀 허튼짓을 하지 않습니다. 다만 CSS transition을 적용해 검색 입력 영역을 멋지게 만드는 방법 4가지를 개별적으로 알아보겠습니다.

검색 기본 폼을 준비하기

작업을 시작하려면 HTML 파일에 검색 입력 영역에 관한 코드가 작성되어 있어야 합니다. 아래 코드를 보면 4가지 코드가 있음을 알게 됩니다. a .box div, a .container-1  div, an .icon, input이지요.

코드 4가지 모두에는 당연히 검색 박스와 돋보기 아이콘이 있습니다. 4가지 예제에서 모두 container를 사용하므로 검색용 input을 따로 처리할 수 있습니다. 마지막으로 div 박스는 container를 중앙에 위치시키는 역할을 합니다.

Font Awesome 추가

Font Awesome은 아이콘 라이브러리입니다.  Font Awesome 웹사이트에서 프로젝트에 대한 상세한 내용을 학습할 수 있습니다.

위의 코드는 마크업 안에 아이콘을 삽입하는 방식 중에 한 예입니다.  그런데 아이콘을 보이게 하려면, 아래 보이는 코드처럼 Font Awesome 라이브러리로 연결되는 link 태그를 넣어야 합니다. 문서의 head 안에 link 코드를 적어주세요.

기본 스타일

개별 스타일시트에서 일부 스타일을 추가할 것입니다. (이는 문서의 head 안에 스타일시트로 연결되는 link 코드가 있어야 한다는 말입니다.)

위의 CSS 코드에서 페이지에 대한 기본 스타일을 추가할 것입니다. 검색 입력 박스는 네이비 색상이 될 거라서 body 배경색은 휑한 흰색을 적용하지 않습니다. 이 튜토리얼에서는 검색 입력 박스를 페이지 중앙에 놓습니다.

검색 박스 꾸미기

이 튜토리얼에서는 전적으로 검색 박스를 예쁘게 꾸미는 방법을 학습합니다. 저는 이 첫 번째 예제에서 작업하는 과정을 하나씩 설명하겠습니다. 여러분이 작업 과정을 확실히 이해하기를 바라기 때문이랍니다.  남은 세 가지 예제에서는 트랜지션을 다양하게 적용할 방법을 간단하게 보여드리겠습니다.

#1. 배경색을 희미하게

착수할 첫 번째 예제에서는 hover 상태에 있을 때 input의 배경색을 바꿔보겠습니다. 배경색의 변화가 어색하지 않도록 트랜지션도 추가로 넣겠습니다.

HTML

앞에서 기초 마크업에 대한 HTML을 이미 보았지요. 모든 예제에서 쓰이는 코드는 아래 코드와 유사합니다.

CSS

스타일 작업을 시작하려면 검색 박스 자체의 CSS 스타일을 정의해야 합니다. 여러분이 정확히 이해하도록 여러 가지 CSS 구문을 하나씩 추가해 봅시다. 

첫째, container 클래스의 스타일을 작성합니다. 가장 중요한 속성이 position: relative라는 것은 틀림없습니다. 아이콘이 곧 보게될 입력 박스 위에 놓이도록 속성을 구체적으로 작성합니다.

Input

다음에는 실제 input에 스타일을 적용합니다. 위의 스타일 코드는 border radius나 배경 색상처럼 순수하게 외관을 꾸미는 데 쓰이며 input의 기능에는 영향을 주지 않습니다. 왼쪽 padding 속성값을 기억해 두세요. 실제로 input에 들어간 텍스트에 걸쳐지지 않게 하기 위한 아이콘용 공간입니다.

아래 코드에는 4가지 다른 구문이 있습니다. placeholder 텍스트에 색상을 적용하는 구문입니다. 이 예제에서는 Search가 되지요. 안타깝게도 브라우저 업체마다 정한 접두사를 따로따로 작성해야 하며, 구문이 하나로 통합되지 못했습니다. 작성하는 데 짜증이 좀 나겠지만 모든 예제에서 이 코드가 반복됨을 알게 될 것입니다.

아이콘

마지막으로 아이콘에 스타일을 적용합니다. 아이콘을 position: absolute로 지정해서 input 위에 자리잡게 해주는 게 가장 중요합니다.  top 값을 50%로 해주고 더불어 margin으로 아이콘 위치를 잡아줍니다.

Hover 효과 추가

다음은 검색 박스가 hover 상태일 때 어떻게 변할지에 대해 코드를 작성해야 합니다. 이 예제에서는 배경색만 변경할 것입니다. (때때로 브라우저에서 보이는) input 주위에 나타나는 노랗거나 푸른 잔광을 없애기 위해 outline: none을 설정합니다.  

위의 코드에서 보듯이 두 가지 상태(focusactive)를 추가로 넣었습니다. 이런 방식으로 하면 input에서 hovering이 멈추더라도 그 효과가 사라지지 않습니다. input이 사용될 때 그 효과도 눈에 잘 띄다는 것이 더욱 중요합니다.

트랜지션 코드 작성

트랜지션이 발생하기 위해 코드를 몇 줄 더 적어야 합니다. 입력 박스의 스타일을 정의한 문구로 다시 돌아가보지요. .container-1input#search 입니다. 다음 코드를 작성한 후에 괄호를 닫습니다.

트랜지션 속성을 간략하게 정의합니다. 아니면 3가지 변수를 따로따로 정의해도 됩니다. 우선은 트랜지션에서 background 속성만 변하도록 합니다.  다음에는 트랜지션하는 시간을 0.5초로 합니다. 마지막으로 트랜지션 효과가 easing이 되도록 정합니다. ease가 여기에서 동작하는 유일한 효과는 아닙니다. 가령 linearease-in을 사용하기도 합니다. 이들은 조금씩 다르게 보여집니다. 이들의 효과가 더 나아지는지 알고 싶다면 직접 테스트해 보세요.

이제 input 스타일은 아래의 코드처럼 보입니다.

CSS 트랜지션은 어떻게 작동할까?

여러분이 CSS transition에 대해 모른다면, 제가 간단히 설명해 드리겠습니다. 먼저, 트랜지션이 작동하려면 hover나 active나 focus 상태가 아닌 기본 상태를 속성에 정의해야 합니다.

CSS 트랜지션은 서서히 변하게 하는 효과이며, 이를 제어하는 특정한 속성을 정의할 수 있습니다. 가령, 영향이 미칠 속성과 트랜지션 시간 및 트랜지션 종류처럼 말이지요. 한 요소에 대해 다중 트래지션을 설정할 수 있습니다. 그런데, 이 속성을 지원하는 것이 아직은 보편적이지 않으므로 다른 브라우저에 맞추기 위해 브라우저 제조사의 접두어를 늘 포함시켜 줍니다.

좀 더 알고 싶다면 CSS3 Transitions And Transforms From Scratch를 읽어 보세요.

#2. Hover 시 펼쳐지는 입력창

이 예제에서는 돋보기 아이콘을 통해서만 검색이 시작합니다. 아이콘이 hover 상태일 때 검색창이 펼쳐지며, 그 시점에 검색어를 입력할 수 있게 됩니다. 이 예제에 적힌 코드의 대부분은 이전 예제에 쓰인 코드와 매우 유사합니다.

HTML

CSS

그러나 여기에서 입력 박스의 트랜지션 스타일은 다릅니다. input이 상당히 작으므로 아이콘이 그 뒤로 나타나게 해줍니다. background와 font color 같이 유지되는 속성들은 검색 스타일에서 변경하지 않습니다.

보시다시피 저는 너비만 변하도록 트랜지션 속성을 재정의해 주었습니다. 트랜지션 시간은 동일하게 유지했는데, 이는 사용자의 신경을 건드리지 않을 정도로 빠르며, 효과를 좋게 할 만큼 긴 시간이기 때문입니다.

placeholder 텍스트 색상을 바꿔주는 코드가 아래 있습니다.

그리고 아이콘 CSS 스타일을 다시 한번 작성했습니다. 이전 예제에 쓴 코드와 같습니다.

Hover 효과

가장 마지막에 할 일은 검색창이 hover 상태에서 어떻게 보여야 하는지를 정의하는 것입니다. 아래 코드에서 첫 번째 구문은 브라우저에서 나타나는 잔광을 없애고 검색창이 사용 중일 때, 즉 검색어를 입력할 때 검색 박스가 펼쳐진 채로 있도록 합니다. 중간 구문에서는 hover 시 input이 전체 너비까지 펴지게 합니다.

위 코드의 마지막 부분에서는 hover 상태에서 아이콘 색상을 변경합니다. 이는 사용자에게 검색 박스가 변화없는 input이 아니라 역동적이며 작동하고 있읍을 보여주는 미세한 부분일 뿐입니다. 트랜지션을 사용해 그 변화를 실행하지 않습니다.

#3. Hover 시 커지는 아이콘

4가지 예제 중에 코드와 시각적 효과 부분에서 가장 미묘한 예제입니다. 이 경우, 돋보기 아이콘이 약간 튀어나오면서 커집니다.

HTML

여기서도 아이콘과 검색 박스에 관한 HTML 마크업은 이전 2개의 예제와 동일합니다. 물론 .container-3은 예외입니다.

CSS

이 예제에서 CSS는 별다를 바 없습니다. 대부분은 기본 상태가 전혀 다르지 않은 첫 번째 예제와 매우 비슷하게 시작합니다. container와 input 관련 코드가 아래에 있습니다. 이번에는 input에 대한 트랜지션이 없다는 것을 기억하세요.

한 번 더 placeholder 구문을 적습니다.

자, 보기에 이 예제의 아이콘은 똑같습니다. 동일한 색상과 동일한 위치 등등 말이지요. 하지만 저는 여기에 트랜지션을 추가했습니다. 이 트랜지션은 모든 속성을 대상으로 하며, 따로따로 풀어서 적지 않고 함축적으로 쓰는 방식으로 작성했습니다.

Hover 효과 추가

위의 코드에 한두 가지 변화가 있습니다. 먼저, hover 상태에서의 아이콘 색상을 바꾸고 약간 올라가도록 이동시켰습니다. 크기가 커질 때 수직상에서 중앙에 위치하도록 말이죠. 두 번째로 hover 상태에서 아이콘 요소에 transform을 추가해서 처음 크기보다 1.5배 커지게 했습니다. 이전에 transition 정의에서는 모든 속성을 대상으로 했기 때문에 hover 상태에서 아이콘이 커지는 듯 보입니다.

transform 속성에 대해서 자세히 알고 싶다면 CSS3 Transitions And Transforms From Scratch를 읽어 보세요.

#4. Hover 상태에서의 버튼

앞의 3가지 예제에 비해 이번 예제는 더 복잡합니다. hover 상테에서 버튼이 input 위로 미끄러지듯 이동해서 사용자가 진행을 계속하게 합니다. SendGo 버튼처럼요. 그 버튼 안에 돋보기 아이콘이 있을 것입니다.

HTML

여기서 HTML은 약간 달라집니다. input은 여전히 그대로지만 아이콘은 버튼 요소 안에 있습니다. 버튼 요소는 input 다음에 오지요. 버튼이 input 다음에 있는 게 중요한데요. 이는 CSS에서 hover 효과를 만드는 방법과 관련 있기 때문입니다.

CSS

이 예제에서 CSS가 달라지니까 집중하세요! container 스타일에 대한 코드가 아래에 있습니다. 첫째, position: relative가 없어졌어요. 아이콘을 input 위에 놓으려고 사용한 속성이라서 더 이상 중요하지 않습니다. 반면 overflow:hidden이 있습니다. 이 속성은 hover 상태가 아닐 때도 버튼을 보여줍니다. 엄밀히 말하면 input 오른쪽에 버튼이 보입니다. 그렇지만 overflow:hidden 덕분에 container 너비 밖에 있게 될 때는 보이지 않게 됩니다. container와 input의 너비는 같습니다.

아래 코드에서 input에는 transition이 없습니다. 이번에는 이 요소에 효과가 필요 없기 때문입니다.

다음은 placeholder 색상을 바꾸는 코드입니다.

hover 상태에서 보여질 버튼 스타일에 관한 코드가 아래 있습니다. 옆에서 살짝 미끄러져 들어오는 비결은 버튼을 input 바로 뒤에 놓고 hover 상태가 아닌 경우 눈에 보이지 않게 하는 것입니다. 버튼이 움직이거나 변화할 요소이므로 버튼에 transition이 정의되어야 합니다. 좀 더 간단하게 하려고 저는 transition이 모든 속성에 영향을 미치도록 작성했습니다.

Hover 효과 추가

버튼이 점점 희미해지도록 하려면 input 위로 이동하는 코드가 필요합니다. margin값을 마이너스로 하면 해결됩니다. 앞에서는 버튼의 opacity 값을 0으로 했으므로 버튼을 눈에 보이게 하려면 그 값을 1로 변경해야 합니다.

마지막 규칙에서는 버튼이 hover 상태일 때 버튼 배경색을 바꿔줍니다. 버튼이 활성화 상태이고 버튼을 클릭해서 검색어를 전송할 수 있음을 사용자가 인지하게 하는 데 좋습니다. 버튼이 비활성화된 채로 보인다면 버튼이 있을 의미가 없기 때문이지요.

마무리

자, CSS 아이디어 실험의 끝자락에 도착했습니다! 검색 기본 폼의 input을 이용해 그 움직임에 변화를 주는데 작은 효과를 사용해 보았습니다.  이처럼 검색 input을 바꿔주는 다른 방법이 여러분에게 있나요? 어떤 측면에서 CSS transition이나 transform을 적용하세요? 아래 댓글에서 알려주세요!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.