Link (링크)

• 정보가 동일선상에 있는 것이 아니라 다중으로 연결됭 상태(하이퍼링크)
• HTML에서 한 텍스트나 문서에서 다른 문서로 건너뛰어 읽는 기능
• 주로 이 기능을 a태그를 통해 처리한다.

a태그 사용

• url을 정확히 작성해야 한다.

<a href="http://www.naver.com" target="_blank">네이버</a>

경로

• 시스템에서 파일의 위치를 나타내는 방법
• 절대경로와 상대경로라는 개념으로 구분된다.

절대경로

• 현재 작업 디렉터리(폴더)와 관계없이 특정파일의 절대적 위치를 나타내는 개념
• 루트 디렉터리를 기준으로 파일의 위치를 나타낸다.

상대경로

• 현재 작업 디렉터리를 기준으로 특정 파일의 상대적 위치를 가리킨다.

a태그 href 속성에서 사용가능한 값

• 절대url : 웹사이트 url (http://www.naver.com)
• 상대url : 자신의 위치를 기준으로 한 대상의 url
• fragment identifier : 페이지 내의 특정 id를 갖는 요소의 링크
• script : 자바스크립트 함수를 직접 넣거나 코드를 직접 부여할 수 있다.

a태그의 다른 속성들

• target : 링크를 클리했을 때 창을 어떻게 오픈할 것인지 지정하는 방법
• _self : 링크를 클릭했을 때 연결 문서를 현재 창(윈도우)에서 오픈
• _blank : 링크를 클릭했을 때 연결 문서를 새로운 윈도우나 탭에서 오픈

fragment identifier 사용예시

• 웹 사이트에서 사용해본 적이 있을 것이다.
• 사용하지 않을 것 같으면서도 사용하는 경우가 있다.
• 맨 아래의 a태그를 클릭하면 맨 위의 a태그가 있는 곳 까지 이동된다.

<a href="" id="point">point</a>

<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias atque, magni maxime deleniti unde optio, mollitia harum quibusdam beatae eius obcaecati fugit soluta omnis, iure accusamus dolor temporibus itaque vero?</h1>

<a href="#point">클릭! 어디로 갈까요?</a>

HTML 이미지

• 2차원 평면 위에 그려진 시각적 요소
• img 태그를 통해서 저장되어있는 혹은 외부의 이미지를 불러올 수 있다.

img 태그 구조

<img src="이미지경로/이미지명" alt="이미지를 못찾을때 나타내는 문자">

이미지 크기 조정

• 아래의 방식은 해당 이미지의 크기를 확실하게 고정하고 싶을 때 사용한다.

<img src="img/2.png" alt="이미지를 찾을 수 없습니다." width="150" height="150">

• 태그 내부에 스타일을 지정한 것은 위의 방법과 똑같지만 아래의 방식은 상황에 따라서 크기 조절이 가능하다.

<img src="img/3.png" alt="이미지를 찾을 수 없습니다." 
style="width:600px; height: 600px;">

a + img 태그 응용

• 이미지를 클릭했을 때 다른 웹 페이지로 이동할 수 있다.

<a href="http://www.google.com">
    <img src="img/3.png" alt="">
</a>