'linkrel'에 해당되는 글 3건

  1. 2012.08.16 rel 속성
  2. 2012.01.15 이미지의 대체텍스트
  3. 2011.08.24 [web] css - link rel 속성 의미
HTML/link rel2012. 8. 16. 21:23

rel 속성


rel 속성은 a 요소, link 요소, area 요소에서 사용되며, 링크된 대상과의 관계를 지정합니다.

link 요소에서 rel 속성으로 생성한 하이퍼링크는 문서전체에 적용됩니다. 
a 요소, area 요소에서 사용하는 rel 속성은 문서 내에서 링크 위치에 의해 정해지는 문맥에 따라 링크의 타입을 나타냅니다.

속성 값

이 속성은 기본값이 없고, 계층구조를 명시하는 index, up 등과 같이 직접 명시되지 않는한 대부분은 하나의 키워드만 가질 수 있습니다.

명세에서 이 속성의 값으로 사용될 수 있는 링크 타입들을 소개하고 있지만, 규범은 아닙니다. 누구든지 원하는 경우 새로운 링크 타입을 생성할 수 있습니다.

예제

예제1 - alternate 링크 타입:

현재 문서의 대체품을 나타냅니다.

    

  1. <link rel="alternate stylesheet" type="text/css" href="paul.css" title="스타일" />
  2. <link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS 2.0" />

예제2 - archives 링크 타입:

기록, 문서, 기타 역사적인 관점에서 흥미가 있을 컬렉션에 대한 링크를 제공합니다. 블로그의 과거 포스트들을 rel=“archives”와 함께 index를 링크시킬 수 있다.

    

  1. <link rel='archives' title='March 2011' href='http://www.example.com/blog/2011/03/' />
  2. <link rel='archives' title='February 2011' href='http://www.example.com/blog/2011/02/' />
  3. <link rel='archives' title='January 2011' href='http://www.example.com/blog/2011/01/' />

예제3 - author 링크 타입:

현재 문서의 저자에 대한 링크입니다. 이것은 mailto: address 일 수도 있고, 페이지 저자에 대한 contact form 링크 일 수도 있습니다.

    

  1. <a rel="author" href="http://boochim.net/about">Contact me</a>

예제4 - bookmark 링크 타입: bookmark 링크 타입은 퍼머링크permalink를 나타낼 수 있습니다. 이경우 title 속성을 활용하여 제목을 써 두는 것이 좋습니다.

    

  1. <a href="http://clearboth.org" rel="bookmark" title="클리어보스">clearboth.org</a>

예제5 - external 링크 타입:

참조하는 문서가 현재 문서 사이트의 일부가 아님을 나타냅니다.

    

  1. <a href="document.html" target="_blank">외부 link</a>
  2. <a href="document.html" rel="external">외부 link</a>

예제6 - first 링크 타입: 현재 문서가 시리즈의 일부분임을 나타내며, 참조하는 문서는 그 시리즈의 첫번째 문서입니다.

    

  1. <link rel="first" type="text/html" title="5개의 name 속성 페이지중 1번째" href="http://html5ref.clearboth.org/html5:attribute:name" />

예제7 - help 링크 타입:

문맥에 접근한 도움말에의 링크를 제공합니다.

    

  1. <link rel="help" href="help.htm" />

예제8 - icon 링크 타입:

현재 문서를 나타내기 위한 아이콘을 가져옵니다. icon을 쓸때는 shortcut과 함께 씁니다.

    

  1. <link rel="shortcut icon" href="/favicon.ico">

예제9 - index 링크 타입: 현재 문서의 차례, 또는 인덱스를 갖고 있는 문서로의 링크를 제공합니다.

    

  1. <link rel="index" href="http://html5ref.clearboth.org/" />

예제10 - last 링크 타입: 현재 문서가 시리즈의 일부분임을 나타내며, 참조된 문서는 그 시리즈의 마지막 것입니다.

    

  1. <link rel="last" type="text/html" title="5개의 name 속성 페이지중 마지막 페이지" href="http://html5ref.clearboth.org/html5:attribute:name_param" />

예제11 - license 링크 타입:

현재 문서의 주된 컨텐츠가 저작권 라이센스를 갖고 있음을 나타내며, 참조된 문서는 그러한 라이센스를 설명합니다.

    

  1. <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="license">Apache 2.0</a>

예제12 - next 링크 타입: 현재 문서가 시리즈의 일부분임을 나타내며, 참조된 문서는 그 시리즈에서 현재 문서의 다음 문서입니다.

    

  1. <link rel="next" href="chapter6.html">

예제13 - nofollow 링크 타입: 현재 문서의 원래 저자, 혹은 출판자가 참조된 문서를 보증하지 않음을 나타냅니다.

    

  1. <a href="http://blog.example.com" rel="nofollow">My blog</a>

예제14 - noreferrer 링크 타입: 하이퍼링크를 따라갈 경우, 사용자 에이전트가 HTTP Refferer 헤더를 전송하지 않을 것을 요구합니다.

    

  1. <a rel="noreferrer" href="http://html5ref.clearboth.org/" target="_blank">cleaboth html5 레퍼런스 사이트 새창으로 열기</a>

