1. <a> 태그
- 기본 형식
<a href="이동할 위치">링크를 걸어 줄 내용물(텍스트, 이미지)</a>- 주요 속성
• href="URL" -> 링크를 통해 이동하려는 곳의 경로/ 주소 지정
<body>
<a href="http://www.naver.com">네이버</a><br/><br/>
<a href="http://www.naver.com"title="네이버">
<img src="naver.gif></a><br/><br/>
<a href="http://www.naver.com">여기를 클릭하세요
<img src="naver.gif></a><br/><br/>
원래 크기로 그림을 보려면 여기를
<a href="smile.gif">
<img src="smile.gif width="50"></a>클릭!
</body>2. target="창이름" [링크된 내용이 표시될 창을 지정]
: 링크가 클릭 되었을 때 링크로 연견된 새로운 내용이 표시될 창 지정
target 속성의 값
| _blank | 새로운 창(탭)에서 링크된 문서를 엶 |
| _self | (기본값). 현재의 창(탭)에서 링크된 문서를 엶 |
| _top | 현재의 창이 프레임으로 구성된 경우, 모든 프레임이 사라지고 하나의 화면에서 문서를 엶 |
| _parent | 부모 프레임에서 링크된 문서를 엶 |
| 프레임명 | 링크된 문서를 표시할 프레임의 이름을 직접 지정 |
<body>
<a href="http://naver.com"target="_self"> 네이버(현재창)</a><br/><br/>
<a href="http://naver.com"target="_blank"> 네이버(새로운 창)</a>
</body>3. download [href 속성에 의해 지정된 파일을 직접 다운로드]
- 링크 클릭 시 href 속성에서 지정한 파일을 별도의 브라우저에서 열지 않고 직접 다운로드하여 표시
<body>
꽃 그림을 다운로드 받으려면
<a href="flower.jpg"download>
<img src="flower,jpg" width="100"></a>클릭!
<br/><br/>
<a href="files.zip">
압축 파일 또는 실행 파일의 경우 다른 다운로드 방법
</a>
</body>특정 위치로의 이동 : 동일/ 다른 페이지의 특정 위치로 이동하는 경우
링크를 삽입하는 부분
• 같은페이지 내에서 이동하는 경우
<a href="#이동할 특정 위치의 이름">내용</a>
• 다른 페이지의 특정 위치로 이동하는 경우
<a href="페이지경로#이동할 특정 위치의 이름">내용</a>
이동할 위치
<a id="이동할 특정 위치의 이름">내용</a>
-- 적용
<h3>목차</h3>
<a href="#html">HTML이란 무엇인가?</a><br/>
<a href="#css">CSS란 무엇인가?</a><br/>
<a href="#s">JavaScript란 무엇인가?</a><br/>
<a href="html소개.html#html5특징">HTML5 특징(다른페이지로 이동)?</a>
<br/><br/><hr/><br/><br/><br/><br/>
<a id="html">HTML</a>
<p>HyperTextMarkup Language</p><br/><br/><br/><br/><br/><br/><br/>
<a id="css">CSS</a>
<p>Cascading Style Sheet</p><br/><br/><br/><br/><br/><br/><br/>
<a id="s">JavaScript</a>
<p>클라이언트 쪽에서 독립적으로 실행되는 프로그램을 작성하기 위한 스크립트 언어</p>
<br/><br/><br/><br/><br/><br/><br/>
<a href="#top">맨위로</a><body>
<h3>HTML</h3>
<p>HTML5는 차세대 웹문서 표준으로 W3C에서 채택되었다.</p>
<br/>
<a id="html5특징">HTML5 특징</a><br/>
<ol>
<li>강화된 마크업 요소</li>
<li>CSS3의 지원</li>
<li>자바스크립트를 통한 다양한 API 지원</li>
<li>모바일 웹 환경 고려</li>
</ol>
</body>다양한 링크 설정
- 이메일 링크
<a href="malto:이메일주소">텍스트/이미지</a>
<a href="malto:admin@naver.com">이메일보내기</a>
- 자바스크립트 링크
<a href="javascript:자바스크립트코드">텍스트/이미지</a>
<a href="javascript:alert('Hello')">코드실행</a>
- 파일 링크
압축 파일, 실행파일 -> 다운로드
음악 파일, 동영상 파일 -> 플러그인 프로그램으로 실행/저장
<a href="파일명">텍스트/이미지</a>
-- 적용
<body>
궁금한 사항이 있으면 관리자에게 메일을 보내주세요.
<p><a href="mailto:admin@naver.com">이메일 보내기</a></p><hr>
-- 자바스크립트 코드 실행
<p><a href="javascript:alret('Hello!Word!');">자바스크립트 실행</a></p><hr>
-- 음악 파일 연결
<p><a href="song.mp3"title="Military March Op.51">군대 행진곡</a></p><hr>
-- 동영상 파일 연결
<p><a href="golf.wmv"title="TigerWoods">골프</a></p><hr>
-- 압축 파일(실행 파일)다운로드
<p><a href="file.zip"title="Zip파일">다운로드</a></p><hr>
</body>'WEB > HTML' 카테고리의 다른 글
| 테이블의 기본 형식 (0) | 2021.04.13 |
|---|---|
| <iframe> 태그와 이미지 맵 (0) | 2021.04.13 |
| HTML - 그림과 링크 (0) | 2021.04.13 |
| 콘텐츠 그룹핑 (0) | 2021.04.13 |
| 목록 지정 (0) | 2021.04.13 |
