반응형 앱 만들기400 Input type 주 입력 이번 시간에는 input type="week"를 사용하여 주를 입력해보겠습니다. 결과는 하기와 같습니다. 예제 코드입니다. Input type 날짜 예제 주차: 속성 id와 name 은 이 입력란을 식별하는 데 사용합니다. 결과 화면에서 달력 아이콘을 클릭하면 현재 주 차가 기본적으로 선택됩니다. 몇 년도 몇 주차임을 쉽게 알 수 있습니다. 주차를 선택하면 연도와 몇 주차가 입력됩니다. input type="week"는 연도와 몇 주차 입력을 하기 위한 좋은 인풋 폼입니다. 이상으로 총 3가지 type ="date | month | week"에 대한 예제를 만들어 보았습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 4. 13. Input type 연도, 월 입력 지난 시간에 이어 오늘은 연도 와 월을 입력할 수 있는 폼을 만들어 봅니다. 예제 코드 입니다. Input type 날짜 예제 만료일: 속성 id와 name 은 이 입력란을 식별하는 데 사용합니다. 결과 화면에서 달력 아이콘을 클릭하면 현재 달이 기본으로 선택됩니다. 손쉽게 연도와 월을 입력할 수 있는 타입니다. 원하는 달을 선택하면 연도와 함께 표시가 됩니다. 연도와 달 만 입력하기를 원할 때는 input type="month"를 사용하면 됩니다. 감사합니다. 앱 만들기/HTML5 study 2023. 4. 12. Input type 날짜 입력 날짜를 입력받는 form 은 input type="date | month | week" 이렇게 3가지 타입이 있습니다. 오늘은 date 예제를 만들어 봅니다. Input type 날짜 예제 생년월일: 속성 id 와 name 은 이 입력란을 식별하는데 사용합니다. 결과는 하기와 같습니다. 마우스 커서로 달력 아이콘을 클릭하면 달력이 표시됩니다. 달력에서 자신이 원하는 날짜를 선택하면, 해당 날짜가 입력 필드값에 표시 됩니다. input type="date" 는 연도/월/날짜 를 입력 받을 수 있는 인풋 폼 입니다. 상황에 맞게 date type을 잘 활용하면 좋겠죠. 감사합니다. input type="date"날짜 제한 하기 input type="date"에서 입력받을 수 있는 날짜를 제한할 수 있습니다... 앱 만들기/HTML5 study 2023. 4. 11. Input type="range" 예제 Input type="range" 예제입니다. 슬라이드 막대바가 나타나서 손쉽게 숫자를 입력할 수 있는 form 타입입니다. 위 결과 화면을 만들어 봅니다. 밝기: type ="range"는 슬라이드 바가 있는 숫자 입력 폼을 설정합니다. min 속성은 입력할 수 있는 최소값. max 속성은 입력할 수 있는 최댓값을 지정합니다. value는 초기값을 지정합니다. 슬라이드는 좌우로 움직일 때마다 1씩 값이 변화합니다. form 요소 중 Input type="range"에 대해서 알아보았습니다. 감사합니다. https://soo0100.tistory.com/2193 Input type="number" 예제 Input type="number" 예제입니다. 상하 스핀박스에 의해서 손쉽게 숫자를 입력할 수 있는 .. 앱 만들기/HTML5 study 2023. 4. 10. Input type="number" 예제 Input type="number" 예제입니다. 상하 스핀박스에 의해서 손쉽게 숫자를 입력할 수 있는 form 타입입니다. 스핀박스는 마우스를 필드에 위치시키면 자동으로 나타납니다. 위 결과물은 하기 코드로 작성이 가능합니다. Input type="number" 예제 수량: type ="number" 숫자 입력 폼을 설정합니다. min 속성은 입력할 수 있는 최소값. max 속성은 입력할 수 있는 최댓값을 지정합니다. step 속성은 사용자가 입력할 수 있는 숫자의 증가 단위를 설정합니다. value는 초기값을 지정합니다. form 요소 중 Input type="number"에 대해서 알아보았습니다. 감사합니다. https://soo0100.tistory.com/2194 Input type="range".. 앱 만들기/HTML5 study 2023. 4. 9. Input 텍스트 필드 속성 텍스트 인풋 타입의 태그에서 글자수 제한과 기본 입력 값 필드 속성에 대해서 알아봅니다. 아이디 패스워드 size : 필드의 크기를 의미하며, 화면에 보일 글자 개수를 뜻합니다. maxlength : 최대로 입력할 수 있는 글자의 수입니다. 위 예제에서는 20자 이상은 입력하지 못합니다. value : 기본적으로 화면에 보일 글자를 의미합니다. 위 코드를 실행 시 value 값에 의해서 기본 텍스트가 입력됩니다. Input 텍스트 필드 속성에 대해서 알아보았습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 4. 8. div 태그 란? dive 태그를 Chat GPT에게 문의해 보았습니다. 하기처럼 완벽한 답변을 얻을 수 있었습니다. 태그는 division의 약자로 '구분하다'라는 뜻입니다. div 태그는 눈으로 구별되는 효과는 없지만, 코드 내부상으로는 특정 태그들을 하나의 단위로 묶어서 관리할 수 있게 해 줍니다. 해당 코드를 실행하면 하기와 같습니다. 와 태그 이외에는 가시적인 효과는 없으나, 해당 태그들을 구조적으로 분리하여 특정 기능 및 효과를 줄수도 있습니다. 이곳은 무엇인가요? 아무것도 아니에요! 단지 구역을 구분하는 컨테이너 역할을 할 뿐입니다. 두번째 구분 영역 입니다. 아무것도 아니에요! 단지 구역을 구분하는 컨테이너 역할을 할 뿐입니다. 2개의 div 태그를 사용 시에는 위처럼 id 속성을 사용하여 각각의 영역을 구.. 앱 만들기/HTML5 study 2023. 3. 17. 전송,리셋 버튼 만들기 웹페이지에서 전송과 취소 버튼을 만들어 봅니다. 이름과 이메일 입력을 서버로 전송하기 위해서는 최종적으로 보내기(전송) 기능이 필요합니다. 그리고 잘 못 입력했을 경우 취소(리셋) 버튼도 필요합니다. 전송 과 취소 버튼을 만들어 봅니다. 이름: 이메일: input type = "submit" 속성은 전송 기능. 전송된 정보는 form 태그의 action 속성에서 지정한 서버 프로그램에서 실행이 됩니다. input type="reset" 속성은 취소 기능을 만들어 줍니다. 즉, 사용자가 입력한 내용을 모두 지우게 됩니다. value : 속성을 이용하여 버튼에 표시될 내용을 표현 합니다. 즉, 버튼 이름이 되겠습니다. 보내기 및 취소 기능을 하는 input type 속성 submit 와 reset 을 확인해.. 앱 만들기/HTML5 study 2023. 3. 16. 체크박스 예제 HTML 웹문서에서 체크박스는 사용자 입력을 받기 위한 유용한 폼입니다. 체크 박스를 만들기 위한 예제를 정리해 봅니다. 좋아하는 과일 고르기 사과 바나나 수박 귤 해당 예제를 실행하면, 하기와 같은 체크박스 폼을 얻을 수 있습니다. 체크박스는 여러 개의 항목을 선택할 수 있다는 점에서 라디오 버튼과는 차이점을 가집니다. 체크박스를 만들기 위해서는 속성이 가장 중요하며, value 속성이 꼭 들어가야 합니다. value : 서버에 실제 전송되는 값을 나타냄. 추가로, checked라는 속성을 설정하면 기본적으로 체크하고 싶은 항목을 선택할 수 있습니다. 사과 바나나 수박 귤 웹문서에서 체크박스를 표기할 수 있는 태그를 확인해 보았습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 3. 15. 라디오 버튼 예제 사용자는 위 폼에서 하나의 과일만 선택할 수 있습니다. 이것을 라디오 버튼이라고 하며, 선택된 값은 서버로 전송되게 됩니다. 위 결과에 대한 예제를 만들어 봅니다. 좋아하는 과일 고르기 사과 바나나 수박 귤 라디오 버튼 역시 폼이기에 태그 사이에 위치를 합니다. 라디어 버튼을 만들기 위해서는 하기 속성이 중요합니다. 태그의 type ="radio" 라고 설정하기 name : 여러 개의 라디오 버튼 중 하나만 선택하기 위해서 동일한 값을 설정함. (예:fruit) value : 서버로 전송되는 실제 해당 라디오 버튼의 값. checked 속성을 추가하면 디폴트로 해당 라디오 버튼이 선택되어 나옵니다. 수박 사용자에게 입력받는 폼 중 라디오 버튼에 대해서 알아보았습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 3. 14. 이전 1 ··· 10 11 12 13 14 15 16 ··· 40 다음 반응형