티스토리 뷰
728x90
반응형
안녕하세요 찐망고입니다.
a요소는 문서와 문서를 연결하거나
이미지를 클릭하여 페이지가 넘어가거나
메일을 보내거나
같은 페이지끼리 위아래로 연결하려고 할 때도 사용합니다.
a는 인라인 요소지만
블록요소를 포함할 수 있는 요소이며
블록요소를 포함할 땐 css를 이용하여 display: block; 혹은 inline-block을 지정해서
width, height, margin, padding을 적절히 잘 넣는 게 중요합니다.
일단 문서끼리 연결을 하려면 경로를 이해해야 하는데
경로 모르면 안 되니까 이전 포스팅 보고 오시길 바랍니다
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 |
강조 <strong>요소와 <em>요소 (0) | 2023.09.07 |
HTML <blockquote>, <q>, <cite>요소 (1) | 2023.09.05 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 웹표준
- margin
- html박스모델
- 웹접근성
- CSS3
- Slick
- uidesign
- 코딩교육
- slick-slider
- 자바스크립트숫자카운트
- 포토샵합성
- slickAPI
- JavaScriptTips
- boxmodel
- 시멘틱마크업
- JavaScript
- 웹디자인
- 크로스브라우징
- css그리드
- 슬라이드플러그인
- uxdesign
- padding
- css
- uiux
- 폼디자인
- Border
- 스마트폰해상도
- UI디자인
- 프로그래밍기초
- 피그마플러그인
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함