[WEB 2주차 공부 : HTML]

#링크와 멀티미디어

- 링크 달기

  1. 하이퍼텍스트와 링크

    1.1 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결

    1.2 하이퍼미디어 : 텍스트 뿐 아니라 멀티미디어 정보가 연결

    1.3 노드: HTML문서나 멀티미디어 정보를 표현하는 기본 단위 / 링크: 노드를 연결, 이동 / 앵커: 링크의 출발점이나 도착점

  2. 링크의 종류 : 특정 단어나 문장, 혹은 이미지에서 다른 문서 / 외부 URL / 문서내 다른 지점으로 링크

    2.2 문서간 이동

         <a href="파일이름 또는 URL 주소" title="설명"> 링크 텍스트 </a>

    2.3 문서내 이동

         [목적지 앵커 지정] <a id="고유아이디">목적지</a>

         [시작점에서 연결] <a href="#고유아이디">링크로 이동</a>

        ※이전 버전의 HTML에서는 name 속성을 사용, HTML5에서는 name 속성 대신 id 속성을 사용 권장

- 이미지 사용하기

  1. 이미지 파일 종류

    1.1 GIF(Graphic Interchange Format) : 사진이 아닌 클립아트나 드로잉 같은 종류의 이미지에 적랍

    1.2 JEPG(Joint Photographic Experts Group) : 복잡한 그림이나 사진 등 색상을 많이 사용하는 이미지에 적합

    1.3 PNG(Portable Network Graphic) : GIF와 JEPG 형식의 장점, 비압축 형식인 BMP형식의 장점도 고려

  2. 이미지 삽입

   <img src="파일이름" width="크기(너비)" height="크기(높이)" alt="대체 텍스트">

    ※ alt : 인터넷이 너무 느려 미처 이미지를 표시하지 못하거나 파일의 주소가 잘못되었을 때 이미지에 대한 설명 텍스트

    2.1 <figure> 요소 : 그림, 사진, 다이어그램과 텍스트 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급할 때 사용

    2.2 <figcaption> 요소 : 요소를 위한 제목을 표현, <figure>요소 안에 위치

- 오디오와 비디오 다루기

  1. 지원하는 오디오.비디오 파일 형식 : MP3, Wave, MPEG4, OGG, WebM

웹브라우저에서 오디오/비디오 코덱의 지원 현황(2016)

  2. 오디오 삽입하기

    <audio controls autoplay src="파일 이름">

    -> controls : 미디어 제어기를 표시할지 여부

    -> autoplay : 파일이 로드되자마자 자동으로 재생

    -> loop : 사운드 반복재생 횟수

  3. 비디오 삽입하기

    <video controls src="비디오 파일 이름" width="크기(너비)" height="크기(높이)">

    -> poster : 동영상이 로딩되고 있을 때 보여줄 이미지

    -> preload : 브라우저가 미리 동영상을 로딩 할 지 여부 (auto / metadata / none)

 

#다양한 입력 폼

- 폼 이해하기

  1. 폼 요소 : 회원가입, 상품구매, 키워드 검색 등 사용자로부터 정보를 받을 때 사용

  <form name="이름" method="get/post" action="애플리케이션 주소">

    1.1 method 속성 : 데이터 전송 방식 지정(get : 전송할 데이터를 url주소 뒤에 포함, 간편한 데이터에는 편리하나 보안에 취약함 / post : 프로그램의 입출력 사용, 데이터 양에 제한이 없다.)

    1.2 action 속성 : 데이터를 처리할 애플리케이션 주소(웹서버 경우 URL)

    1.3 name 속성 : 폼 요소에 대한 이름

  2. 기본 형식으로 입력하기

    <input type="입력 형식" name="변수명", value="입력값"/>

    2.1 type 속성 : text, password, radio, checkbox, sumbit, reset, buton, image, file, hidden 등

  3. 고급 형식으로 입력하기

    3.1 요소에 추가된 입력 형식 : email, URL, tel, search, date, month,,,

    3.2 색상 및 숫자 입력 : <input type="color"/> / 숫자 입력 : <input type="number"/> / 범위 입력 : <input type="range"/>