앱 만들기/HTML5 study59

• 

  input type="week" 주 제한 하기 input type="week"의 min과 max 속성을 사용하면 입력받을 수 있는 주를 제한할 수 있습니다. 위 결과를 만드는 코드를 살펴보겠습니다. 주차: id 와 name 은 해당 입력필드를 구분하기 위한 식별 자로 사용 됩니다. min 속성은 입력 받을 수 있는 시작 주를 의미합니다. max는 마지막 주입니다. 위 예제에서는 2주~7주 사이만 입력받도록 정의되어 있습니다. 주의 사항은 W02, W07 등의 표기 방식을 잘 준수해야 달력에 잘 적용이 됩니다. 추가로, week 역시 step 속성을 사용하면 한주가 아닌 여러 주를 건너뛰어 입력받을 수 있습니다. input type="week" 에서 min 과 max 를 사용하여 입력 받을 수 있는 주 를 컨트롤 해보았습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 4. 22.

• 

  파일 첨부 form 파일을 업로드하는 태그를 만들어 봅니다. 결과는 하기와 같습니다. 웹 브라우저에서 파일선택을 클릭하면 탐색기 창이 열리는 구조입니다. 서버 프로그램은 구현하지 않은 상태이기에 프로트 단 즉 화면만 구성해봅니다. 파일 업로드 코드에서 주의 깊게 봐야 할 부분은 하기와 같습니다. input type="file" 파일 업로드 기능을 추가합니다. name 해당 폼을 식별할 수 있는 이름값 속성입니다. 그 외, submit와 reset 속성을 추가하여 전송, 취소 기능 버튼을 만들었습니다. 브라우저에서 파일 첨부 기능 예제를 만들어 보았습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 4. 20.

• 

  input type="button" 만들기 태그가 아니더라도 간단한 버튼의 경우는 속성으로 만들 수 있습니다. 이렇게 만들어진 버튼은 자바스크립트 코드를 호출하여 동작을 실행할 수 있습니다. 예를 들자면 하기와 같습니다. 1. Click+me라는 버튼을 만들고... 2. 버튼을 클릭하면 자바스크립트 함수에 의해서 팝업창이 호출된다. 위와 같이 간단한 동작에서는 을 활용해 보면 좋겠습니다. 그럼 예제를 만들어 볼까요? 속성을 줍니다. value는 버튼에 표기될 내용입니다. onclick 은 버튼이 클릭되었을 때, 동작을 나타내는 속성을 의미하며 여기서는 자바스크립트 의 alert() 함수를 호출하고 있습니다. input type="button" 예제를 만들어 보았습니다. 감사합니다. 자바스크립트 팝업창 함.. 앱 만들기/HTML5 study 2023. 4. 18.

• 

  submit 이미지 버튼 만들기 submit 기능을 가진 이미지 버튼 만들기입니다. input type="image"라고 속성을 설정하면 submit (전송) 기능을 가진 이미지 버튼을 추가할 수 있습니다. 그럼 예제를 만들어 보겠습니다. 전화번호 입력 위 코드를 통해서 결과가 만들어지는데요. 여기서 input type="image"라는 속성이 가장 중요하겠습니다. 그 외 속성들은... src "이미지 경로" alt 이미지가 없을 때 대체 텍스트. name 서버 전송 시 해당 이미지 버튼의 이름 width 속성을 사용해서 크기를 조절할 수 있겠습니다. 기본적으로 image 태그와 공통된 모습을 갖추고 있네요. submit (전송) 기능을 텍스트로 표기해도 되지만 예쁘게 이미지로 표현하고 싶다면 input type="image" 속성 값.. 앱 만들기/HTML5 study 2023. 4. 17.

• 

  input type="month" 월 제한 하기 input type="month"에서도 입력받을 수 있는 월 을 제한할 수 있습니다. 결과 화면 부터 확인하겠습니다. 4월 부터 8월까지만 선택할 수 있고, 7월이 기본적으로 선택된 달 입니다. 위 화면을 코드로 표현해 봅니다. 만료일: id 와 name 은 입력란을 구분할 수 있는 속성 값입니다. min : 입력 가능한 월을 의미 합니다. max : 입력 가능한 마지막 월 을 뜻합니다. value : 기본으로 보여지는 월 입니다. 입력시 4월달이면 그냥 4가 아니라 04 로 입력함을 주의해야 합니다. 월 앞에 꼭 0을 붙여주어야 합니다. 추가로 월 사이에 간격을 두어 입력받는 월을 제어 할 수도 있습니다. step 속성을 주면 가능 합니다. 위 예제에서는 2개월씩 건너서 입력 받을 수 있도록 구현 되었.. 앱 만들기/HTML5 study 2023. 4. 15.

• 

  input type="date"날짜 제한 하기 input type="date"에서 입력받을 수 있는 날짜를 제한할 수 있습니다. 먼저 화면 부터 확인해 보겠습니다. 4월 1일부터~4월 15일 까지만 입력을 받을 수 있도록 설정을 하였습니다. 예제는 하기와 같습니다. Input type 날짜 예제 가입기한: id 와 name 은 입력란을 구분할 수 있는 속성 값입니다. min : 입력 가능한 시작 날짜. max : 입력 가능한 마지막 날짜. value : 기본으로 보이는 날짜. min과 max 속성을 사용하면 입력받는 날짜를 제어할 수 있습니다. 여러 상황에 맞게 사용할 수 있는 폼 속성입니다. 추가로 날짜 사이에 간격을 두어 입력받을 수 있도록 설정할 수 도 있습니다. step 속성을 활용하면 날짜 사이 입력 간격이 조정됩니다. step 속성이 없을.. 앱 만들기/HTML5 study 2023. 4. 14.

• 

  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.