티스토리 뷰

WEB/HTML기초

<a>요소 - 링크를 걸어보자

찐망고 2023. 9. 15. 11:41
728x90
반응형

안녕하세요 찐망고입니다.

a요소는 문서와 문서를 연결하거나

이미지를 클릭하여 페이지가 넘어가거나

메일을 보내거나 

같은 페이지끼리 위아래로 연결하려고 할 때도 사용합니다.

 

a는 인라인 요소지만 

블록요소를 포함할 수 있는 요소이며

블록요소를 포함할 땐 css를 이용하여 display: block; 혹은 inline-block을 지정해서 

width, height, margin, padding을 적절히 잘 넣는 게 중요합니다.

 

일단 문서끼리 연결을 하려면 경로를 이해해야 하는데

경로 모르면 안 되니까 이전 포스팅 보고 오시길 바랍니다 

 

상대경로와 절대경로

안녕하세요 찐망고입니다. 오늘은 경로를 포스팅해볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나 이미지를 띄울 때 많이 사용합니다. 경로가 틀어지지 않아야 링크도 잘

uiweb.tistory.com

 

href 속성 안에 넣을 수 있는 값들입니다.

<!-- 임시링크 -->
<a href="#">임시링크</a>

<!-- 외부경로 -->
<a href="https://www.google.com">구글 바로가기</a>

<!-- 상대경로 -->
<a href="test/test.html" target="_blank">테스트문서 바로가기</a>

<!-- 이메일경로 -->
<a href="mailto:admin@admin.com">관리자에게이메일보내기</a>

 

target속성은 링크 걸린 페이지를 새 탭으로 열 때 사용

 

 

href속성에 id값에 해당하는 값을 넣으면 페이지 내에서 해당요소로 이동합니다.

header에 있는 메뉴를 건너 바로 메인콘텐츠로 넘어갈 때 많이 사용하는데,

아무래도 스크린리더기 같은 보조프로그램의 도움을 받는 분들께 유용한 작업 방법 중 하나입니다.

<body>
<div id="skip">
	<a href="#contents">컨텐츠바로가기</a>
</div>
<div id="wrap">
 <header>...</header>
 <div id="contents">
 	...
 </div>
 <footer>...</footer>
</div>
</body>
#skip {
	position: relative;
	z-index: 99;
}
#skip > a {
	position: absolute;
	display: block;
	width: 100%;
	height: 35px;
	background: #333;
	color: #fff;
	line-height: 35px;
	text-align: center;
	left: 0;
	top: -35px;
}
#skip > a:focus, 
#skip > a:active {
	top: 0;
}

 

추가로 download라는 속성이 있는데

<a href="1751850628.png" download="filename">
    <img src="1751850628.png" alt="이미지">
</a>

 

href에 지정된 파일을 다운로드하여주는 속성이고, 

엑섹파일이나 이미지파일정도만 가능합니다. 

download속성으로만 사용가능하나 값을 추가하면 다른 이름으로 저장이 가능합니다.

(서버에 업로드 된 파일만 가능)

728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'WEB > HTML기초' 카테고리의 다른 글

youtube iframe 연결하여 자동 재생하기  (1) 2024.01.03
HTML문서에서 이미지 불러오기  (0) 2023.09.18
상대경로와 절대경로  (0) 2023.09.12
HTML 인라인 요소: <strong>, <em>, <mark>를 통한 텍스트 강조 방법  (0) 2023.09.07
HTML <blockquote>, <q>, <cite>요소  (1) 2023.09.05