Coading HTML[2]

HTML 태그[2]

<a>태그 : 링크를 연결하는 태그

• a태그는 '앵커'태그라고 부른다. 서로 다른 웹 페이지를 연결하거나 전화를 연결하거나메일을 연결할때에도 사용한다. a태그는 inline속성을 갖는다.

[기본형]
<a ★href="링크 경로" target="페이지 연결 방식" title="링크 설명"> 글자나 이미지 </a>

<figuer>,<figcaption> : 이미지의 설명글을 표시하는 태그

• 웹 표준 이전에는 이미지에 설명을 나타내기 위해 p태그를 사용했다.

• html5 웹표준에서는 이미지 설명을 나타낼때
  <figuer>,<figcaption>태그를 사용한다.

  [기본형]
  1.
  <figuer>
<img src="경로" alt="설명" />
<figuer />
  2. ★
  <figuer>이미지 설명</figuer>
<img src="경로" alt="설명" />
  3. ★
  <figuer>
<img src="경로" alt="설명" />
<figcaption>이미지 설명</figcaption>
</figuer>

  img태그

  • [이미지 파일 저장규칙]

    1. 이미지를 저장할 때 반드시 웹 문서 저장법과 동일하게 소문자로 저장하고 공백이나
       한글을 파일명으로 짓지 않는다.

    2. 이미지 폴더는 반드시 프로젝트 폴더(=최상위 폴더)안에 있어야 한다.

    3. 이미지는 용량이 크지 않은 파일을 사용한다. 해상도는 72px이며 스마트폰에서
       바로 저장된 이미지는 사용하지 않는다.

    [기본형]
    <img src="이미지 경로 또는 url" alt="이미지 설명" />
    [절대경로]

    • 최상위 폴더 : /(=root)
    • 폴더이름 / : ~폴더 안에 (/img/ 이런 식)
      Ex)
      <img src="/img/이미지이름.jpg" alt="이미지 설명" />
      [상대경로=상향폴더]
    • / : 최상위 폴더(=root)
    • ./ : 현재 작성하고 있는 파일의 폴더.
    • ../ : 한 폴더 위로

    ---

    링크의 종류

  • a태그는 href속성의 속성값에 따라 페이지를 연결하거나 문자나 전화를 거는 등 다양한 기능을 가지고 있다.

    [종류]

    - href="웹 주소 url" 
      : 해당하는 url주소로 링크를 연결한다.
    
    - href="/" 
      : 최상위 폴더 내의 index.html(메인페이지)로 연결한다.
    
    - href="./폴더이름/파일이름.html" 
      : 해당하는 html페이지로 연결한다.
    
    - href="mailto:이메일 주소" 
      : 아웃룩을 통해 메일을 보낼 수 있다.
    
    - href="tel:전화번호"
      : 모바일 환경에서 해당 전화번호로 전화를 걸 수 있도록 화면을 전환해 준다. 만약 pc에 인터넷 전화가 연결되어 있으면 pc에서도 동작할 수 있다.
    
    - href="sms:전화번호"
      : 모바일 환경에서 해당 전화번호로 문자를 보낼 수 있도록 화면을 전환해 준다.
    
    - href="#"
      : 임시 경로. 페이지의 이동은 이루어지지 않지만 웹 페이지를 만들때 당장 연결할 페이지가 
        준비되지 않은 경우 임시로 넣어놓은 주소역할을 한다.