기본적으로 문서에서 링크를 클릭하면 현재 열린 창에 연결된 링크의 페이지가 나타난다.
그리고 이전 문서로 되돌아가려면 뒤로가기를 눌러야하는 번거로움이 있는데, 이 때 보안이슈가 발생할 경우 뒤로가기를 하게 되면 링크가 안나오게 되는 경우가 간혹 발생한다.
이를 방지하기 위한, <a>의 속성 target을 살펴보도록 하자.
explain-by-table| 속성값 | 설명 |
|---|---|
| _blank | 링크의 내용이 새 창 또는 새 탭에서 열림. |
| _self | target 속성의 기본값. 열려있는 창에서 링크 연결. |
| _parent | 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시 |
| _top | 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시. |
이 중 _parent, _top 속성값은 프레임을 사용하는 속성인데, 현재는 보안 이슈로 인해 잘 사용하지 않는다.▷ 한 페이지에서 한 페이지로 이동 anchor
anchor란 한 페이지의 내용이 너무 길거나 서로 구분할 내용으로 구성되어 있을 때 사용함.
① 이동하고 싶은 위치마다 id속성을 이용, 앵커를 만들고 각각 다른 이름 지정
② id를 a태그를 이용해 href로 링크를 걸어줌 (이 때 앵커의 이름 앞에 '#'을 붙여 앵커임을 표시함.
id의 특성
- #으로 표현하기로 정함
- 대소문자를 구분
띄어쓰기 x
영문만 사용(한글 사용 x)
숫자로 시작하거나 숫자로만 만들기 x
문서 내에서 중복된 이름 사용 x- 부분적으로 요소와 요소를 연결할 때 사용
- 기본형 : <태그 id="앵커이름">텍스트</태그>
<a href="#앵커이름"> 텍스트</a>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>anchor</title>
</head>
<body>
<h1>웹 용어</h1>
<ul>
<li><a href="#content1">웹표준</a></li>
<li><a href="#content2">웹접근성</a></li>
<li><a href="#content3">HTML5</a></li>
<li><a href="#content4">CSS3</a></li>
<li><a href="#content5">Javascript</a></li>
<li><a href="#content6">jQuery</a></li>
</ul>
<h2 id="content1">웹표준</h2>
<p>웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다. <br>수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도 하다. 이러한 표준들은 직간접적으로 웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다. 이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는 것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더 높은 수준의 표준에 초점을 두는 경향이 있다.</p>
<h2 id="content2">웹접근성</h2>
<p>웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.웹 접근성에는 다음의 사항들을 고려하여야 한다.</p>
<h2 id="conten3">HTML5</h2>
<p>HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다.<br>HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.</p>
<h2 id="content4">CSS3</h2>
<p>종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.<br>마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.<br>현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.</p>
<h2 id="content5">Javascript</h2>
<p>JavaScript는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.</p>
<h2 id="content6">jQuery</h2>
<p>jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다.<br>jQuery는 MIT 라이선스를 가진 자유 오픈 소프트웨어이다.[1] jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.</p>
<p><a href="#">맨 위로</a></p>
</body>
</html>
id값을 먼저 정의하고 → a태그로 링크를 걸어줄 때 '#'을 통해 id를 연결해 주는 것을 확인할 수 있다.
블로그 이전 : https://rachelslab.tistory.com/