텍스트박스 꾸미기

 

 

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 : 배경색 지정

Posted by 행복한 유유로그

댓글을 달아 주세요

  1. 공수래공수거 2018.06.08 07:44 신고  댓글주소  수정/삭제  댓글쓰기

    예제를 표시해 주시니 이해가 빠릅니다^^



티스토리 툴바