예제15 - pingback 링크 타입: 현재 문서로의 핑백을 다루는 서버의 주소를 제공합니다.

    

  1. <link rel="pingback" href="http://www.clearboth.org/html5_open_references/">

예제16 - prefetch 링크 타입: 목적지 문서가 미리 캐쉬되어야 함을 나타냅니다.

    

  1. <link rel="prefetch" href="http://html5ref.clearboth.org/lib" />

예제17 - prev 링크 타입: 현재 문서가 시리즈의 일부분이며, 참조된 문서는 현재 문서의 앞 문서임을 나타냅니다.

    

  1. <link rel="prev" href="chapter4.html">

예제18 - search 링크 타입: 현재 문서와, 연관된 페이지를 검색하는데 사용할 수 있는 자원으로의 링크를 제공합니다.

    

  1. <link rel="search" type="application/opensearchdescription+xml" href="/lib/exe/opensearch.php" title="HTML5 Open Reference" />

예제19 - stylesheet 링크 타입: 스타일시트를 가져옵니다.

    

  1. <link rel="stylesheet" type="text/css" href="http://html5ref.clearboth.org/lib/tpl/cb_open_ref/shadowbox/shadowbox.css">

예제20 - sidebar 링크 타입: 참조된 문서를 가져왔을 경우, 브라우저에 사이드바가 있다면 그곳에 표시될 의도를 가졌음을 나타냅니다.

예제21 - tag 링크 타입: 현재 문서에 적용되는 태그(주어진 주소에 의해 식별되는)를 제공합니다.

    

  1. <a href="http://html5ref.clearboth.org" ref="tag">html5</a>

예제22 - up 링크 타입: 현재 문서에 대한 문맥을 제공하는 문서로의 링크를 제공합니다.

새로운 링크 타입은 WHATWG Wiki RelExtensions page를 통해서 등록할 수 있습니다. 자세한 설명은 명세 4.12.4.19 다른 링크 타입들을 참고해 주세요. * 명세와 WHATWG Wiki의 컬럼명이나 키워드가 일치하지 않는 경우가 있으나, 의미를 파악하거나 이용하는데에는 무리가 없습니다.

저작자표시 비영리 동일조건

'HTML > link rel' 카테고리의 다른 글

이미지의 대체텍스트  (0) 2012.01.15
[web] css - link rel 속성 의미  (0) 2011.08.24
Posted by wrnly
HTML/link rel2012. 1. 15. 16:55

이미지의 대체텍스트

설명

이미지의 대체 텍스트에 배경이미지, 기호, 파일이름, img01, blank, photo, 그림 등과같이 의미없는 단어를 제공하게 되면 보조기기 사용자는 일반 사용자가 전달받는 의미와 동일하게 제공받을 수 없게되어 부정적 영향을 줍니다. alt속성에는 일반 사용자와 동일한 수준에서 이해할 수 있도록 간결하고 정확한 대체 텍스트를 제공하도록 합니다.

비-준수 사례

  <IMG src="balloon.gif" alt="Picture" /> 
  <IMG src="pic_001.gif" alt="그림" /> 
  <IMG src="photo_01.gif" alt="사진" /> 
  <IMG src="spacer.gif" alt="Blank" /> 
  <IMG src="bg_img01.gif" />

준수사례

1) 의미를 가진 대체 텍스트를 제공 
  <IMG src="balloon.gif" alt="빨간 풍선" /> 
  <IMG src="pic_001.gif" alt="가나다 시스템에 오신것을
  환영합니다" /> 

2) 디자인을 위한 배경이미지는 대체텍스트를
  공란으로 제공 
  <IMG src="spacer.gif alt="" /> 
  <IMG src="bg_img01.gif" alt="" /> 

3) 디자인을 위한 블릿
  기호는 대체텍스트를 공란으로 제공 
  <IMG src="bullet.gif alt="" />

권고수정방안

alt 텍스트는 간결하면서 정확하게 이미지의 의미를 전달하도록 합니다. 예를 들어 대체 텍스트를 "f12_new.jpg"로 제공하게 되면 해당 이미지에 대한 의미를 전달받을 수 없게 되어 올바른 표현이 아닙니다. alt속성이 없을 경우에는 src의 속성을 전부 읽어주게 되므로 스크린 리더 사용자가 알 수 없는 정보에 노출 될 수 있습니다.

적용 예

*보안정보 경고창이 나올 경우 보안되지 않은 항목도 포함시킬 수 있도록 '예' 또는 '아니오'를 선택해야합니다. (브라우저에 따라 다름)

[잘못된 사례]

이미지의 대체 텍스트가 올바르지 않은 예
이미지의 대체 텍스트가 올바르지 않은 예

[올바른 사례]

이미지의 대체텍스트가 올바르게 제공되는 사례

이미지의 대체텍스트가 올바르게 제공되는 사례

