Test Gut

3강_tag의 형식과 개념(a herf)

태그의 형식

 

<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>

태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의 한다.

열리는 태그가 있으면 닫히는 태그가 있어야 한다. 

닫히는 태그는 태그 명 앞에는 '/'가 붙는다.

속성은 태그의 부가적인 정보가 들어온다. 아래 예제에서 href는 속성명, http://opentutorials.org은 속성값이다. href 속성은 컨텐츠인 생활코딩이 opentutorials.org와 연결되어 있다는 것을 의미한다.

 

  • <br />: 줄 바꿈
  • <input type="button" value="버튼" /> : 버튼만드는 태그.
  •  

    문법(Syntax)

     

    1
    <a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>
  • href : 링크이름과 연결되어 있는 리소스(resource)의 주소
  • title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.
  • target : 문서가 로드될 대상으로 아래와 같은 것들이 있다.
    • _self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐
    • _blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드
    • _parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드
    • 프래임의 이름
  • 설명(Description)

    하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하는데, 이 연결성을 제공하는 것을 링크라고 한다.

  • 문서에서 문서로 이동하는 수단
  • 태그명 a(anchor)을 사용함
  • href에 #을 사용하면 같은 문서 내에서도 특정한 위치로 이동이 가능
  • target을 지정해서 문서가 로드될 위치를 지정할 수 있다.

html 파일

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   </head>
   <body>
       <img  alt="로고" src="이미지 소스경로" />
       <br />
       <a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>
   </body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------

이해가 잘 되셨으면 합니다`

상단에 예제 파일이 있습니다..

해당하는 alt 텍스트에 로고라고 되어있습니다..

alt 태그가 쇼핑몰에서는 중요하지 않지만 웹접근성이라는 개념으로 본다면 이미지 태그에는

항상 alt 태그를 이용하여 이미지에 대한 설명을 보지 못하는 경우 텍스트로 설명이 되어져야 합니다.

지난주 공부한 h에 대한 태그도 화면에 보여지는 크기를 조정하기 위한 태그가 아닌

의미상의 전체적인 사이트에 카테고리를 상위부터 하위로 정의한다는 의미로 이해하시고 그렇게

사용하셔야 합니다!!!

 


 

이번주 스터디 과제는  직접 로고 이미지 파일을 (어떤 이미지라도 상관 없습니다) img 라는 폴더를 서버에 만드셔서

업로드 하신 후 ⓐ a herf 태그로만 ⓑ target="self" ⓒ target="blank" 를 이용하여 3가지를 작성하여 

 20151028.html 파일을  다음주 수요일 11월4일까지 업로드 해주세요~

 

 

댓글

댓글 본문
  1. Hye Jung
    ★★★ 잘하셨어요~^^
    대화보기
    • 조연주
    버전 관리
    Hye Jung
    현재 버전
    선택 버전
    graphittie 자세히 보기