[HTML Tag] <a> 태그와 mailto

<a> 태그는 기본중의 기본인 태그이다. 바로 웹페이지를 웹사이트로 기능 할 수 있게 만들어주는 태그이다.

<a> 태그의 가장 기본적인 속성 href

코딩을 하다보면 a태그를 쓰는순간 뒤에 href=""는 기본으로 써진다. 거의 뭐 직업병ㅎ apple의 a 쓰다가도 href 써질 정도.

<a href="url 링크">링크버튼</a>

a 태그는 기본적으로 이러한 구성을 가지고있다. 

href="" 의 따옴표 안에는 직접적인 호스팅된 홈페이지 주소를 넣어도 되지만 자체적으로 만든 여러페이지의 사이트를 만들 경우 호스팅된 페이지보다는 local 컴퓨터내에서 확인하며 작업해야하기때문에 <a href="sub_page.html"> 이런식으로 가려는 페이지의 이름과 type속성을 써주면된다. 물론 같은 폴더 내에 들어있어야 하며 다른 폴더에 들어있다면 <a href="sub/sub_page.html"> 이런식으로 앞에 폴더명/ 을 써줘야한다.

https://coding-levup.tistory.com/8

웹페이지를 만들기 위한 기본 packaging과 포토샵 이미지 저장하기

폴더 패키징은 위를 참고하자.

---

같은 페이지에서 포커싱 이동 활용

a태그는 같은 html태그 안에서도 이동할 수 있다. id값으로 추적해  스킵메뉴에 쓰이거나 원페이지형식 포트폴리오에서의 네비게이션에서도 쓸 수 있다.

<a href="#one">go to one!</a>
<a href="#two">go to two!</a>   
<div id="one">one</div>
<div id="two">two</div>  

a href="가고자 하는 태그의 #id값"을 주고 클릭하면 그 id값 태그로 포커싱이된다.

 

 

target 속성을 이용해 윈도우 창을 새로 열기

<a href="https://www.naver.com/" target="_blank">네이버로 가기</a>

속성을 넣지 않으면 target값이 _self로 자동으로 설정되어 내가 이용하는 창에서 바로 이동을 한다. 기존 페이지를 남겨놓고 새로 창을 띄우게 하고 싶을때는 target="_blank"를 활용한다. 

target 속성값의 종류

_blank : 새 윈도우

_self : 현재 윈도우

_parent : 부모 윈도우

_top : 브라우저 윈도우

 

partent,top의 경우 거의 쓰지 않으며 self의 경우 자동으로 설정되니 blank만 꼭 외워두면 된다.

Mailto

a href의 속성값으로 "mailto:이메일주소" 를 쓰면 해당 이메일 주소로 바로 이메일을 보낼 수 있다.

<a href="mailto:levup@naver.com">메일보내기</a>

메일보내기 버튼을 만들어준다.

a태그로 작성된 메일보내기 버튼을 누르면

메일 플랫폼을 정할 수 있는 화면이 뜬다. (MAC 기준)

선택해서 로그인하고 메일을 보내면 된다.