HTML DOM의 앵커(<a>) 태그와 연관된 username 속성은 href 속성 값 중 사용자 이름(username) 부분을 설정하거나 반환하는 데 사용됩니다. 사용자 이름은 주로 비밀번호와 한 쌍을 이루어 입력되며, URL에서 프로토콜 바로 뒤, 비밀번호 부분 직전에 위치합니다.
예를 들어 https://john:john123@www.examplesite.com과 같은 URL에서 john이 사용자 이름에 해당하고, 콜론(:) 뒤의 john123이 비밀번호 부분입니다.
문법(Syntax)
username 속성 값 반환하기
anchorObject.username
username 속성 값 설정하기
anchorObject.username = UsernameValue
예제(Example)
앵커 username 속성의 실제 동작을 확인해 보겠습니다. 아래 예제는 버튼 클릭으로 링크의 사용자 이름을 변경하거나 조회하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" href="https://john:john123@www.examplesite.com">ExampleSite</a></p>
<p>버튼을 클릭하여 사용자 이름을 변경해 보세요</p>
<button onclick="changeUser()">Set User</button>
<button onclick="GetUser()">Get User</button>
<p id="Sample"></p>
<script>
function changeUser() {
document.getElementById("Anchor").username = "Rohan";
}
function GetUser() {
var x = document.getElementById("Anchor").username;
document.getElementById("Sample").innerHTML = x;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
“Set User” 버튼 클릭 시 −
“Get User” 버튼 클릭 시 −
예제 상세 설명
위 예제의 동작 방식을 단계별로 살펴보겠습니다.
1. 사용자 이름이 포함된 링크 생성
먼저 사용자 이름이 john, 비밀번호가 john123으로 지정된 링크를 만들었습니다.
<p><a id="Anchor" href="https://john:john123@www.examplesite.com">ExampleSite</a></p>
2. 버튼 두 개 생성
각각 changeUser() 함수와 GetUser() 함수를 호출하는 “Set User”, “Get User” 두 개의 버튼을 배치했습니다.
<button onclick="changeUser()">Set User</button> <button onclick="GetUser()">Get User</button>
3. 자바스크립트 함수 동작 원리
changeUser() 함수는 링크에 지정된 사용자 이름을 우리가 지정한 값, 즉 이 예제에서는 “Rohan”으로 변경합니다. 반면 GetUser() 함수는 id가 Anchor인 링크에서 사용자 이름을 읽어와 화면에 출력합니다.
따라서 GetUser()를 호출하기 전에 먼저 changeUser()가 실행된 경우에는 “Rohan”이 반환되고, 그렇지 않으면 원래 값인 “john”이 반환됩니다.
function changeUser() {
document.getElementById("Anchor").username = "Rohan";
}
function GetUser() {
var x = document.getElementById("Anchor").username;
document.getElementById("Sample").innerHTML = x;
}정리
앵커 요소의 username 속성을 활용하면 자바스크립트만으로 URL 내 인증 정보(사용자 이름) 부분을 손쉽게 읽거나 수정할 수 있습니다. 다만 실제 서비스 환경에서는 URL에 비밀번호를 노출하는 방식은 보안상 위험할 수 있으므로, 학습 및 테스트 목적으로 활용하는 것이 좋습니다.