[chap.4]링크걸기

1. 같은 사이트 내의 페이지로 링크하기

지금까지는 외부사이트로 링크하는 법을 배웠다. 하지만 홈페이지를 운영하려면 내부끼리의 연결도 필요하다
Home , About, Contact 등등.. 처럼 이를 위해선 먼저, 각각의 파일들을 어디에 저장할지 정해야한다.
When making multi-page static websites, web developers often store HTML files in the root directory, or a main folder where all the files for the project are stored.

하나의 폴더에 세개의 다른 파일이 있다

we can link web pages together using a relative path.

같은 파일에 있는 페이지는 위와같이 간단한 텍스트로 링크할 수 있다.
a local file (a file on the same website, such as ./index.html)
an absolute path (a full URL, like https://www.codecademy.com/learn/learn-html which is stored in a different folder).
The ./ tells the browser to look for the file in the current folder.

2. 이미지에 링크걸기

지금껏 배운 하이퍼링크의 형태는 위와 같았다.

이미지를 넣을 땐 위와같이 텍스트 대신 이미지 소스(with alternative text)를 입력해주면 된다.

3. 같은 페이지의 다른 섹션 링크하기

어떤 페이지는 content가 너무 많아서 길게 늘어지기도 한다. 이런 경우 원하는 섹션을 바로 찾을 수 있도록 같은 페이지 내에 링크를 걸기도 한다. 흔히 볼수 있는 스크롤 바로 옆의 TOP, BOTTOM 버튼이 그 예시이다.
혹은 아래와같이 페이지 앞부분에 목차를 두고 클릭 시 해당 섹션으로 이동시켜주는 등 활용이 다양하다.

링크를 만들기 위해서는 먼저 이동될 타겟에 id를 부여해야한다.

id 이름은 하나이상의 문자로 구성, 대소문자를 구분한다.
숫자로 시작할 수 없고 공백을 포함할 수 없다.
html 문서에는 동일한 id 이름 가진 요소가 두 개 이상 있을 수 없다.

위의 페이지는 Brown Bear에 대해 소개하는 페이지의 일부이다. 앞부분 목차에 하이퍼링크를 걸어 텍스트 클릭 시 각 섹션으로 스크롤을 이동시켜주려고 한다. 만드는 과정을 살펴보면 우선

위는 아직 목차를 만들기 이전의 상태이다.

 

먼저 목차를 만들어보자.

여기서 Introduction을 클릭하면 h2의 About Brown Bears로 이동하게끔 만든다고 하자.

우선 타겟이 될 About Brown Bears에 id를 부여해 주어야한다.

위치는 바로 위 <div>로 설정하려한다.

 ;

링크할 텍스트엔 하이퍼링크 "#id"를 넣어주면 끝!