본문 바로가기

FrontEnd(Vue, Javascript, JQuery)/이론

<Button>, <a>

Vue를 하면서 RestController을 하게 되면서 무작정 SI때처럼(내가 한 프로젝트만 그럴 수도 있다) RequestParam을

하면 Get이든 Post든 상관이 딱히 없었다. 그런데 RestApi의 경우 RestController을 사용하면서

GET, DELETE, POST, PUT, PATCH를 하게 되면서 GET, POST에 의해 405에러가 떠서 정리를 해야겠다.

 

<Button>

 

 

form안에 있는 값을 넣기 위해서 사용된다. action에 해당하는 URI로 이동하게 되는데

method="GET"을 하게 되면 안에 있는 변수들이 GET방식으로 파라미터를 전달해주고, 

method="POST"를 하게 되면 변수들이 POST 방식으로 진행된다. 기본적으로 숙지하자.

아무것도 작성하지 않으면 기본적으로 POST이다.

 

<a>

a 태그 구성 요소는 다음과 같다.

 

 

a태그의 속성에 대해서 알아보자.

 

1) href

href 속성은 링크된 페이지의 URL을 명시하고 가리킵니다. href속성을 통해서 GET방식으로 해당 URL로 보낼 수

있다. POST는 불가하다.

<a href=https://seo.tbwakorea.com>TBWA DataLab 블로그</a>

위 코드에서 “href” 속성은 “https://seo.tbwakorea.com” 값을 가지고, 링크를 클릭한 사용자들이 페이지를 방문하도록 유도합니다.

다른 <a> 태그 속성과는 달리, href 속성은 필수적으로 사용해야 합니다. 만약, href 속성이 없다면, 연결하고자 하는 페이지에 대한 정보가 없어 링크가 동작할 수 없기 때문입니다.

2) hreflang

hreflang 속성은 링크된 페이지가 무슨 언어로 되어 있는지를 명시하고, 단순히 참고 용도로만 사용됩니다.

이 속성은 반드시 href 속성이 설정되어야만 사용할 수 있고 <a hreflang=”언어 코드”> 형태로 작성할 수 있습니다. 언어 코드는 알파벳 두 글자로 이루어져 있으며, ko(한국어), en(영어), zh(중국어), ja(일본어) 등이 있습니다.

3) rel

rel 속성은 현재 페이지와 링크된 페이지 사이의 연관 관계를 명시합니다. 링크에 대한 더 많은 정보를 검색 엔진에 제공하기 위해 이 속성을 사용하고, rel 속성은 href 속성이 설정되어 있어야만 사용할 수 있습니다.

rel 속성값에는 어떤 값을 작성할 수 있는지 몇 가지 간단히 소개하겠습니다.

  • nofollow: 유료 링크와 같이 검색 엔진이나 봇이 추적해서는 안 될 때 사용함
  • noreferrer: 링크된 페이지가 현재 페이지를 방문자 출처로 인식하는 것을 막을 때 사용함
  • noopener: 사용자가 링크를 클릭할 때 액세스 권한 없이 새 탭에서 링크가 열리도록 할 때 사용함
  • author: 해당 문서의 저자에 대한 링크를 나타낼 때 사용함
  • external: 링크된 문서가 현재 문서와 같은 사이트 내에 있지 않음을 나타낼 때 사용함
  • help: 도움말 문서에 대한 링크를 나타낼 때 사용함

4) target

target 속성은 대표적인 <a> 태그 속성 중 하나로, 링크된 페이지를 클릭했을 때 페이지가 열릴 위치를 명시합니다. 만약, <a> 태그가 target 속성을 포함하고 있지 않다면, 이는 디폴트로 “_self”를 target 속성값으로 가지게 됩니다.

가장 대표적인 target 속성값으로는 링크된 페이지를 새 브라우저에서 열게 하는 “_blank”가 있고, 다른 속성값에 대해서도 간단히 소개하겠습니다.

  • _blank: 링크된 페이지를 새로운 윈도우나 탭에서 오픈함
  • _self: 링크된 페이지를 현재 위치한 페이지에서 오픈함 (기본값)
  • _parent: 링크된 페이지를 현재 페이지의 부모 창에서 오픈함 (부모 창이 없다면 기본값으로 작동)
  • _top: 전체 브라우저 창에서 가장 상위의 창에서 오픈함 (다른 창이 없다면 기본값으로 작동)

5) type

type 속성은 링크된 페이지의 인터넷 미디어 타입(MIME 타입)을 명시합니다. 이 속성은 반드시 href 속성이 설정되어야만 사용할 수 있습니다.

여기서, MIME이란 Multipurpose Internet Mail Extensions의 약자로 웹을 통해 여러 형태의 파일을 전달하는 데 사용하고 있습니다. 종류로는 XML Media, Application, 오디오, TEXT 타입 등이 있습니다.

type 속성 작성 형태는 최상위 유형/하위 유형으로 <a type=”application/javascript”>와 같은 형식으로 작성합니다.

6) download

download 속성은 링크를 클릭할 때 대상 페이지로 연결되지 않고 해당 콘텐츠가 다운로드됨을 명시합니다.

작성 형태는 <a download=”파일 이름”>으로, 속성값에는 다운로드되는 파일의 이름이 들어가야 합니다. 만약 속성값을 생략한다면, 디폴트로 파일의 원래 이름이 사용됩니다.

'FrontEnd(Vue, Javascript, JQuery) > 이론' 카테고리의 다른 글

XSS - <template></template>  (0) 2024.07.11
[ Javascript ] ES5, ES6  (0) 2024.06.27
Web Browser 동작원리 Re  (0) 2024.06.21
JavaScript 동작 원리  (0) 2024.06.21
Vue 기본 파일 분석  (2) 2024.06.17