HTML 6강. input 태그 디자인

3가지 버튼을 디자인해볼 것이다.

* 최종 완성본 *

우선 button타입 input 태그를 3개 만들어준다.

내가 원하는 위치, 크기를 디자인하기 위해서는 원래 태그들이 가지고 있는 속성들을

모두 초기화해주는 것이 좋다.

html의 모든 css 속성을 초기화하기 위해 style태그에

* {

padding : 0px;

margin : 0px;

}

을 지정해놓자.

모든 패딩과 마진이 사라지고 따닥따닥 붙어있는 것을 볼 수 있다.

검색이라고 적힌 버튼에 우클릭하여 검사를 눌러보면

패딩과 마진이 모두 빠지고 border가 4면에 2씩 남아있는 것을 볼 수 있다.

button이 가지고 있는 고유한 속성인데

만약 저 버튼의 높이를 50px로 주면

자동으로 border의 두께 4를 빼고 버튼의 순수 높이가 46px로 바뀐 것을 볼 수 있다.

이것도 css에서 설정이 가능하다.

box-sizing : border-box;

border와 박스 사이즈까지 합쳐서 50px

box-sizing : content-box;

border 빼고 순 박스 크기가 50px

border-box를 사용하는 것이 내가 생각하는 사이즈대로 나오고 조절하기 편할 것이다.

이제 버튼을 예쁘게 꾸며볼 것이다.

color: ;

글자 색깔 바꾸기

font-size: ;

글자 크기 바꾸기

font-weight: ;

글자 굵기 조절

box-shadow: [좌우 위치] [상하 위치] [흐려짐 정도] [그림자 크기] [색상];

박스 그림자 설정

두 번째 버튼을 보면 구글의 이미지가 들어가 있다.

input 태그에는 이미지를 삽입할 수 없다.

그래서 다른 태그인 <button></button> 태그를 요즘은 더 많이 사용한다.

input의 button과 같은 기능을 하지만 value를 태그 사이에 넣을 수 있기 때문에

활용도가 더 좋다.

button태그 사이에 img태그를 넣는 것도 좋지만

svg를 넣는 것이 훨씬 더 좋다.

SVG(Scalable Vector Graphics) : 2차원 벡터 그래픽을 서술하는 마크업 언어

svg 이미지와 그 동작 방식은 xml 텍스트 파일로 정의한다.

따라서 검색, 색인, 스크립트 적용 등이 가능하며, 그래픽 도구 외에도

아무 텍스트 편집기로 생성 및 편집이 가능하다.

쉽게 말해 글자로 그려진 그림이라는 말이다.

수학적으로 이미지를 만들어낸다.

글자처럼 사용된다.

svg는 벡터 이미지만 만들 수 있다.

벡터 이미지는 무엇일까?

벡터 이미지는 점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식이다.

아주 단순한 구조이고, 단일 색상으로 이루어진 아이콘과 같은 예가 있다.

그 특성상 이미지의 크기를 늘리고 줄여도 손상되지 않는 장점이 있다.

일반 이미지는 크기를 줄이고 키울 때 화질이 달라지지만 svg는 전혀 손상되지 않는다.

또한 일반 이미지는 다운로드를 하여야 하지만 svg는 글자로 인식되기 때문에

다운로드할 필요가 없다.

또한 우리는 svg로 그림을 만드는 방법은 전혀 몰라도 된다.

우리는 크기도 모양도 디자이너들이 정해주는 대로 받으면

그것으로 프로그래밍만 하면 될 일이다!

button태그 안에 svg태그를 넣어 사진을 추가해주고

예쁘게 꾸미다 보니

사진이 잘리는 것을 확인할 수 있다.

이때 svg 태그에 걸어줄 수 있는 css 속성이 있다.

바로 overflow라는 속성이다.

overflow : visible;

잘리고 넘어가는 사진의 부분도 보이게끔 svg를 설정하는 것이다.

반대로 overflow : hidden;이라고 하면 안 보이게 된다.

이렇게 완성되었다.

<!DOCTYPE html>
<html>

<head>

    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        .m_btn_search {
            height: 45px;
            width: 70px;
            background-color: rgb(255, 56, 92);
            color: white;
            border: 0px;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 700px;
        }

        .m_btn_google {
            background-color: white;
            width: 400px;
            height: 45px;
            padding: 10px 100px;
            border-radius: 6px;
            margin: 10px 0;
            font-weight: 900;
            font-size: 15px;
        }

        svg {
            overflow: visible;
        }

        .m_btn_shadow {
            height: 40px;
            width: 70px;
            background-color: rgb(255, 56, 92);
            color: white;
            border: 0px;
            border-radius: 6px;
            box-shadow: 5px 5px gray;
            font-weight: 700px;
        }
    </style>
</head>

<body>
    <h1>인풋 디자인</h1>
    <hr />
    <input class="m_btn_search" type="button" value="검색" /><br />
    <button class="m_btn_google">
        <svg viewBox="0 -3 18 18" role="presentation" aria-hidden="true" focusable="false"
            style="height: 18px; width: 18px; display: inline-block;">
            <g fill="none" fill-rule="evenodd">
                <path
                    d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
                    fill="#EA4335"></path>
                <path
                    d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z"
                    fill="#4285F4"></path>
                <path
                    d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
                    fill="#FBBC05"></path>
                <path
                    d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
                    fill="#34A853"></path>
                <path d="M0 0h18v18H0V0z"></path>
            </g>
        </svg>
        구글 계정으로 로그인
    </button><br />
    <input class="m_btn_shadow" type="button" value="버튼" />
</body>

</html>

css 속성을 html 파일에 같이 적는 것은

코드도 지저분하고 복잡해질 뿐더러 재활용성이 낮아진다.

지난 시간에 했던 것처럼 새로 style.css파일을 만들어 css를 옮겨주고

html 파일에는 헤더에

이렇게 하면 버튼의 css가 필요한 다른 html 파일에도 적용해줄 수 있고

재활용이 가능해진다.

하나의 버튼 css를 디자인이라고 하고

여러 가지 디자인이 반복되고 모여 만들어진 것을 컴포넌트라고 한다.

컴포넌트(Component) : 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