html 파일경로와 링크의 이해

파일경로는 웹사이트의 폴더 구조에서 해당하는 위치는 설명합니다. 파일경로는 이미지, 링크, 스타일시트, 자바스크립트등 이 주로 경로에 쓰입니다.

html을 다루다 보면 이미지나 모든 경로 설정에 있어서 한번쯤은 제대로 경로설정을 했는데도 불구하고 링크가 제대로 작동이 되지 않거나 이미지가 경로에 맞지 않아 깨지는 상황들이 많이 있습니다. 

 

경로에는 절대경로, 상대경로 두가지가 있습니다.

절대경로란?

<img src="http://nimolove.tistory.com/images/image.jpg" alt="로고이미지">

절대경로는 해당하는 파일의 웹사이트 해당하는 폴더의 절대적인 위치를 말합니다. 상대경로에 비해 주소가 굉장히 길지만 틀릴 위험요소가 없다는 장점이 있습니다.

상대경로란?

1. <img src="images.jpg" alt="로고이미지">

현재 페이지와 같은 폴더에 위치해 있는 파일을 설명합니다.

2. <img src="images/images.jpg" alt="로고이미지">

현재 페이지의 images폴더 안에 포함되어 있는 이미지파일을 설명합니다.

3. <img src="/images/images.jpg" alt="로고이미지">

사이트의 루트에 포함되어 있는 이미지 파일을 설명합니다. 여기서 사이트 루트란 http://nimolove.tistory.com/ 까지의 주소를 사이트 루트 라고 합니다.

4. <img src="../images/images.jpg" alt="로고이미지">

앞에 ../ 은 해당하는 문서의 한단계 위 폴더에서 이미지 폴더 안에 파일을 설명합니다.

-skin

 -css

 -images

 -html

  -skinfile.html  <-- 이 위치에서 상위 이미지 폴더에 사용할때 ../ 한단계 위로가는 경로를 사용하면 됩니다.

외부 파일을 사용할땐 절대경로, 내부파일을 사용할때는 상대경로를 이용하면 됩니다.

2017.07.30 - [웹(IT) 정보/css] - CSS3 Button-스타일로 버튼만들기

그럼 여기서 이미지 소스 안에있는 alt에 관해 잠시 알아보겠습니다. 이미지는 눈에 보이는것이 전부입니다. 여기서 이미지를 표현하지 못하였을때는 어떻게 해야할까요? 구글이 그림을 이해해서 텍스트로 번역을 해줄까요? 요즘 그림을 번역해서 정보를 찾아주는 스마트한 세상이긴 하지만 아직까진 완벽하지도 않고 정확도도 굉장히 떨어집니다. 그래서 이미지를 텍스트로 대신 표현해줄 제목같은 부가적인 설명입니다.

예로 내가 보여주는 이미지는 텔레비전이라면 alt값에 텔레비전 또는 *지 스마트 텔레비전 이라고 써놓으면 인터넷 속도가 느려서 다운받지 못하였을때 또는 링크가 잘못됐을때 또는 이미지 서버가 잠깐 셧다운 됐을때 등 여러가지상황에 맞춰서 부가적인 정보를 빼먹지 않도록 하는 것입니다. 또한 이미지는 볼수 없으면 알수없는 것 입니다. 시각장애인 분들이 웹을 이용할때 우리가 고려하지 않으면 이용하기에 불편함이 있으므로 이러한 부분들도 다 생각하여 제작하여야 합니다. 그래서 웹표준, 웹접근성에는 이미지사용을 자제하며 사용은 하되 꼭 이미지 부가 설명인 alt값을 넣는것을 권고 하고 있습니다. 

링크의 이해

html링크는 <a> 태그로 정의됩니다.

<a href="http://nimolove.tistory.com/">blog link</a>

href의 속성은 링크의 목적지 주소를 적어주며 a태그는 링크를 걸 텍스트나 이미지를 감싸주면 됩니다. 기본적으로 링크는 다음과 같이 모든 브라우저에서 같이 표현됩니다.

방문하지 않은 링크에는 기본적으로 파란색으로 밑줄이 그어져 링크가 표현됩니다.

한번 방문한 링크에는 자주색으로 밑줄이 그어져 링크가 표현됩니다.

활성 링크에는 빨간색 밑줄이그어져 링크가 표현됩니다.

a:link, a:visited, a:hover, a:active css에는 이렇게 표현이 되어 사용자가 직접 css수정으로 링크 색상 및 및줄등의 표현을 수정할 수 있습니다. 

링크의 대상에는 target 다음과 같습니다.

<a href="http://nimolove.tistory.com/" target="_self">blog link</a>

_self 내가지금 열고 있는 창 그대로 클릭한 그대로 새창이나 새탭없이 그대로 이동됩니다.

_parent 부모창으로써 레이어 팝업을 띄웠을때 부모프레임에서 페이지링크를 이동하게 됩니다.

_new 새로운 탭에서 열어 페이지를 이동하게 됩니다. 

2017.08.15 - [웹(IT) 정보/css] - css navigation bar 네비게이션 메뉴 바 만들기

해당페이지에서 내용이 많을때 예전에는 앵커로 사용했었지만 지금은 id로 사용합니다.

바로 이동하고 싶은 내용의 태그에 id를 미리 입력해둡니다.

<div id="bookmark1">북마크1페이지</div>

위와같이 소스를 만들어 둔 후

<a href="#bookmark1">북마크1</a>를 클릭하면 바로 해당 id로 페이지가 이동하게 됩니다. 일명 내부페이지 링크라고도 하며 북마크라고 하기도 합니다.

html문서를 제작하다가 보면 링크의 주소를 잘못입력하여 한참 해매는 경우도 있고 이미지명을 잘못입력하여 분명히 서버에 올라갔는데도 불구하고 왜 안되는지 이해가 안될때는 경로와 오타를 잘 확인하시면 문제점을 쉽게 발견할 수 있습니다.