HTML5 프로그래밍 정리 1~3강

캔버스 개요

• 캔버스 → 자바스크립트 코드를 이용해서 웹 브라우저에 비트맵 방식으로 그림을 그리는 기능
• 캔버스 작업을 위한 기본 과정
  - body 요소 내에서 canvas 요소를 사용해서 그림이 그려질 사각형 영역을 지정
  

  <canvas id="캔버스 객체 아이디" width="폭" height="높이">     미지원 브라우저를 위한 내용 </canvas>

  - script 요소 내에서 자바스크립트 코드로 해당 영역에 실제 그림을 그린다.
  

  <script>   let 변수1 = document.getElementById("캔버스 객체 아이디");   let 변수2 = 변수1.getContext("2d");   // ‘변수2.속성’과 ‘변수2.메서드()’를 사용해서 실제 그림을 그린다. </script>

 

1. 리스트 표현
   • 리스트 관련 요소 → ul, ol, li, dl, dt, dd
   • ul → 순서 없는 리스트 → 기호 종류: none, disc(기본), circle, square
   • ol → 순서 있는 리스트
     - 속성 → type(기호 유형), start(시작할 항목 번호), reversed(역순)
   • li → ul/ol에서 공통으로 사용되는 하위 요소로서 리스트의 각 항목 표현. 들어쓰기. 자동 줄바꿈
     - 속성 → value(항목번호 변경. ol의 경우에만 사용)
   • dl → 서술리스트
     - dt → 용어 나열. 자동 줄바꿈
     - dd → 용어 설명. 자동 줄바꿈. 들여쓰기
2. 이미지 표현
   • img → 이미지 삽입
     - 속성 → src(이미지 파일 경로와 이름), width(이미지 폭), height(이미지 높이), alt(대체 표시될 텍스트), usemap(이미지맵)
     - 기본 크기는 원본 크기 → 폭과 높이 중에서 하나만 지정되면 나머지 하나는 원본 크기 비례하여 자동으로 결정
3. 하이퍼링크 표현
   • a → 하이퍼링크 삽입
     - 속성 → href(이동할 곳의 URL), target(링크된 내용이 출력될 창), download(파일 다운로드)
   • id 속성을 활용한 특정 위치로의 이동
     - 링크 부분 → href=“#특정 위치 이름”
     - 이동할 특정 위치 → id=“특정 위치 이름”
   • 다양한 링크 지정
     - 이메일 → href=“mailto:이메일주소”
     - 자바스크립트 코드 → href=“javascript:코드”
     - 음악/동영상 파일 재생 → href=“파일명”
     - 파일 다운로드 → href=“압축/실행 파일명”
   • 이미지맵 → 하나의 이미지에 대해 여러 영역으로 나누어 링크 지정
     - <img src=“파일명” usemap=“#맵이름”>과 <map name=“맵이름”>으로 연동
     - map 요소 안에서 필요한 영역의 개수만큼 area 요소로 각 영역 지정
   • iframe → 현재 웹 페이지 안에 새로운 창 삽입
     - 속성 → name(창 이름), src(창에 표시할 URL), srcdoc(창에 보여줄 콘텐츠), width(창의 폭), height(창의 높이)
4. 테이블 표현
   • 테이블 관련 요소 → table, tr, td, th, caption, thead, tbody, tfoot, colgroup, col
   • table → 테이블 정의
     - 테두리를 표시하려면 → <table border=“굵기(픽셀)”>
   • tr → 하나의 줄에 해당하는 행을 정의
     - td/th 요소를 반드시 포함해야 함
   • td → 데이터 표시를 위한 표준 셀 정의
     - tr 요소 내에서 사용. 셀 내용은 왼쪽 정렬
   • th → 행/열의 제목을 표시하는 헤더 셀 정의
     - tr 요소 내에서 td 요소와 선택적으로 사용. 셀 내용은 진하게 가운데 정렬
   • caption → 테이블 제목 표시
     - 사용 위치 → table 요소의 시작태그 바로 다음에 위치 시킴
     - 셀 내용 → 상단에 진하게 가운데 정렬
   • 셀 병합 → 인접한 셀들을 합쳐서 하나의 셀로 표현 → 다양한 모양의 테이블 작성이 가능
     - rowspan=“n” 속성 → 세로 방향(“행”)의 n개의 셀을 병합
     - colspan=“n” 속성→ 가로 방향(“열”)의 n개의 셀을 병합
     - 두 속성은 td(또는 th) 요소에서 사용
   • 행 단위 콘텐츠의 그룹핑
     - thead, tbody, tfoot → 행 단위의 콘텐츠를 각각 헤더, 몸체, 푸터 부분으로 구분하여 그룹핑 → 기본적인 출력에서는 아무런 변화도 없지만 그룹 단위의 조작이 가능
     - 사용 위치 → table - [caption] - [colgroup] - thead - 첫 번째 tr - … → thead, tbody, tfoot 요소는 순서대로 사용
   • 열 단위의 스타일 지정
     - colgroup → 하나 이상의 열을 모아서 한꺼번에 스타일 지정 → 사용 위치: table - [caption] - colgroup - [thead] - 첫 번째 tr - …
     - col → colgroup 요소의 자식 요소 → 지정된 열에 대해서 서로 다른 포매팅을 정의 → span=“n” 속성으로 스타일이 적용되는 열의 개수 지정

 

 

