-
2. HTML이란? 무엇일까요!카테고리 없음 2024. 5. 29. 23:05
안녕하세요! 오늘은 저번 블로그에 이어서 HTML에 속하는 <a>태그에 대해 알아보는 시간을 가져보아용:)
- 목차
- 하이퍼 링크를 걸어주는 <a>태그
- 일반적인 사이트 링크 걸기
- href의 속성값과 기능
- 절대경로란?
- 상대경로란?
1. 하이퍼 링크를 걸어주는 <a>태그
a태그는 앵커의 약자로, 글자 또는 이미지를 통해 해당 페이지로 연결해주는 태그입니다.
반드시 href속성을 이용해서 연결하고자 하는 사이트에 주소나 페이지의 주소를 연결해줘야 합니다.(기본형 예시)
<a href="링크 또는 파일경로 등" target="페이지 전환 시 보여주는 방식" title="링크 설명"></a>
2. 일반적인 사이트 링크 걸기
사이트 링크 거는 방법
1) 파일을 하나 만들어줍니다.
2) !표를 누르고 엔터를 눌러주며 파일의 시작을 알려줍니다.
3. 제목을 지어줍니다. (예시) <tittle>a태그</title>
4. <body> 아래부분에 본인이 걸고싶은 링크를 걸어줍니다.
(예시)
<a href="https://naver.com" target="_blank">네이버</a>
<a href="https://daum.net">다음</a>3. href의 속성값과 기능
1) 일반적인 사이트 링크 : http로 시작하는 링크 주소를 입력하면 해당 사이트로 이동합니다.
2) 파일명.html : 해당 html파일로 연결해주며 이때 절대경로나 상대경로를 이용해야 합니다.
3) mailto:이메일 주소 : 해당 이메일 주소로 이메일을 보낼 수 있게 아웃룩이 연결됩니다.
4) tel:전화번호 : 링크를 클릭하면 컴퓨터에 연결 된 인터넷 전화 또는 모바일에서 전화를 걸 수 있습니다.
5) sms:전화번호 : 링크를 클릭하면 모바일에서 문자를 보낼 수 있습니다.
6) # 당장 연결할 링크가 없는경우 임시로 링크를 걸어주는 속성값 입니다.4. 절대경로
하향경로 방식이라고도 하며 파일들을 모두 감싸고 있는 작업 폴더인 /(root)폴더를 기준으로원하는 파일까지 모든 파일 경로를 써서 나열하는 방식입니다.
예를 들어, 작업폴더 안에 sub폴더가 있고, sub폴더 안에 sub01.html파일이 있다면
sub01.html을 연결하고자 할때 <a href="/sub/sub01.html"></a>이라고 명시하여 연결할 수 있습니다.
단, root로 부터 시작하여 모든 폴더경로와 파일명이 드러나므로 보안에 취약하다는 단점이 있습니다.
-맨 앞의 / : root. 파일 전체를 묶고 있는 프로젝트 폴더. =최상위폴더를 의미합니다.
(예시) <a href="/sub/sub01.html"></a>
=> 최상위폴더 안에 서브폴더안에 sub01.html 파일을 연결한다를 뜻합니다:)5.상대경로
상향 경로 방식이며 현재 작성하고 있는 파일을 기준으로 연결하고자 하는 파일까지를
기호로 나타내며 표현하는 방식입니다.폴더 경로를 기호로 표현하기 때문에 절대경로에 비해 폴더 경로 노출 우려가 적어 보안에 더 유리하여 많이 쓰는 방식입니다.
/ : root. 최상위 폴더
./ : 현재 폴더. 지금 작성하고 있는 파일이 담긴 폴더를 뜻합니다.
../ : 한 폴더 위로. 상위폴더를 뜻합니다.target="_blank" 란 새창으로 열어주는 것입니다.
title="구글로 가기" 란 글자 박스를 만들어 주는 것입니다.자! 이렇게 <a>태그에 대해서 배워봤는데요! 솔직히 글이랑 영상만 보면 "이게 뭔소린가" 싶을거에요!
제가 그랬거든요>< 근데 블로그를 작성하면서 반복해서 작업을 하다 보니까 조금은 익숙해 진 것 같기도 한 것? 같아용
저는 처음부터 잘하는 사람은 없다고 생각합니다. 노력하다보면 언젠간 답이 나오지 않을까요?!
수많은 웹디자이너, 웹퍼블리셔, 개발자 분들을 따라가려면 *1000000000000000000배는 열심히 해야 된다고 생각합니당 늦게 시작한 만큼 더 열심히 해서 언젠간 꼭 멋있는 직장인이 되있을거에요! 할 수 있겠죵
저와 같이 지금 막 시작한 입문자, 초보자들 분들 제가 언제나 응원할게요:) 저희 함께 힘내 보아용
오늘 하루도 모두 수고 많으셨습니다!
