데이터 입력양식의 예 태그 ▷ 사용자로부터 다양한 형태의 데이터를 입력받기 위한 요소들을 담는 컨테이너 ＊ 입력요소(input, select, textarea 등)는 태그 내에서 사용 ＊결과 화면에는 아무것도 표시되지 않음 (, , 등) … ▷ 주요 속성 ＊action="URL" → 폼 데이터를 전달받아 처리할 페이지의 URL ＊method="전송방식" → 데이터 전송에 사용하는 HTTP 방법 ☞ method="get" 또는 method="post" ＊name, accept-charset, autocomplete, enctype, novalidate, target method 속성값 method="get"method="post"전송 형태 기본값. 폼 데이터가 이름과 값의 형태로 URL에 포함되어 전송“U..
태그 ▷ 비디오 재생 ▷ 속성 ＊ 태그의 속성을 그대로 사용 ＊ src, autoplay, controls, loop, muted, preload ＊ width="픽셀", height="픽셀" → 비디오 콘텐츠가 표시될 영역의 크기(폭, 높이) ＊ poster="URL" → 지정한 비디오 데이터가 설정되어 있지 않거나 비디오가 로딩되는 동안에 보여줄 이미지를 지정 비디오 파일 형식 ▷ 웹에서 주로 사용되는 비디오 형식 MP4 (*.mp4)WebM (*.webm)Ogg (*.ogv)MPEG-4에서 규정된 비디오 파일 형식H.264 비디오 코덱AAC 오디오 코덱구글이 개발한 고화질 영상 압축 형식VP8 비디오 코덱Vorbis 오디오 코덱멀티미디어 표현을 위한 공개 소스 기반의 파일 형식Theora 비디오 코..
기존 HTML에서 오디오/비디오 재생 태그 ▷ 외부 애플리케이션이나 상호작용 콘텐츠를 위한 컨테이너 ＊ HTML5에서 새롭게 추가됨 ＊ 속성 ☞ src="URL" → 내장되는 외부 파일의 주소/이름 ☞ height="픽셀" → 내장되는 콘텐츠의 높이 ☞ width="픽셀" → 내장되는 콘텐츠의 폭 ☞ type="미디어타입" → 내장되는 콘텐츠의 미디어타입 태그 ▷ 외부 플러그인의 도움 없이 오디오 재생 ▷ 속성 ＊ src="URL" → 재생할 오디오 파일의 URL ＊ autoplay → 웹 문서 로딩 시에 오디오를 자동으로 재생할 지 여부 ＊ controls → 오디오 제어기(재생, 일시정지, 볼륨 등)의 표시 여부 ＊ loop → 오디오의 반복 재생 여부 ＊ muted → 음소거 여부 ＊ preload..
행 단위 콘텐츠의 그룹핑 ▷ , , 태그 ＊ 테이블에서 행 단위 콘텐츠를 각각 헤더, 몸체, 푸터 부분으로 구분하고 그룹핑하는 태그 ＊ 테이블의 레이아웃에는 아무런 영향을 미치지 않음 ＊ 태그의 사용 위치 ☞ … ☞ , 그리고 의 순서대로 사용 열 단위 스타일 지정 ▷ 태그 ＊ 하나 이상의 열들을 모아서 한꺼번에 스타일을 지정할 때 사용 ＊ 태그의 사용 위치 ☞ … ＊ 태그 ☞ 지정한 열에 대해서 서로 다른 포맷팅을 정의하는 태그 ☞ 태그 내에서 사용 ☞ 종료태그 없이 사용 ☞ span="n" 속성 → 해당 태그의 스타일이 적용되는 열의 개수 [정리] 테이블 관련 태그와 속성
셀 병합 ▷ 인접한 여러 셀을 합쳐 하나의 셀로 만드는 경우 ＊ 다양한 모양의 테이블 생성이 가능 ▷ rowspan 속성과 colspan 속성 ＊ 또는 태그 내에서 사용 ☞ rowspan="n" → 현재 셀의 위치에서 n개의 행(세로 방향으로 인접한 n개의 셀)을 병합 ☞ colspan="n" → 현재 셀의 위치에서 n개의 열(가로 방향으로 인접한 n개의 셀)을 병합 3×4 크기의 테이블 열 병합 _colspan 속성 행 병합 _rowspan 속성 행과 열의 병합 테이블을 이용한 요소 배치 ▷ 테이블을 사용하면 ＊ 바둑판식 배열처럼 질서 정연한 요소의 배치가 가능 ▷ 각 셀의 내용으로 다양한 HTML 요소가 가능 ＊ 텍스트, 목록, 이미지, 테이블 등
테이블의 기본 형식 테이블 관련 태그 ▷ 태그 ＊ HTML에서 테이블을 정의하는 태그 ☞ m행×n열 → m개의 태그, 각 태그 내에서 n개의 태그 ▷ 태그 ＊ 테이블에서 하나의 줄에 해당하는 행을 정의하는 태그 ☞ 또는 태그를 포함해야만 사용 가능 ▷ 태그 ＊ 테이블에서 데이터가 표시되는 표준 셀을 정의 ☞ 반드시 태그 내에서 사용 ☞ 셀 내용 → 왼쪽 정렬로 표시 ▷ 태그 ＊ 테이블 내부에서 행/열의 제목을 표시하는 헤더 셀을 정의 ☞ 반드시 태그 내에서 사용 ☞ 셀 내용 → 진하게 가운데 정렬로 표시 ▷ 태그 ＊ 테이블 전체에 해당하는 제목을 표시 ☞ 테이블 레이아웃에는 아무런 영향을 미치지 않음 ☞ 반드시 의 시작태그 바로 다음에 위치해야 함 → 과 태그 사이에는 다른 어떤 태그도 위치할 수 없음 ..
태그 ▷ 현재의 웹페이지 안에 다른 웹페이지를 표시하는 창을 삽입 ▷ 주요 속성 ＊ name="이름" → 창의 이름을 지정 ＊ src="URL" → 창에 표시될 문서의 URL을 지정 ＊ srcdoc="HTML 코드" → 창에서 보여줄 HTML 콘텐츠를 지정 ☞ srcdoc가 지정되면 src 속성에서 지정된 콘텐츠는 무시됨 ＊ width="픽셀" → 창의 폭을 지정 ＊ height="픽셀" → 창의 높이를 지정 이미지맵 ▷ 하나의 이미지를 여러 개의 영역으로 나누어 각 영역마다 링크를 지정하는 것
하이퍼링크를 삽입하는 태그 ▷ 기본 형식 ＊ 링크를 걸어 줄 내용물(텍스트, 이미지) ▷ 주요 속성 ＊ href="URL" → 링크를 통해 이동하려는 곳의 경로/주소 지정 ＊ target="창의 이름" → 링크된 내용이 표시될 창을 지정 ＊ download → href 속성에 지정된 파일을 다운로드해서 저장 target 속성 ▷ 링크가 클릭되었을 때 링크된 내용이 표시될 창을 지정 ＊ target 속성의 값 ☞ _blank → 새로운 창(탭)에서 링크된 문서를 엶 ☞ _self → (기본값) 현재의 창(탭)에서 링크된 문서를 엶 ☞ _top → 현재의 창이 프레임으로 구성된 경우 모든 프레임이 사라지고 하나의 화면에서 링크된 문서를 엶 ☞ _parent → 부모 프레임에서 링크된 문서를 엶 ☞ 프레임명 ..