본문 바로가기
Develop Note

INPUT 태그 스타일(속성)

by Review Note 2017. 5. 24.


INPUT 태그 스타일(속성)


항상 까먹고 검색을 하게 되서 나름 자주 사용한 것만 정리해 봅니다.



1. readonly


db통신을 통해 불러온 값을 보여주기만 하고, 수정이 불가능한 상태


<input type="text" readonly="readonly">

<input type="text" readonly>

2. disabled


readonly와 다르게 사용자로 하여금 사용 불가능한 상태를 보여줌



<input type="text" disabled="disabled">

<input type="text" disabled>

2. border


input 박스의 선색을 변경하는 방법


2가지 방법이 있습니다. input 태그 안에서 스타일을 지정하는 방법과 별도로 id와 같은 선택자로 css style을 

부여할 수 있습니다.


1. <input type="text" style="border: 1px solid red;">


이와 같이 태그안에 style 속성에 바로 부여하는 방법


2. <input type="text" class="선택자">


처럼 작성 후 <head>태그 사이에 <style>태그를 생성, <style> </style> 이 사이에 

선택자{ border : 1px solid red; } 로 작성하면 적용

3. placeholder


input박스의 사용 용도를 설명해 줄 수 있다


<input type="text">

<input type="text" placeholder="안녕하세요">

4. border-radius


input 박스의 모서리를 둥글게


선색을 변경하는 것과 마찬가지로 스타일을 적용하는 방법은 2가지 방법이 있습니다. 


1. <input type="text" style="border-radius : 10px;">


이와 같이 태그안에 style 속성에 바로 부여하는 방법


2. <input type="text" class="선택자">


처럼 작성 후 <head>태그 사이에 <style>태그를 생성, <style> </style> 이 사이에 

선택자{ border-radius : 10px; } 로 작성하면 적용






blog 승제노트






↓ 공감, 댓글 부탁드려요 ↓

'Develop Note' 카테고리의 다른 글

Java jdk 설치 방법  (0) 2017.05.30
이클립스(Eclipse) 설치 방법  (5) 2017.05.29
CSS 선택자 종류와 사용법  (2) 2017.05.27
CSS 적용하는 방법 3가지  (5) 2017.05.26
윈도우10 Java 환경변수 설정  (9) 2017.05.24

댓글