1. a link
서로 다른 페이지의 전환(메뉴표현)하거나 url 연결로
웹페이지로 이동할 때 사용
inline 형태로 화면 영역만큼 나열되는 성격
링크 연결 시 기본 스타일(글자색, 밑줄,손모양의 커서)
브라우저 내에서 바로 전환
<a href="링크주소/">HTML 링크</a>href에 명시되어 있는 사이트로 이동
절대 경로 (굳이 index.html 작성하지 않고 /만 기재해도 절대 경로인 메인 페이지로 이동 )
절대경로 : 출발부터 시작해 도달하는 경로가 모두 일치하기 때문에 절대경로라고 부른다.
http(https) >> 원격의 댜른 서버를 찾는다.
>> 최상위 경로 (root 경로)
서버의 루트 폴더로부터 경로 시작을 의미,
//를 사용하는 경우도 있다. 인터넷 주소, https://(필수!)
텍스트가 클릭 전 파란색 / 클릭 후 붉은색으로 변함
코드
<a href="https://www.naver.com">네이버</a>결과
2. sub 페이지
메뉴를 클릭해 서브 페이지로 전환
(subpage.html 파일을 하나 만들어둬야한다)
문서가 같은 위치에 있지 않으면 연결이 안된다.
코드
<a href="./subpage.html">서브 페이지 </a>결과
서브 페이지를 클릭하면 만들어둔 subpage.html 로 이동
3. 메일 (mailto)
코드
<a href="mailto:test@test.com">이메일 보내기</a>결과
이메일 보내기
4. 모바일 전화(tel), 모바일 문자(sms)
코드
<a href="tel:01012345678">전화 걸기</a>
<a href="sms:01012345678">모바일 문자</a>5. 파일
코드
<a href="./file/resume.hwp" download>이력서 다운로드</a>결과
이력서 다운로드
6. 임시링크 : 연결할 링크가 없을 때 임의로 넣어둔다.
코드
<a href="#">서비스 바로가기</a>결과
서비스 바로가기
7. 앵커 링크
현재 페이지 내에서 특정 위치로 이동
#서비스 경로 지정 >> 페이지 내에 service 라는 id를 가진 영역이 있다면 해당 영역으로 이동
코드
<a href="#service">서비스 바로가기</a>
<br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section id="service">
<h1>service</h1>
<p>이곳은 서비스 영역입니다.</p>
</section>결과
service
이곳은 서비스 영역입니다.
8. target
(1). _self
기본값 / 현재 브라우저에서 전환
코드
<a href="https://www.naver.com" target="_self">네이버/ 현재 브라우저에서 전환</a>결과
(2). _blank
새 창 전환 / 새로운 도메인 창을 열 때
코드
<a href="https://www.naver.com" target="_blank">네이버 / 새 브라우저에서 전환</a>결과
(3). _parent
웹페이지가 프레임셋(frameset)으로 구성되어 있을 때, 연결된 페이지가 부모 프레임에서 열린다.
코드
<a href="https://www.naver.com" target="_parent">네이버</a>결과
(4). _top
웹페이지가 프레임셋(frameset)으로 구성되어 있을 때, 연결된 페이지가 모든 프레임을 벗어나 전체 창에서 열린다.
코드
<a href="https://www.naver.com" target="_top">네이버</a>결과