※ 참조링크 [example links] 2011.6.8 기준(변경사항 있을 수 있음)
≫ 준수 사례 : http://www.museum.go.kr/main/publish/view.jsp?menuID=006002 ('삶의 보금자리'이미지)
≫ 비준수 사례 : http://www.soldesk-co.kr/ (메인 페이지의 로고가 alt=""로 제공되어 있음)

※ [참조] 한국정보화진흥원 접근성 준수지침 - 1.1.1 [nia.or.kr]
o 의미가 있는 이미지의 경우, 의미나 기능이 동등한 대체 텍스트를 제공해야 한다.
o 의미가 없는 이미지의 경우(예: 글머리기호, 테두리, 장식용 이미지, 공백 이미지 등), 대체 텍스트를 빈 공간(alt="")으로 제공해야 한다.
o 웹 애플리케이션 또는 리치 인터넷 애플리케이션(RIA: Rich Internet Application)의 경우, 해당 저작 도구에서 제공하는 접근성 기능을 활용하여 대체 텍스트를 제공해야 한다.
- 실버라이트의 경우, 키보드를 사용해서 접근이 가능하게 제작하면 UIA(UI Automation)를 통해서 접근성 기능을 제공할 수 있다.
- 플래시의 경우, 액세스 가능성 패널(Accessibility Panel)에서 이름(Name)이나 설명(Description)으로 제공해야 한다.



저작자표시 비영리 동일조건

'HTML > link rel' 카테고리의 다른 글

rel 속성  (0) 2012.08.16
[web] css - link rel 속성 의미  (0) 2011.08.24
Posted by wrnly
HTML/link rel2011. 8. 24. 17:52

[web] css - link rel 속성 의미

<link rel="alternate" type="application/rss+xml" title="wrnly2" href="https://wryul12.tistory.com/rss" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
<link rel="shortcut icon" href="https://wryul12.tistory.com/favicon.ico" />

각 'link'들은 'rel'이라는 속성값과, 'media', 'type', 'href' 등의 속성값을 가지고 있어요.

첫 번째와 네 번째는 제 이야기와 관련이 없으니 넘어가도록 하고, 두 번째와 세 번째에 있는 'rel="stylesheet"'에 관한 이야기를 해보도록 하죠.

우선 'link'엘리먼트는 말 그대로 '연결'시켜주는 걸 의미해요. 그런데 '스타일시트'의 속성값을 가진 것과 연결하겠다는 거죠. 그럼 스타일시트란 무엇인가? 당연히 '스타일'을 정해주는 것이겠죠? 이에 대해서는 하단에 설명하기로 하고

'media'가 튀어나옵니다. 'screen'과 'print'로 나뉘죠. 스크린은 우리가 바라보는 모니터를 뜻하고 프린트는 말 그대로 '출력'할 때를 의미합니다. 'type' 속성 값은 'text/css'로, 그리고 'href'는 웹에 조금만 관심 있으시다면 익숙한 속성이겠죠? 네, 위치를 의미합니다.

"./style.css"의 의미는 현재 html문서와 '동일한 폴더' - 사실 폴더의 개념을 쓰기에 모호하긴 하지만 - 에 위치한 style.css 파일을 의미합니다.

한마디로

<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />

'스타일시트'로 '모니터 화면에 보여줄' '텍스트 css'로 이루어진' 'style.css'파일을 이 html과 '연결'하라는 이야기죠.

'href'의 파일 위치나, 파일명은 무엇이든 상관이 없어요.

자 그럼 여기서 이야기 할 것은.

왜 'html'과 'CSS'를 분리하느냐이죠.



다시 기본으로 돌아갑니다.

html은 하이퍼 텍스트 마크업 랭귀지라는 걸 알았어요. CSS는 그 HTML이 어떻게 '나타나는가'에 대한 문서죠.

예를 들어 누군가가 html에 어떤 행사의 '식순'을 적어주면 CSS를 통해서 그 식순에 꽃무늬 테두리를 두르거나, 순서에 '번호'를 먹이거나 아니면 그냥 '점'만 찍거나 등의 '표현'을 제어할 수 있는 거죠.

그러면 '분리'를 통해서 얻을 수 있는 이득이란?

예를 들어 html에서 서론, 본론, 결론이 있는 글을 썼다고 해요. 그런데 각각 '서론', '본론', '결론'에 해당하는 것의 글자 크기를 동일하고 같은 글꼴을 쓰려고 html의 '형식'을 같게 해둔다면. CSS에서 한 번 고치는 것으로 '서론', '본론', '결론' 세 가지를 바꿀 수 있게 되는 거죠.

만약에 '태터툴즈'의 스킨이 아니라 웹페이지라면, 그리고 그 페이지가 '여러 문서'이고, 형식이 '같은 것'으로 이루어져 있다면.

CSS 파일 하나 손 보는 것으로 모든 페이지의 '모습'이 바뀌는 겁니다.

저작자표시 비영리 동일조건

'HTML > link rel' 카테고리의 다른 글

rel 속성  (0) 2012.08.16
이미지의 대체텍스트  (0) 2012.01.15
Posted by wrnly

티스토리툴바