4일차_페이지 나누고 연결(링크)하기_20210628

페이지 나누고 연결(링크)하기

 

<a>태그

<a href="https://naver.com">NAVER 네이버</a>

: <a>태그 내부에 있는 글자에 href의 링크로 이동하도록 버튼이 생성됨

<a>태그 내부에 있는 글자에 클릭 시 해당 경로로 이동 할 수 있는 링크가 걸려있음

 

<a href="/"></a>

: 경로 '/' 앞에는 접근 가능한 기본 주소가 생략되어있다

 

<a href="/about/about.html">About</a>

: 루트 폴더 아래의 about폴더 안에 about.html 파일이 존재하면 해당 링크로 이동 가능하다

: http://127.0.0.1:5500/about/about.html

About 글자의 링크를 클릭하면 /about/about.html 으로 이동된다 (http://127.0.0.1:5500/about/about.html)

<index.html>

: 브라우저는 해당 경로가 폴더까지만 지정되었을 경우, index.html을 자동으로 찾아서 띄워주게된다.

예)

<a href="/about/index.html">About</a>

<a href="/about">About2</a>

: 두 사례 모두 같은 about 폴더 내의 index.html 화면을 보여주게 된다.

about 폴더내에 index.html이 존재하면 브라우저가 자동으로 index.html을 찾는다

index.html이 폴더내에 존재할 경우 index를 띄울 링크에선 폴더까지만 경로를 설정해주면 된다.

<메인페이지로 이동하는 링크>

<a href="/">Home</a>

: 루트 경로에 있는 index.html로 이동하게 된다.

Home버튼 누르면 첫화면으로~

※ 주소의 about이 항상 폴더라고 단정할 수 는 없다.

Router이라고 하는 기술을 통해 페이지 구분을 할 수도 있음

다만, 꼭 라우터기술이 아니더라도 폴더로 구분하는 방법들도 사용할 수 있는 기술이다.

 

구성한 여러 화면들