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