버튼과 서치박스 만들기 실습 + 색상 뽑는 방법

yuzu sim

Jan 16, 2024

버튼을 눌렀을때의 이벤트나 반응은 프로그래밍으로 해야 함

자바 스크립트를 배우면 할 수 있음

자바 스크립트로 브라우저에서 동작하는 프로그램을 짤 수 있음

표기법

카멜도 파스칼 표기법도 아님

-은 강사님과의 코드 컨벤션(Convention)

input-btn-search

나중에 프로젝트할 때 팀장이 조율해줘야 함/ 컨벤션(=프로토콜)이 필요함

1) 버튼과 서치박스 만들기

선택자: 속성: 값

선택자 : 타켓을 결정

태그명으로 안하고 이름을 부여하면 구분할 수 있음

매개변수가 1개 이상인 선택자가 있고 매개변수는 띄워쓰기로 구분함

💡

선택자가 중요한 이유 : 나중에 크롤링을 하기 위해

색상은 16진수로 줄 수 있음

다 1바이트 값 0~255까지의 값

rgb(255, 255, 255); / 화이트

rgb(0, 0, 0); / 블랙

영어로 입력도 가능함

2) 버튼에 그림자 설정하기

띄워쓰기로 파라미터 구분

5개가 있음 : 4가지 방향 + 색상

시계 방향

💡

input으로 버튼을 만들면 value 값에 글자만 들어감 ⇒ button을 사용해서 만들어야 함

💡

버튼마다 높이가 같아야 일관성이 있음


<!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">
    </script>
    <style>
        .btn-search {
            background-color: #FF5A5F;
            border: 0px;
            width: 70px;
            height: 45px;
            font-size: 15px;
            color: white;
            font-weight: 700;
            border-radius: 6px;
            box-shadow: 3px 3px 0px 0px rgb(158, 146, 146);
        }

        .btn-google {
            background-color: white;
            width: 400px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 1px solid black;
        }

        .tf-search {
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 5px;
        }

        .tf-search2 {
            height: 40px;
            width: 300px;
            font-size: 20px;
            border-radius: 5px;
            padding: 0 0 0 30px;
        }

        .box-search {
            position: relative;
        }

        .icon-search {
            position: absolute;
            top: 13px;
            left: 10px;
        }
    </style>
</head>

<body>
    <h1>버튼</h1>
    <hr>
    <input type="button" value="검색" class="btn-search">
    <br><br>
    <button class="btn-google">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px" height="25px">
            <path fill="#FFC107"
                d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
            <path fill="#FF3D00"
                d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
            <path fill="#4CAF50"
                d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
            <path fill="#1976D2"
                d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
        </svg>
        구글 계정으로 로그인
    </button>
    <br>
    <h1>input 태그</h1>
    <hr>
    <input type="text" class="tf-search" placeholder="🔎Search...">
    <br><br>
    <div class="box-search">
        <input type="text" class="tf-search2" placeholder="Search...">
        <i class="fa-solid fa-magnifying-glass icon-search"></i>
    </div>

</body>

</html>