온라인 강의/HTML
링크와 이미지 입력하기
onebeans
2023. 4. 13. 15:22
<a>태그를 사용해 네이버 메인 페이지로 이동하는 링크와,
<img>태그를 사용해 엘리스 로고를 출력하는 웹 페이지를 만들어 봅시다!
두 태그는 <body> 태그 안에 위치합니다.
<a>는 텍스트, 이미지를 클릭했을 때 다른 웹페이지로 이동시키는 기능을 갖고 있습니다.
<a href="https://academy.elice.io/" target="_blank">엘리스</a>
- href – 연결할 웹페이지의 URL 주소
- target – 웹페이지를 연결하는 방식
<img>는 이미지를 입력할 때 사용합니다.
<img src="elice_logo.png" alt="엘리스 회사 로고">
- src – 입력하고자 하는 이미지 파일
- alt – 이미지를 대신하는 설명
- 클릭시 다른 사이트로 이동할 수 있도록 하는 <a></a> 태그를 입력합니다.
- 네이버 홈페이지로 이동하기 위해 href="https://www.naver.com"을 열린태그 <a> 안에 입력합니다.
- 새로운 탭에서 웹사이트를 전환하기 위해 target="_blank" 속성값도 입력합니다.
- <a> 태그 안의 텍스트를 네이버로 변경합니다.
- <img> 태그 안에 엘리스 회사 로고의 파일명을 src="elice_logo.png"와 같이 입력합니다.
- <img> 태그에 alt="엘리스 회사 로고"를 입력하여 웹 접근성을 높입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리스 :: elice</title>
</head>
<body>
<img src="elice_logo.png" alt="엘리스 회사 로고">
</body>
</html>