'링크'는 웹문서가 다른 문서와 구별되는 가장 큰 특징입니다. 링크를 클릭하면 링크가 연결된 곳으로 이동합니다.
링크는 <a>태그를 사용합니다. 텍스트와 사용하면 텍스트링크가 되고, 이미지와 사용하면 이미지 링크가 됩니다.
<a href="링크할주소" [속성="값"]>텍스트</a>
<a href="링크할주소" [속성="값"]><img src="이미지경로"></a>
<a>태그 안에 사용할 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| href | 링크한 문서나 사이트이 주소을 입력합니다. |
| target | 링크한 내용이 표시될 위치(현재창 또는 새 창 등)를 지정합니다. |
| download | 링크한 내용을 다운로드 합니다. |
| rel | 현재 문서와 링크한 문서의 관계를 알려줍니다. |
| hreflang | 링크한 문서의 언어를 지정합니다. |
| type | 링크한 문서의 파일 유형을 알려줍니다. |
링크는 기본적으로 파란색으로 표시됩니다. 또한 한번 클릭한 링크는 보라색으로, 링크를 활성화시키면 빨간색으로 표시됩니다.
하지만 요즘은 디자인요소가 많아서 링크를 디자인에 맞게 스타일을 많이 수정 합니다.
<a href="#">기본링크</a>
스타일을 하는 방법은 3가지 방법이 있습니다. 여기서는 인라인 방식으로 수정을 해보겠습니다. 링크의 밑줄을 주고, 색상을 검은색으로 변경해보겠습니다.
<a href="#" style="text-decoration: underline; color:black;">스타일 수정된 링크</a>
링크를 클릭하면 기본적으로 해당링크로 이동을 합니다. 이동하는 방식을 target속성을 이용하여 여러가지로 방식으로 지정할 수 있습니다.
| 속성 | 설명 |
|---|---|
| _blank | 링크 내용이 새 창이나 새 탭으로 열립니다. |
| _self | target 속성의 기본 값으로 링크가 있는 화면에서 열립니다. |
| _parent | 프레임을 사용했을때 링크 내용을 부모 프레임에 표시합니다. |
| _top | 프레임을 사용했을때 프레임에서 벗어나 링크 내용을 전체화면에 표시합니다. |
<a href="링크주소" target="_blank">새탭으로 열리는 링크</a>
링크는 기본적으로 다른문서로 이동하지만 한 문서에서도 이동을 할 수 있습니다.
앵커(anchor)라고 불리는 이 기능은 페이지가 긴 웹문서에서 특정요소를 클릭하면 그 위치로 한번에 이동합니다.
앵커를 사용하려면 이동하고 싶은 곳에 id속성을 이용해 이름을 만듭니다. 만약 여러군데이면 각각 다른이름을 사용해야 합니다.
<a>태그에 href속성에 #id형식으로 입력하면 해당 id로 이동을 합니다.
<태그 id="앵커이름">도착지</태그>
...
...
<a href="#앵커이름">...</a>
웹에서 사용할 수 있는 이미지 파일 형식은 gif, jpg/jpeg, png` 등입니다.
웹 문서에 이미지를 삽입할때는 <img>태그를 사용합니다. 이때 src 속성을 사용해 이미지 경로를 알려주어야 화면에 이미지를 표시할 수 있습니다.
<img src="이미지경로" [속성="값"]>
이미지 위치를 알려주기 위해 경로를 표시해야하는데 여러 상황에 맞게 표시할 수 있습니다. 현재문서와 같은 폴더 또는 위치에 있다고 한다면 파일명만 적으면 됩니다. 또는 현재 위치를 나타내는 ./ 를 사용할 수 있습니다.
예: <img src="./img.jpg">
현재 문서보다 하위에 있다면 하위폴더명을 적고 이미지명을 적습니다.
예: <img src="./하위폴더명/img.jpg">
현재 문서보다 상위에 있다면 ../ 를 사용하고 두단계 상위라면 ../../ 를 두번사용합니다.
현재 문서보다 상위에 있는 예: <img src="../img.jpg">
이 경로는 이미지경로와 더불어 모든 파일에 적용됩니다. 예를들어 css파일경로, javascript파일경로 등등...
././폴더명/파일명./폴더명/하위폴더명/파일명../파일명../../파일명이처럼 ../를 사용하는것을 상대경로라고 합니다. 상대경로는 폴더의 위치에 따라서 변할수도 있습니다.
변하지 않는 경로가 있는데 이것을 절대경로라고 합니다. 예를들어 http://abc.com/images/img.jpg 처럼 완전한 주소를 말합니다.
alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용합니다.
대체텍스트는 웹문서에 삽입한 이미지는 시각적인 요소이기 때문에 시각 장애인은 그 내용을 알 수 없습니다.
웹문서를 읽어주는 화면 낭독기도 문서 상의 텍스트만 읽어주기 때문에 이미지를 만나면 그대로 건너뜁니다.
하지만 <img> 태그의 alt 속성을 이용하면 이미지에 대한 설명을 넣을 수 있고, 그 속성의 내용을 화면 낭독기가 읽어줍니다.
하지만 불릿같은 이미지나 의미가 없이 시각적으로 꾸미기위한 이미지는 alt값을 비워둡니다. 예: alt=""