앱 만들기/HTML5 study59

• 

  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.

• 

  <fieldset> 태그 예제 특정 정보를 입력받는 폼을 하나의 구성단위로 모아서 네모박스 영역으로 표기해주는 태그가 바로 fieldset입니다. 이렇게 웹문서에서 표기가 되면 각 폼별로 정보를 손쉽게 구별 할 수 있습니다. 하기는 로그인 정보를 이루는 입력필드 와 개인정보 입력필드를 구분하고 있습니다. 해당 예제를 살펴봅니다. Fieldset 테스트 입니다 로그인 정보 아이디 비밀번호 개인 정보 이메일 전화번호 : 필드셋 태그 입니다. : 필드셋의 제목을 나타냅니다. 삭제시 필드셋의 기본 네모박스만 표기 됩니다. 필드셋 태그는 기본 하기 구성으로 이루어 집니다. 필드셋 제목 태그 였습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 3. 13.

• 

  <form> 태그 예제 브라우저에서 사용자의 입력을 받을 수 있는 양식을 만드는 태그를 form이라고 합니다. form의 형태는 로그인 화면 및 회원 가입 화면등의 입력받을 수 있는 화면구성을 의미합니다. 로그인 화면을 만드는 form 예제를 살펴봅니다. 위 입력화면을 만들기 위해서는 기본적으로 태그를 사용하고, 태그 안에 세부 폼 요소들을 기술합니다. 한줄짜리 텍스트 입력필드를 만듭니다. 한줄짜리 비밀번호 입력필드를 만듭니다. 데이터 전송 버튼을 만듭니다. value 속성은 버튼의 이름을 정합니다. 해당 속성을 설정하지 않으면 "제출"로 표기됩니다. Form 태그 테스트 입니다 아이디 비밀번호 각각의 폼 요소에는 lable 을 붙일 수 있습니다. 레이블은 입력란을 표기하는 텍스트를 의미하며, 위 예제에서는 '아이디' 와 '비.. 앱 만들기/HTML5 study 2023. 3. 12.

• 

  <Object> 태그 예제 Object 태그는 이미지, 비디오, PDF 파일 등의 멀티미디어 파일들을 브라우저에 표시할 수 있습니다. HTML5에서는 이미지는 태그, 비디오는 태그를 사용하지만, H5 이전에는 Object 태그가 이러한 미디어 파일을 오픈하는 역할을 담당하였습니다. 비디오 열기 pdf파일 열기 태그의 기본 사용법은 하기와 같습니다. data 속성 : 오픈할 미디어파일의 경로를 지정합니다. 미디어 파일들의 경로를 별도로 지정하여 관리해 주는 것이 효율적입니다. width, height : 너비와 높이를 px 고정값과 % 비율로 지정할 수 있으며, 둘 중 하나만 설정 시 크기는 해당값을 기준으로 자동 설정 됩니다. 위 예제에 대한 결과입니다. 감사합니다. Object 태그를 사용하여 이미지, 비디오, 파일을 열어 보았.. 앱 만들기/HTML5 study 2023. 3. 10.

• 

  html 하이퍼링크 예제 웹 문서에서 특정 텍스트 나 이미지 등의 링크를 누르면 다른 페이지로 이동하는 기능을 하이퍼 링크 라고 합니다. html 에서 지원하는 하이퍼링크(hyperlink) 만드는 방법입니다. 하이퍼링크 태그 예제 입니다. 하이퍼링크 테스트하기 하기는 결과 값입니다. 하이퍼링크를 만들기 위해서는, 하기 태그가 중요합니다. 하이퍼링크 테스트하기 : 하이퍼링크를 동작시키는 태그입니다. 해당 태그로 텍스트 나 이미지 등을 둘러싸면 각각 텍스트 하이퍼링크, 이미지 하이퍼링크 가 됩니다. 참고로, a는 anchor의 약자로 다프 이라는 뜻입니다. href 속성 : href 뒤에 이동될 웹 페이지 url를 기재합니다. target 속성 : 새로운 웹페이지에서 하이퍼링크가 열리도록 설정합니다. target 속성이 없으면 기.. 앱 만들기/HTML5 study 2023. 3. 9.