CSS Input속성
이번글에는 CSS의 Input 속성에 관해서 알아보겠습니다.
이 Input은 type에 따라서 종류가 엄청 달라진다.
우선 제가 쓰려고 하는 radio type이 어떤 것인지 보여드리겠습니다.
html에 코드를 이렇게 작성을 해주시면 어디서 많이 본 것이 웹페이지에 뜨는 걸 확인할 수 있습니다.
name을 다 동일하게 해주지 않으면 여러 개를 선택할 수 있게 됩니다.
type의 종류가 엄청 많으니 이것 저것 다 보시고 필요한 부분을 더 검색을 하셔서 사용을 하시면 될 것 같다.
number부분은 숫자를 입력하면 아래 버튼을 눌러 숫자의 크기를 줄일 수도 있고 키울 수도 있는 텍스트 창이 생긴다.
button은 추가로 다른 작업을 해줘야 버튼의 기능을 할 것 같다.
color는 클릭을 하니까 색깔을 선택할 수 있는 창이 하나 더 뜬다.
input과 label을 조합하여 선택을 할 수도 있습니다.
그 방법에는 2가지가 있습니다.
첫번째로는 label 안에 input을 넣어 감싸는 것입니다.
이렇게 했을 경우에 1.선택이란 text를 클릭을 해도 radio 타입에 체크가 되게 됩니다.
두번째 방법으로는 label로 input을 지정을 하는 것입니다.
for의 속성과 input의 id 값이 일치하면 해당 input인 radio를 체크하게 됩니다..
코드는 p인데 왜 체크하는 것이 단락이 나눠지지 않고 이어져 있지 라는 의문이 드실 수도 있으신데
티스토리의 html에서 label을 사용을 하니까 잘 나눠지지 않네요... 방법을 더 알아봐야 할 것 같습니다.
다음 글에는 이 input 속성을 이용해 슬라이드를 만드는 예제를 해보겠습니다.