소개

소스 코드 htps : // 기주 b. 코 m / 토우 P로 g 라민 g / 세아 rch__ 바 r



React + Flexbox + Material-UI를 사용하여 자주 사용하는 이러한 검색 양식 디자인을 만들고 싶습니다.
이 Qiita도 그렇습니다만, 주의해 보면 이 디자인의 검색 폼은, 정말 많네요.

1.React 구조

React의 구조는 다음과 같이 매우 간단합니다.


Components 디렉토리에 Search.js 및 Search.css 파일을 만들었습니다.

2.Search.js 파일

Search.js

import React from 'react';
import './Search.css';
import SearchIcon from '@material-ui/icons/Search';

function Search() {
    return (
        <div className="search">
            <div className='search__bar'>
                <SearchIcon />
                <input
                    className="search__bar__input"
                    placeholder="Search"
                />
            </div>
        </div>
      )
 }

 export default Search;

스타일링하지 않으면 ...

분명 이것으로는, 아무도 검색해 주지 않지요. (웃음)

그럼 css 파일로 서서히 스타일링 해 나갑니다.

2.CSS 스타일링

갑자기 결과를 표시하는 대신 서서히 마무리합니다.

(1)

Search.css

.search{
    display: flex;
    justify-content: center;
}
.search__bar{
    display: flex;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 999px;
    background-color: #f0f2f5;
}

아직 추악하네요. . .
border-radius: 999px 는 이러한 양식을 만들 때 템플릿이므로 기억하는 것이 편리합니다.border-radius: 1px 에서 놀아 보면 서서히 모서리가 완벽한 원이 되어 가는 모습을 잘 알 수 있습니다.

(2)input의 경계를 없앤다.

그런데, 여기를 덧붙이면,

Search.css

.search__bar > input {
    border: none !important;
    background-color: #f0f2f5;
}

조금 좋은 느낌이 들었습니다만, 선택하면, 오른쪽과 같이 border 가 선명하게 나와 버립니다.


(3) 선택시 border
Search.css

.search__bar > input:focus {
    outline-width: 0;
}

input::focus 에서 outline-width: 0; 설정하면 다음과 같이 검색 양식을 만들 수 있습니다.



(4)placeholder와 Material-icons를 지정하는 방법.

Search.css

.search__bar > input::placeholder{
    text-align: left;
    font-size: 15px;
}
.search__bar > .MuiSvgIcon-root {
    margin-right: 5px;
}

input::placeholder 에서 placehoder 문자 검색을 지정하여 스타일링할 수 있습니다..MuiSvgIcon-root 는 Material-icons 아이콘을 지정할 수 있습니다.

그리고 완성된, 검색 폼이 이쪽입니다.
덧붙여서 배경색은 Facebook의 검색 폼과 같은 색을 사용하고 있습니다.



Search.css

.search{
    display: flex;
    justify-content: center;
}
.search__bar{
    display: flex;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 999px;
    background-color: #f0f2f5;
}
.search__bar > input {
    border: none !important;
    background-color: #f0f2f5;
}

.search__bar > input:focus {
    outline-width: 0;
}

.search__bar > input::placeholder{
    text-align: left;
    font-size: 15px;
}
.search__bar > .MuiSvgIcon-root {
    margin-right: 5px;
}

수고하셨습니다.