본문 바로가기

QA 업무

[취업을 위한 백엔드 개발] 16강. head 태그와 body 태그

a, image, script 태그 존재

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        document.querySelector('a').innerText = '구글로 이동';
    </script>
    <a href="https://www.google.com/">어떤 링크</a>
</body>
</html>

 

상세 설명

<meta charset="utf-8">:문서의 문자 인코딩을 UTF-8로 설정합니다.

이는 한글을 포함한 다양한 언어를 올바르게 표시하기 위함입니다.

 

<script> 태그 내 코드 document.querySelector('a').innerText = '구글로 이동';

querySelector 메서드를 사용하여 첫 번째 <a> 태그를 선택합니다.

선택한 <a> 태그의 텍스트(innerText)를 '구글로 이동'으로 변경합니다.

 

어떤 링크:이 부분은 실제로 화면에 표시되는 링크입니다.

원래는 "어떤 링크"라는 텍스트로 표시되지만, 스크립트에 의해 "구글로 이동"으로 변경됩니다.

사용자가 이 링크를 클릭하면 구글 홈페이지(https://www.google.com/)로 이동하게 됩니다.

 

결과

페이지를 열었을 때 링크 텍스트는 "구글로 이동"으로 표시되며, 클릭하면 구글로 이동하게 됩니다.

 

결론

이 코드는 HTML 요소의 텍스트를 JavaScript로 동적으로 변경하는 예시입니다.

"어떤 링크"라는 초기 텍스트는 "구글로 이동"으로 변경되며, 이는 자바스크립트의 DOM 조작 기능을 사용한 것입니다.