HTML의 웹 페이지로 리디렉션
Nithin Krishnan
2023년2월19일
서버가 다운되거나 유지 관리중인 경우 사용자를 다시 라우팅하는 다양한 HTML 방법이 있습니다. 사이트에 어떤 종류의 리디렉션 동작이 있어야하는지에 대한 비즈니스 요구 사항에 따라 다릅니다. UI에서 리디렉션을 처리하면 웹 페이지 HTML이 가장 먼저 렌더링되므로 성능이 향상됩니다. 다른 웹 페이지로 리디렉션하는 HTML 방식을 살펴 보겠습니다.
- 메타 새로 고침
- 앵커 태그
메타 새로 고침을 사용하여 HTML에서 리디렉션
HTML에는 브라우저가 인식하는<meta>태그가 있습니다. 이 HTML 태그를 사용하여 브라우저에 언급 된 페이지로 리디렉션하도록 요청할 수 있습니다. 또한 원하는 경우 지연을 프로그래밍 할 수 있습니다.
<meta http-equiv="refresh" content="5;url=https://www.delftstack.com" />
여기에는http-equiv및content와 같은 몇 가지 매개 변수가 포함됩니다.
http-equiv: HTTP 요청 헤더와 유사하며 브라우저가 이해할 수 있도록 추가 정보를 보냅니다. 이 속성은 다양한 값을 허용합니다. 가장 일반적으로 사용되는 것은 브라우저에 예상되는 컨텐츠 유형을 알려주는content-type입니다.refresh는http-equiv의 또 다른 값으로, 브라우저가content속성에 지정된 링크로 이동하도록 지시합니다.content: 리디렉션되고 있음을 사용자에게 알리기 위해 프로그래밍 가능한 지연 (초)을 포함합니다. 계속하려면 리디렉션되지 않고 다시 머물 수 있습니다. URL은 탐색을 수행해야하는 링크입니다.
비고
- 이 방법은 일반적으로 사이트가로드되기 전에 사용자를 리디렉션하기 위해 기본 페이지에서 사용됩니다.
- 메타 태그에 설정된 타이밍에 따라 페이지가로드되면 메타 새로 고침 기능이 자동으로 사용자를 리디렉션합니다.
- 이 코드가 포함 된 웹 페이지는 브라우저 뒤로 버튼으로 액세스하지 못할 수 있습니다.
- URL을 지정하지 않으면 페이지가 다시로드됩니다.
- 페이지에서 메타 리디렉션 태그를 과도하게 사용하지 마십시오. 스팸 콘텐츠가있는 것으로 간주되며 검색 엔진 목록의 평판에 영향을 미칠 수 있습니다.
앵커 태그를 사용하여 HTML에서 리디렉션
HTML의 앵커 태그에 익숙 할 것입니다. 웹 페이지에서 하위 페이지 또는 외부 웹 사이트로 이동하는 데 널리 사용됩니다. 메타 새로 고침 방법과 달리 앵커 태그는 정적입니다. 따라서이를 호출하려면 이벤트, 클릭이 필요합니다. 다음과 같은 방법으로 사용자를 리디렉션하기 위해 앵커 태그를 사용할 수 있습니다.
<a href='https://www.delftstack.com/'>Go to Delfstack</a>
<a href='/tutorial'>Tutorials</a>
- 첫 번째 방법은
<a>태그의 href 속성에 값으로 전달 된 전체 URL (https://www.delftstack.com/)을 사용합니다. 이는 응용 프로그램을 종료하고 외부 사이트로 이동해야하는 경우에 효과적입니다. 브라우저 뒤로 버튼을 사용하여 원본 페이지로 돌아갈 수 있습니다. - 두 번째 방법은 사이트 내 페이지로 이동하는 데 사용됩니다. 이 경우 의도 한 페이지의 상대 경로 (
/tutorial)를 언급합니다. 브라우저는이 상대 경로를https://www.delftstack.com/tutorial로 변환합니다.
비고
- 이 방법은 탐색을위한 클릭 이벤트 인 사용자 상호 작용을 기반으로합니다.
- 웹 사이트 내에서 또는 다른 웹 사이트로 라우팅하기 위해 앵커 태그 리디렉션 방법을 사용할 수 있습니다.
- href 속성에 URL을 전달하지 않은 경우 앵커 태그를 클릭하면 현재 페이지가 다시로드됩니다.
결론
비즈니스 요구 사항에 따라 메타 새로 고침 방법을 사용하여 사용자가 유지 관리 사이트 웹 페이지를 방문하자마자 리디렉션하는 것이 좋습니다. 사용자에게 재 라우팅을 위해 메시지를 표시하기 위해 지연을 도입 할 자유를 제공합니다. 탐색이 사용자 클릭과 같은 이벤트를 기반으로하는 경우 앵커 태그를 사용하는 것은 매우 일반적입니다.