반응형 앱 만들기/HTML550 전송,리셋 버튼 만들기 웹페이지에서 전송과 취소 버튼을 만들어 봅니다. 이름과 이메일 입력을 서버로 전송하기 위해서는 최종적으로 보내기(전송) 기능이 필요합니다. 그리고 잘 못 입력했을 경우 취소(리셋) 버튼도 필요합니다. 전송 과 취소 버튼을 만들어 봅니다. 이름: 이메일: input type = "submit" 속성은 전송 기능. 전송된 정보는 form 태그의 action 속성에서 지정한 서버 프로그램에서 실행이 됩니다. input type="reset" 속성은 취소 기능을 만들어 줍니다. 즉, 사용자가 입력한 내용을 모두 지우게 됩니다. value : 속성을 이용하여 버튼에 표시될 내용을 표현 합니다. 즉, 버튼 이름이 되겠습니다. 보내기 및 취소 기능을 하는 input type 속성 submit 와 reset 을 확인해.. 앱 만들기/HTML5 2023. 3. 16. 체크박스 예제 HTML 웹문서에서 체크박스는 사용자 입력을 받기 위한 유용한 폼입니다. 체크 박스를 만들기 위한 예제를 정리해 봅니다. 좋아하는 과일 고르기 사과 바나나 수박 귤 해당 예제를 실행하면, 하기와 같은 체크박스 폼을 얻을 수 있습니다. 체크박스는 여러 개의 항목을 선택할 수 있다는 점에서 라디오 버튼과는 차이점을 가집니다. 체크박스를 만들기 위해서는 속성이 가장 중요하며, value 속성이 꼭 들어가야 합니다. value : 서버에 실제 전송되는 값을 나타냄. 추가로, checked라는 속성을 설정하면 기본적으로 체크하고 싶은 항목을 선택할 수 있습니다. 사과 바나나 수박 귤 웹문서에서 체크박스를 표기할 수 있는 태그를 확인해 보았습니다. 감사합니다. 앱 만들기/HTML5 2023. 3. 15. 라디오 버튼 예제 사용자는 위 폼에서 하나의 과일만 선택할 수 있습니다. 이것을 라디오 버튼이라고 하며, 선택된 값은 서버로 전송되게 됩니다. 위 결과에 대한 예제를 만들어 봅니다. 좋아하는 과일 고르기 사과 바나나 수박 귤 라디오 버튼 역시 폼이기에 태그 사이에 위치를 합니다. 라디어 버튼을 만들기 위해서는 하기 속성이 중요합니다. 태그의 type ="radio" 라고 설정하기 name : 여러 개의 라디오 버튼 중 하나만 선택하기 위해서 동일한 값을 설정함. (예:fruit) value : 서버로 전송되는 실제 해당 라디오 버튼의 값. checked 속성을 추가하면 디폴트로 해당 라디오 버튼이 선택되어 나옵니다. 수박 사용자에게 입력받는 폼 중 라디오 버튼에 대해서 알아보았습니다. 감사합니다. 앱 만들기/HTML5 2023. 3. 14. <fieldset> 태그 예제 특정 정보를 입력받는 폼을 하나의 구성단위로 모아서 네모박스 영역으로 표기해주는 태그가 바로 fieldset입니다. 이렇게 웹문서에서 표기가 되면 각 폼별로 정보를 손쉽게 구별 할 수 있습니다. 하기는 로그인 정보를 이루는 입력필드 와 개인정보 입력필드를 구분하고 있습니다. 해당 예제를 살펴봅니다. Fieldset 테스트 입니다 로그인 정보 아이디 비밀번호 개인 정보 이메일 전화번호 : 필드셋 태그 입니다. : 필드셋의 제목을 나타냅니다. 삭제시 필드셋의 기본 네모박스만 표기 됩니다. 필드셋 태그는 기본 하기 구성으로 이루어 집니다. 필드셋 제목 태그 였습니다. 감사합니다. 앱 만들기/HTML5 2023. 3. 13. <form> 태그 예제 브라우저에서 사용자의 입력을 받을 수 있는 양식을 만드는 태그를 form이라고 합니다. form의 형태는 로그인 화면 및 회원 가입 화면등의 입력받을 수 있는 화면구성을 의미합니다. 로그인 화면을 만드는 form 예제를 살펴봅니다. 위 입력화면을 만들기 위해서는 기본적으로 태그를 사용하고, 태그 안에 세부 폼 요소들을 기술합니다. 한줄짜리 텍스트 입력필드를 만듭니다. 한줄짜리 비밀번호 입력필드를 만듭니다. 데이터 전송 버튼을 만듭니다. value 속성은 버튼의 이름을 정합니다. 해당 속성을 설정하지 않으면 "제출"로 표기됩니다. Form 태그 테스트 입니다 아이디 비밀번호 각각의 폼 요소에는 lable 을 붙일 수 있습니다. 레이블은 입력란을 표기하는 텍스트를 의미하며, 위 예제에서는 '아이디' 와 '비.. 앱 만들기/HTML5 2023. 3. 12. <Object> 태그 예제 Object 태그는 이미지, 비디오, PDF 파일 등의 멀티미디어 파일들을 브라우저에 표시할 수 있습니다. HTML5에서는 이미지는 태그, 비디오는 태그를 사용하지만, H5 이전에는 Object 태그가 이러한 미디어 파일을 오픈하는 역할을 담당하였습니다. 비디오 열기 pdf파일 열기 태그의 기본 사용법은 하기와 같습니다. data 속성 : 오픈할 미디어파일의 경로를 지정합니다. 미디어 파일들의 경로를 별도로 지정하여 관리해 주는 것이 효율적입니다. width, height : 너비와 높이를 px 고정값과 % 비율로 지정할 수 있으며, 둘 중 하나만 설정 시 크기는 해당값을 기준으로 자동 설정 됩니다. 위 예제에 대한 결과입니다. 감사합니다. Object 태그를 사용하여 이미지, 비디오, 파일을 열어 보았.. 앱 만들기/HTML5 2023. 3. 10. html 하이퍼링크 예제 웹 문서에서 특정 텍스트 나 이미지 등의 링크를 누르면 다른 페이지로 이동하는 기능을 하이퍼 링크 라고 합니다. html 에서 지원하는 하이퍼링크(hyperlink) 만드는 방법입니다. 하이퍼링크 태그 예제 입니다. 하이퍼링크 테스트하기 하기는 결과 값입니다. 하이퍼링크를 만들기 위해서는, 하기 태그가 중요합니다. 하이퍼링크 테스트하기 : 하이퍼링크를 동작시키는 태그입니다. 해당 태그로 텍스트 나 이미지 등을 둘러싸면 각각 텍스트 하이퍼링크, 이미지 하이퍼링크 가 됩니다. 참고로, a는 anchor의 약자로 다프 이라는 뜻입니다. href 속성 : href 뒤에 이동될 웹 페이지 url를 기재합니다. target 속성 : 새로운 웹페이지에서 하이퍼링크가 열리도록 설정합니다. target 속성이 없으면 기.. 앱 만들기/HTML5 2023. 3. 9. 비디오 태그 예제 HTML 웹문서에서 비디오 재생을 위해서는 비디오 태그를 사용합니다. 비디오 태그 예제를 살펴보겠습니다. 비디오 태그 예제 입니다. 비디오 태그에서 중요한 속성은 하기와 같습니다. src : 비디오 파일의 경로를 지정합니다. (비디오 파일들만 별도로 관리하는 것이 효율적입니다) controls : 컨트롤 바를 보여줍니다. 즉, 컨트롤바로 비디오를 제어할 수 있습니다. width : 비디오 화면의 크기를 설정합니다. 가로 크기만 설정해도 세로는 가로비율에 맞게 조정됩니다. px 고정 크기와 퍼센트로 브라우저 크기 대비 설정이 가능합니다. autoplay : 자동 재생 기능입니다. loop : 반복 재생 기능입니다. 웹 문서의 비디오 재생 태그 였습니다. 감사합니다. 오디오 태그 예제 사운드 재생을 위한 오.. 앱 만들기/HTML5 2023. 3. 7. 오디오 태그 예제 사운드 재생을 위한 오디오 태그 예제입니다. 브라우저에서 사운드 플레이를 위해서는 라는 태그를 사용해야 합니다. 예제를 보겠습니다. 오디오 태그 예제 입니다 태그 중 핵심적인 역할의 속성은 두 가지 압니다. src : 사운드 파일의 위치를 정해줍니다. (일반적으로 폴더를 별도로 만들어서 관리하는 것이 좋습니다) control : 컨트롤 바를 표시 해줍니다. 추가로 하기 속성으로 자동재생 되면서 반복재생되도록 만들 수도 있습니다. autoplay : 자동 재생 loop : 반복 재생 여러 속성이 있겠지만, 사운드 재생을 위해서는 src, control, loop 등만 잘 사용해도 괜찮을 거 같습니다. 감사합니다. 앱 만들기/HTML5 2023. 3. 6. html 표 셀 합치기 예제 표에서 특정 셀 영역을 병합(확장) 하기위해서 사용되는 태그는 과 입니다. 해당 예제를 살펴봅니다. span 이란 한국에서 흔히 말하는 "스판" 으로 잘 늘어나는 신축성 소재에서 사용되는 그 단어가 맞습니다. 즉, colspan 이라는 태그는 colum span 열을 늘인다. row span 행을 늘인다 라는 뜻이기에 병합(확장)한다고 이해할 수 있습니다. 위 표에서 '역사'를 나타내는 두개의 행 셀을 병합(확장)하기 위해서, 태그에 행 을 합치는 rowspan 속성을 사용해서 크기를 설정합니다. '생물'의 경우도 두개의 열 셀을 병합(확장)하기 위해서, colspan 으로 크기를 설정 합니다. 참고로, 합쳐지는 셀들은 주석 및 코드를 삭제해야 합니다. 시간표 세션 월요일 화요일 수요일 목요일 금요일 1.. 앱 만들기/HTML5 2023. 3. 4. 이미지를 표현해주는 태그 예제 이미지를 브라우저에서 불러오기 위해서는 태그를 사용해야 합니다. 태그 예제를 살펴봅니다. 이미지 태그 예제 입니다 이미지 태그 속성 이미지 태그에서 중요한 부분은 2곳 입니다. src : 이미지 경로를 기재 합니다. 로컬 경로 와 온라인 상의 URL 경로도 모두 지원 합니다. alt :대체 테스트를 의미 합니다. 이미지가 나오지 않는 상황에서도 해당 이미지의 정보를 나타내 줄 수 있으며, 시각장애인을 위해 화면 낭독기에서 해당 텍스트를 읽어줍니다. alt 는 필수 속성으로 반드시 기재해주어야 합니다. 이외 width의 경우 이미지 가로사이즈를 지정합니다. 사이즈는 퍼센트(%) 와 고정사이즈 px 로 지정 가능합니다. 퍼센트(%) : 브라우저가 줄어들어도 해당 크기에 맞게 조정이 됩니다 PX : 고정사이즈.. 앱 만들기/HTML5 2023. 3. 3. html 표 만들기 표를 만드는 태그 예제 입니다. 표를 만들기 위해서는 , , , , 태그가 사용됩니다. 각 태그의 의미와 동작은 하기와 같습니다. 표를 정의합니다. table 태그 사이에 표를 이루는 하기 구성요소를 넣어야 합니다. 표의 제목을 표시하며, 생략이 가능합니다. 행을 나타냅니다. (table row) 제목을 나타내는 열을 만듭니다.(table header) 행안에 각각의 열을 나타냅니다. (table data) 해당 태그의 예제를 살펴봅니다. 시간표 세션 월요일 화요일 수요일 목요일 금요일 1교시 역사 국어 체육 영어 과학 2교시 한문 영어 수학 생물 지리 3교시 미술 수학 과학 생물 영어 4교시 음악 한문 체육 수학 과학 예제의 결과 값은 하기와 같습니다. 이상 표를 만드는 table, caption, t.. 앱 만들기/HTML5 2023. 2. 28. 이전 1 2 3 4 5 다음 반응형