안녕하세요 찐망고입니다.
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속성으로만 사용가능하나 값을 추가하면 다른 이름으로 저장이 가능합니다.
(서버에 업로드 된 파일만 가능)
'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 |