[HTML/CSS] 텍스트박스 꾸미기(기초)

 

 

HTML 입력태그에서 텍스트 타입 입력 형태에 대하여 알아보고, 간단하게 꾸미는 방법에 대하여 알아 보도록 하겠습니다.

모양을 꾸미는 방법과 마우스 오버 또는 포커스 유/무에 따른 스타일 적용법에 대하여 알아 보도록 하겠습니다. 

 

  입력태그 텍스트타입 사용법

 

 <input type="text">

 

 

  꾸미기 전 기본형태

 

  테두리 꾸미기

<style>    input {       border: 1px solid #0054FF;       border-radius: 0px;   } </style>

- border : 선의두께 선의종류(solid:실선) 선색상

- border-radius : 모서리 둥근정도

- border-top-left-radius = 왼쪽 상단 부분의 모서리만 설정 함.

 

  텍스트박스 크기 설정

<style>    input {       border: 1px solid #0054FF;       border-radius: 0px;       height: 30px;       width: 300px;   } </style>

 

  글자 설정

<style>    input {       border: 1px solid #0054FF;       border-radius: 0px;       height: 30px;       width: 300px;       font-size: 12pt;       text-align: right;       color: #63717f;   } </style>

- font-size : 폰트크기

- text-align : 텍스트위치 

- color : 텍스트색

 

  바탕색 및 여백설정 설정

<style>    input {       기존적용 코드 생략       background: #EAEAEA;       padding:7px;       box-sizing: border-box;       -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;        } </style>

- background : 배경색

- padding : 안쪽 여백

- box-sizing : 텍스트박스 사이즈 설정 기준

 

  바탕색 및 여백설정 설정

마우스가 텍스트박스 위에 위치하거나, 포커스가 텍스트박스 안에 위치 할 경우 배경색을 하얀색으로 변경 시킵니다. 

<style>    input {       기존적용 코드 생략    }      input:hover, input:focus{     background: #ffffff;   } </style>

- input:hover : 텍스트박스 위로 마우스가 위치 할 경우 적용되는 스타일

- input:focus : 텍스트박스 안에 포커스가 위치 할 경우 적용되는 스타일

- background : 배경색 지정