티스토리 뷰
A
<a>: anchor 다른 페이지, 같은 페이지 위치, 파일, 이메일 주소, 전화번호 등 url로 연결할 수 있는 하이퍼링크 설정
속성
download: 파일은 다운로드하는 용도
href: 링크 url, 필수처럼~ 써야한다. 생략 가능하지만.
hreflang: 링크 url의 언어를 설정
rel: relation 현재 문서와 링크 url의 관계를 설정
target: 링크 url의 표시위치, _self 현재 화면에서 페이지 뜨도록(default), _blank 새로운 화면에 페이지 뜨도록
type: 해당하는 url의 MIME타입, 굳이 명시 안 한다.
인라인 요소이지만 버튼을 css로 꾸미게 될 경우 블록 요소로 변경 후 사용하는 게 일반적이다.
a태그 예제
<body>
<a target="_blank" href="https://www.google.com">Google</a>
<a href="./RAEDME.md" download>README.md</a>
<a href="./images/증명사진_노은신.jpg" download>Image download</a>
</body>
target="_blank" 새로운 창으로
href="~~" url표시
download="download" ☞ download 동일
a태그 예제 2
- index.html
<body>
<a target="_blank" href="https://www.google.com">Google</a>
</body>
- main.css
a {
font-weight: bold;
width: 100px;
line-height: 40px;
height: 40px;
border: 1px solid black;
border-radius: 6px;
display: block;
text-align: center;
}
a:hover {
background: coral;
}a태그를 버튼으로 사용할 때에는 꼭 display: block;를 통해서 블록 요소로 변경해야만 한다.
a:hover {} a태그에 마우스를 올렸을 때 반응을 나타낸다.
a태그 예제 3
같은 페이지로 이동
id는 중복될 수없다. 고유해야만 한다.
# 해쉬는 링크로 이동하는 선택자가 된다.
- index.html
<body>
<ul>
<li><a href="#title1">제목1</a></li>
<li><a href="#title2">제목2</a></li>
</ul>
<h2 id="title1">제목1</h2>
<h2 id="title2">제목2</h2>
<h2 id="title3">제목3</h2>
</body>아래의 h2태그에 id를 설정한다. id값은 중복될 수없다.
a태그의 href를 통해서 이동할 영역의 id를 입력한다. #title1 #빠뜨리면 안 된다.
- main.css
h2 {
padding-bottom: 1000px;
}css에서 h2의 영역을 멀리 두기 위해서 padding-bottom을 1000px로 설정
위의 주소창을 보면 #title2라는 주소가 추가로 붙어있는 것을 확인할 수 있다.
'HTML CSS JS' 카테고리의 다른 글
| HTML / 요소 - 인라인 텍스트 - DFN, CITE, Q, U, CODE, KBD, SUP, SUB, TIME, SPAN, BR, DEL, INS (0) | 2021.06.03 |
|---|---|
| HTML / 요소 - 인라인 텍스트 - ABBR (1) | 2021.06.03 |
| HTML / 요소 - 문자 콘텐츠 - DL, DT, DD, P, HR, PRE, BLOCKQUOTE (0) | 2021.06.03 |
| HTML / 요소 - 문자 콘텐츠 - OL, UL, LI (0) | 2021.06.03 |
| HTML / 요소 - 콘텐츠 구분 (0) | 2021.06.03 |