Html Form에 CSS를 이용한 디자인 적용하기

이전에 html에서 form을 이용해서 다양한 입력형태를 만들어본 경험을 해보았을 것입니다. 하지만 아래와 같이 기본적으로 적용되는 각 input 태그에 대한 입력파트는 크기도 너무 작고 웹 페이지에서 그대로 사용하기에는 디자인 적인 부분에서도 조금 무리가 있습니다. 그런데 html 태그들을 css를 이용해서 각 태그들의 스타일을 지정했던 것처럼 input 태그에도 css를 사용함으로서 사용자가 원하는 형태로 디자인할 수 있습니다.

 

여기서 기억해야할 점은 기존에 공부하고 사용해보았던 css 속성 및 속성값들을 그대로 input 태그에 적용할 수 있다는 점 입니다.

 

지금부터 css를 이용해서 input 태그를 디자인하는 간단한 몇가지 예시들을 살펴보도록 하겠습니다.

 

width, height 속성

아래와 같이 간단한 input 태그를 작성한 코드를 실행해보면 다음과 같습니다.

<h1>input tag 디자인</h1>
 
<form action="form_ok.php" method="POST">
	<input id="input1" type="text" placeholder="입력해주세요!" />
    <input id="input2" type="submit" />
</form>

웹 브라우져 상에서 출력한 모습

출력된 모습을 보면 사용하는데 문제는 없지만 일단 크기가 너무 작다고 느껴집니다. 이러한 경우 우리는 width, height 속성을 사용해서 input태그의 크기를 지정할 수 있습니다. 속성 및 속성값을 사용하는 방법은 이전에 CSS를 공부하면서 사용했던 방법과 동일합니다. 기존에 사용하던 것과 동일하게 width, height 속성을 사용해서 input 태그의 크기를 지정한 코드와 결과는 아래와 같습니다.

<style>
    #input1 {
    	width: 300px;
        height: 50px;
    }
    #input2 {
    	width: 100px;
        height: 55px;
    }
</style>

웹 브라우져 상에서 출력한 모습

 

 

background-color 및 color

이번에는 input 태그에 배경색상을 적용해보도록 하겠습니다. background-color 속성 역시 기존과 동일한 방법으로 사용하면 됩니다. 아래의 코드에 다음과 같이 css를 적용함으로서 해당 input 파트와 submit 버튼의 배경색상을 설정할 수 있게 됩니다. 마찬가지로 color 속성도 동일하게 사용해서 내부의 텍스트 색상을 변경하는 데 사용할 수 있습니다.

<h1>input tag 디자인</h1>
 
<form action="form_ok.php" method="POST">
    <input id="input1" type="text" placeholder="입력해주세요!" />
    <input id="input2" type="submit" />
</form>

(html 코드의 경우 이전예시와 동일한 코드를 사용합니다.)

<style>
    #input1 {
    	width: 300px;
        height: 50px;
        background-color: tomato;
        color: white;
    }
    #input2 {
    	width: 100px;
        height: 55px;
        background-color: gold;
        color: white;
    }
</style>

background-color, color 속성에 대한 값들이 적용된 모습

 

border, boder-radius

이번에는 border, border-radius 속성을 이용해서 input 태그의 태두리 부분을 보기 좋게 디자인 해보도록 하겠습니다.

<h1>input tag 디자인</h1>
 
<form action="form_ok.php" method="POST">
    <input id="input1" type="text" placeholder="입력해주세요!" />
    <input id="input2" type="submit" />
</form>

(html 코드의 경우 이전예시와 동일한 코드를 사용합니다.)

<style>
    #input1 {
    	width: 300px;
        height: 50px;
        background-color: tomato;
        border: 3px solid black;
        border-radius: 5px;
    }
    #input2 {
    	width: 100px;
        height: 55px;
        background-color: gold;
        border: 3px solid black;
        border-radius: 5px;
    }
</style>

 

웹 브라우져를 통해서 출력된 모습

그러면 위와 같이 border를 통해서 테두리에 대한 효과를 적용하고 border-radius를 통해서 모서리를 둥글게 만들어서 input 태그를 디자인 할 수 있습니다. 그리고 또한 border와 관련된 다양한 속성들을 활용함으로서 다음과 같은 응용또한 가능합니다.

<style>
    #input1 {
    	width: 300px;
        height: 50px;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom : 3px solid black;
    }
    #input2 {
    	width: 100px;
        height: 55px;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom : 3px solid black;
    }
</style>

웹 브라우져를 통해서 출력한 모습

정말 간단한 몇가지 예시만을 살펴보았지만 실제로 굉장히 많은 종류의 css 속성들을 input 태그 디자인에 그대로 사용할 수 있습니다. 그렇기 때문에 form을 이용한 웹 페이지를 제작할 때 사용자가 원하는 형태로 페이지를 제작하고 이를 활용하는 것이 가능할 것 입니다.