HTML/CSS : 하이퍼링그 <a> 태그로 링크 달기

오늘은 웹페이지에서 하이퍼링크를 연결하는 a 태그에 대해서 정리하려고 한다. 

a 태그는 href 속성을 가지고 있고, 이는 이동할 주소를 지정해주는 필수속성이다.

기본적인 틀은,

<a href="URL">설명</a> 이다. 여기서 URL은 실제 유효한 링크여야 하고, 만약 링크를 어디서 열것인지를 정하고

싶다면 뒤에 target을 지정해주고 </a>로 닫아주면 된다. 

예를 들면,

 

네이버는 현재 창에서 열리고, 다음은 새 창에서 열린다.

코드 적용했을 때 웹 페이지 화면

디폴트 값은 현재 브라우저에서 열리는 것이기 때문에 새 브라우저로 열고 싶다면 "_blank"를 지정해 주면 된다. 

target = "_blank"  : 새브라우저

         = "parnet" : 부모창에서 열림

         = "_self" : 현재 브라우저(디폴트 값)

         = "_top" : 최상위 브라우저에서 열림

         ="프레임이름" : 지정프레임에서 열림

 

 

여기서 parent의 경우 현재 프레임의 부모 프레임 페이지에서 새 페이지가 열린다. 예를 들면 창 A에서 B를 새로 열었다가 B에서 다시 새 창을 _parent로 연다면 창 A에서 열리는 것이다. 

"_top"와 헷갈릴 수 있는데, "_parent"는 바로 이전창(부모창)에서 열리고 "_top"는 가장 최고의 부모인 최상위 창에서 새페이지가 열린다. 

이건 다시 코딩을 해보면서 따로 정리를 해야겠다.

 

쨌든, 링크의 경우 보통 밑줄 처리가 되고, 열었던 창은 붉은 색으로 해놓는데 요즘에는 스타일시트로 밑줄을 제거 하는 것이 일반적이라고 한다. 점점 여백의 미가 코딩에 까지........! 

 

만약 웹 페이지 링크가 아니라 파일링크를 걸고 싶다면?

a href 속성 상, 파일 링크를 지정할 때 상대 경로로 지정이 되며, 현재 페이지 기준으로 / 를 사용해서 디렉토리를 구분해 준다. 상위 디렉토리는 .. 으로 표시한다.

 

파일 별 링크

위 이미지에서 현재 디렉토리가 html이고 현재 문서가 linkdoc.html이라면 basic.html 파일은 파일명 그대로 입력하면 되지만 sub폴더에 있는 xmp.html의 경우 sub/xmp.html로 넣어주어야 한다. html보다 상위 폴더인 html5 하위에 있는 content.html 파일의 경우 상위 디렉토리 안에 있으므로, ../content.html 로 넣어주어야 한다.

 

거어어업나 헷갈리는데, 하다보면 뭐... 익숙해 지겄지.................