1. 미디어 표현

• audio → 오디오 재생
  - 속성 → src(파일의 URL), autoplay(자동 재생), controls(제어기 표시), loop(반복 재생), muted(음소거), preload(오디오 로딩 상태)
• source → 하나의 소스 파일에 대해서 서로 다른 형식을 갖는 여러 개의 파일 형식을 지원
  - audio/video 요소의 하위 요소 → audio/video의 src 속성을 대체하는 요소
  - 속성 → src(파일의 URL), type(MIME 형식), media(미디어 쿼리)
• video → 비디오 재생
  - 속성 → audio의 속성(src, autoplay, controls, loop, muted, preload) + width/height(비디오 콘텐츠의 표시 영역의 폭/높이), poster(비디오 데이터의 미설정 또는 로딩되는 동안 표시할 이미지)
• 미디어 콘텐츠의 재생 구간 지정
  - audio/video/source 요소의 src 속성 이용 → src ="파일명#t=[시:분:초][,시:분:초]"

 

2. 시멘틱 요소

• 시멘틱 요소 → 의미 있는 구조의 문서를 작성하기 위해서 요소의 기능에 적합한 의미를 갖는 요소명을 사용
• 문서 구조화를 위한 시멘틱 요소
  - header → 사이트 로고와 이름 등과 같은 머리말을 나타내는 요소
  - nav → 주로 웹 페이지 전체에 적용되는 메뉴를 모아 놓은 메뉴 영역
  - section → 하나의 주제로 구성된 문서의 내용 영역을 구성하는 요소 → 하나의 section 요소 내에서는 하나의 헤딩 요소만 사용 가능(여러 개의 헤딩이 사용되면 헤딩의 레벨에 따라 같은 레벨의 section으로 구분하거나 중첩된 section으로 구분) → 하나의 주제 안에 다른 세부 주제가 존재하는 경우에는 중첩해서 표현
  - article → 독립적으로 분배 및 재사용이 가능한 개별 콘텐츠
  - aside → 주요 콘텐츠 이외의 주로 좌우측에 위치하는 보조 콘텐츠 영역을 나타내는 요소
  - footer → 제작자 정보, 저작권 정보 등과 같은 꼬리말을 나타내는 요소
• 시멘틱 블록 요소 → main, figure ~ figcaption, details ~ summary
• main → 문서 body 영역의 주요 콘텐츠 블록을 그룹화할 때 사용
  - body 요소 내에서 오직 한 번만 사용하며, 문서의 전체적인 레이아웃에는 영향을 주지 않음
• figure → 본문에 삽입된 그림, 다이어그램, 사진, 소스 코드, 동영상과 같은 독립적인 콘텐츠를 하나로 묶어서 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킬 때 사용
  - 하위 요소 → figcaption (캡션)
• details → 사용자의 요구에 따라 추가적인 세부정보를 보여주거나 숨기는 형태의 상호작용을 지원
  - 속성 → open(세부정보를 보여줌)
  - 하위 요소 → summary (캡션)
• 시멘틱 인라인 요소 → time, meter, progress, ruby ~ rt, wbr
• time → 시간/날짜 표현에 의미를 부여
  - 속성 → datetime (시스템이 인식할 수 있는 시간/날짜 지정)
• meter → 일정 범위 안의 측정값이나 분포 비율 등의 정적인 값을 표시
  - 속성 → value (현재값), min/max (입력 범위를 나타내는 최소값/최대값), low/high (허용 범위의 최소값/최대값), optimum (최적값)
• progress → 작업의 현재 진행 상태를 나타낼 때 사용
  - 속성 → value (진행 중인 작업의 현재 값), max (작업량의 최대값)
  - 현재 진행 중인 상태의 값을 지속해서 업데이트시키기 위해 자바스크립트와의 연동이 반드시 필요
• ruby → 하나 이상의 구문 콘텐츠에 루비 주석(“기본 문자열 주변에 추가되는 짧은 텍스트”)을 표시할 때 사용
  - ruby 요소는 하나 이상의 문자로 구성되는 기본 텍스트를 지정
  - 하위 요소 → rt (바로 앞에 오는 하나 이상의 구문에 대한 루비 주식 표시)
• wbr → 텍스트에서 줄바꿈이 수행되어도 괜찮은 위치를 미리 지정
  - 실제 줄바꿈의 수행 여부는 레이아웃의 배치 상황에 따라 결정