HTML - 검색창 만들기(이모지, 포지션 활용)

Jan 15, 2024

Contents

1. 이모지 활용


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .tf-search{
            
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div>    
        <input type="text" class="tf-search" placeholder="Search...">
    </div>
</body>
</html>

위와 같은 코드를 만들었다. <input> 태그는 사용자로부터 값을 입력받을 때 사용한다.

클래스명은 tf-search 로 설정했고, placeholder 를 이용하면 내부에 표시되는 문자를 표기한다. placeholder 는 사용자가 마우스 커서를 올리면 사라진다.

border 은 선을 의미하는데 border-radius 은 선의 각을 둥글게 만든다는 의미이다.

이제 돋보기 사진을 넣어야 한다. 가장 쉬운 방법은 이모지를 넣는 법이다. 이모지는 이모티콘과는 달리 문자로 사용되는 그림이다. 이모지는 구글링을 통해 원하는 그림을 찾거나, 만들어서 사용할 수 있다.


<div>    
        <input type="text" class="tf-search" placeholder="🔍Search...">
    </div>

2. 폰트어썸 활용

Free Icons | Font Awesome

Search all of Font Awesome's free and Open Source icons. Then use them wherever and however you want.

https://fontawesome.com/search?m=free&o=r

폰트어썸 사이트에는 많은 아이콘 파일이 있다. 위의 링크는 무료로 사용할 수 있는 아이콘 모음이다.

폰트어썸 아이콘을 사용하기 위해서는 CDN 이 필요하다. CDN (Content Delivery Network) 지리적으로 분산된 네트워크로, 사용자에게 지리적으로 가장 가까운 서버에서 컨텐츠를 전송해주는 방식이다.

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.

https://cdnjs.com/libraries/font-awesome


https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

위의 사이트에서 .css 를 복사한 후 이 값을 <head> 에 넣는다.


<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        .tf-search{
            
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
        }
    </style>

그 후 폰트어썸 사이트에서 원하는 아이콘을 선택 후 HTML 값을 복사한다.

3. 아이콘 삽입하기

복사한 값을 바디에 입력한다.


<body>
    <i class="fa-solid fa-magnifying-glass"></i>
    <div>    
        <input type="text" class="tf-search" placeholder="Search...">
    </div>
</body>

그런데 바디에 값을 대입하면 문제가 생긴다. <div> 는 블록이기 때문에 아이콘과 합칠 수가 없다.

그래서 <div> 태그 내부에 <input> 과 <i> 를 함께 넣는다.


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        .tf-search{
            
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
        }        
    </style>

</head>
<body>
    <div>    
        <input type="text" class="tf-search" placeholder="Search...">
        <i class="fa-solid fa-magnifying-glass icon-search"></i>
    </div>
</body>
</html>

이렇게 하면 <input> 과 <i> 가 같은 <div> 태그 내부에 있기 때문에 같은 라인에 표시된다.

클래스명은 여러 개 선언이 가능하기 때문에 <i> 에 새로운 클래스명 icon-search 을 설정했다.

이제 <div>와 icon-search 의 부모-자식 관계를 활용해 위치를 설정해보자.


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        .tf-search{
            
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 4px;
            padding: 0 0 0 30px;
        }
        .box-tf{
            position: relative;
        }
        .icon-search{
            position: absolute;
            top: 15px;
            left: 10px;
        }
       
    </style>

</head>
<body>
    <div class="box-tf">    
        <input type="text" class="tf-search" placeholder="Search...">
        <i class="fa-solid fa-magnifying-glass icon-search"></i>
    </div>
</body>
</html>

padding 속성은 상자 내부의 여백을 설정한다. 부모 box-tf 에 relative , 자식 icon-search 에 absolute 를 설정해 부모 태그 내부에서 icon-search 이 위치를 정할 수 있도록 설정했다.