Front/HTML10 HTLM 연습문제 회원가입 페이지 만들기 다음과 같은 페이지를 작성하시오 join.html 회원가입 성명 아이디 (영문자+특수문자: 6~10자) 비밀번호 (영문자+숫자+특수문자: 10~20자) 비밀번호 확인 생년월일 년 1 2 3 4 5 6 7 8 0 10 11 12 월 1 2 3 4 5 6 7 8 0 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 일 양력 음력 전화번호 02 031 043 - - 휴대폰번호 000 010 - - 주소 상세 주소 입력 성별 남 여 직업 직업선택 웹디자이너 프로그래머 회사원 학생 영화감독 웹마스터 이메일 @ naver.com gmail.com nate.com hanmail.net 이메일 수신 여부 예 아니오 동의 예 아니오 2021. 12. 5. HTML - HTML5 시멘틱 구조 태그 HTML5 시멘틱 구조 태그 시멘틱(Semantic) : 의미의, 의미론적인 역할과 기능에 맞는 요소로 영역 구분해서 사용 각 요소(태그)가 의미가 있다는 것 : 헤더(제목) : 내비게이션(메뉴) : 사이드 바 : 컨텐츠(내용) : 컨텐츠 안의 내용 (컨텐츠 영역을 세분화) : 푸터(주소 / 연락처 / 저작권 등) HTML5 시멘틱 구조의 특징 HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 동일하지만 실제로 웹 브라우저에서 문서를 처리할 때 큰 차이 존재 HTML5 시멘틱 구조의 장점 소스만으로도 문서 내용 쉽게 이해 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 구분 편리한 검색 사이트 검색 시 필요한 내용을 .. 2021. 12. 5. HTML - 공간 분할 태그 공간 분할 태그 태그 : block 형식으로 공간 분할 태그: inline 형식으로 공간 분할 div.html div1 div2 div3 div4 span1 span2 span3 span4 div 중첩 2021. 12. 5. HTML - 입력 양식 태그 입력 양식 태그 입력 양식 (form)을 만들 때 사용하는 태그 태그 입력 양식을 구성하는 기본 골격 제공 태그 폼 요소에 캡션(라벨) 붙이기 태그 및 속성 데이터를 입력 받기 위한 태그 태그의 type 속성에서 사용 가능한 유형 라디오 버튼 (radio) 여러 항목 중에 한 개를 선택할 때 사용 1학년 2학년 name : 그룹 이름 value : 선택한 버튼의 값(서버로 전송되는 값) checked : 처음부터 선택된 상태로 만들기 모든 입력 태그 name : 서버에 전달될 떄 서버에서 인식하는 이름 id : 자바스크립트, jQuery에서 객체로 선택해올 때 인식하는 이름 체크박스(checkbox) 여러 항목 중에 여러 개를 선택할 때 사용 게임 2021. 12. 5. HTML - 문서 삽입 태그, 오디오/비디오 태그 문서 삽입 태그 태그 현재의 html 문서 내에 다른 문서 포함 태그 만들어서 영역 만든 후 의 에서 target = "ifame이름" 지정 iframe의 위치 설정 중요!! -> css로 크키, 위치 등 속성 설정 오디오 태그 오디오 파일 재생 태그 속성 태그 미디어 파일 지정 여러 미디어 파일을 한꺼번에 지정 브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에 한 가지 파일만 사용했을 경우 일부 브라우저에서 지원하지 않는 경우 발생 따라서 여러 유형의 미디어 파일 지정 audio.html 비디오 태그 비디오 파일 재생 mp4, ogv, webm 파일 형식 비디오 파일 속성 태그 자막 표시 WebVTT 형식 파일(.vtt) Web Video Text Tracks video.html 2021. 12. 5. HTML - 이미지 태그 이미지 태그 태그 인라인 태그로 이미지 바로 옆에 다른 요소가 나란히 배치 여러 개의 태그를 사용하면 계속해서 오른쪽에 표시 태그 속성 이미지 파일 경로 HTML 파일과 같은 폴더에 있는 경우 이미지 파일명만 적으면 됨 하위 폴더에 있는 경우 HTML 폴더와 동격의 다른 폴더에 있는 경우 이미지 + 테이블 연습문제 다음을 완성하시오 tableEx.html 작품명모나리자 화가레오나르도 다 빈치 시대15세기 경 기법패널에 유채 크기77 x 53 가 격정가700 억원 판매가500 억원 소장기관루브르박물관 이미지 맵 하나의 이미지에 여러 개의 링크를 만들고 각 영역마다 다른 링크 연결 태그의 usemap 속성 이미지 맵 지정 사용 방법 태그를 이용해 맵을 만들고 태그의 usemap 속성으로 이미지 맵 지정 im.. 2021. 12. 5. HTML - 테이블 태그 테이블 태그 : 테이블 선언 태그 : 테이블 내에 한 행을 정의하는 태그 : 테이블 내의 한 열, 즉 셀을 만들 때 사용하는 태그 테이블 태그의속성 태그의 속성 태그의 속성 table.html 다음을 작성하시오 테이블1 abcd a1b1c1d1 b2c2d2 b3c3d3 a4 테이블2 abcd a1b1 b2c2d2 b3c3d3 c4 2021. 12. 5. HTML - 목록 태그 목록 태그 기본 목록 : , , 정의 목록 : , , 기본 목록 태그 list.html 순서가 없는 목록 (Unordered List) JavaScript / jQuery 웹 프로그래밍 인터넷프로그래밍 데이터베이스 포도 복숭아 수박 딸기 강아지 고양이 이구아나 고슴도치 컴퓨터학과 경영학과 수학과 영어과 컴퓨터학과 경영학과 수학과 영어과 포도 복숭아 수박 딸기 강아지 고양이 이구아나 고슴도치 태그 속성 - 순서 없는 목록(Unordered List) type disc : 검은 원(기본값) circle: 흰 원 square: 사각형 태그 속성 - 순서 있는 목록(Ordered List) type 1 : 숫자. 기본값 a : 영어 소문자 A : 영어 대문자 i : 소문자 로마 숫자 I : 대문자 로마 숫자 s.. 2021. 12. 5. HTML - 문서 구조 태그, 텍스트 관련 태그, 하이퍼링크 태그 문서 구조 태그 태그 문서의 시작과 끝을 표시 크게 두 부분으로 구성되어 있음 제목 표시 (크기1) 제목 표시 (크기2) 제목 표시 (크기3) 제목 표시 (크기4) 제목 표시 (크기5) 제목 표시 (크기6) 태그 문단을 나누는 태그(paragraph) 새로 줄바꿔서 시작 태그를 2번 사용한 만큼의 간격 태그를 여러 번 연속으로 사용해도 행 간격이 더 이상 벌어지지 않음 태그 줄 바꿈 태그 여러 줄을 바꾸려면 여러 번 사용 태그 수평 줄 표시 주석처리 텍스트에 장식 효과를 주는 태그 , : 텍스트 강조 , : 이탤릭체 : 아래 첨자 : 아래첨자 : 위첨자 : 현재 설정된 크기보다 2포인트 작게 : 밑줄 표시 , : 취소선 (글자 가운데에 선) test.html h3: 텍스트에 장식 효과를 주는 태그들 b .. 2021. 12. 5. 이전 1 2 다음
