기본 링크 태그

<a href="https://www.google.com">구글로 이동</a>
<a href="about.html">내 페이지로 이동</a>
<a href="#section1">페이지 내 이동</a>

링크의 다양한 속성

<a href="https://www.google.com" target="_blank">새 창에서 열기</a>
<a href="mailto:example@email.com">이메일 보내기</a>
<a href="tel:010-1234-5678">전화 걸기</a>
<a href="download.pdf" download>파일 다운로드</a>

기본 이미지 태그

<img src="image.jpg" alt="이미지 설명">
<img src="https://example.com/image.jpg" alt="외부 이미지">
<img src="image.jpg" alt="이미지 설명" width="300" height="200">

실제 브라우저에서 보여지는 모습:

이미지 예시:

이미지를 링크로 만들기

<a href="https://www.google.com">
    <img src="google-logo.png" alt="구글로 이동">
</a>

실제 브라우저에서 보여지는 모습:

다음 요구사항을 만족하는 웹 페이지를 만들어보세요:

1. 제목: "내가 좋아하는 웹사이트"
2. 3개의 웹사이트 링크 (새 창에서 열기)
3. 각 웹사이트에 대한 간단한 설명
4. 각 웹사이트의 로고 이미지 (이미지를 클릭하면 해당 사이트로 이동)
5. 이메일 보내기 링크

예시 결과:

내가 좋아하는 웹사이트

구글

세계에서 가장 인기 있는 검색 엔진입니다.

유튜브

전 세계 최대의 동영상 공유 플랫폼입니다.

깃허브

개발자들을 위한 코드 공유 플랫폼입니다.

이메일 보내기

다음 문제를 풀어보세요:

1. 링크를 만들 때 사용하는 태그는 무엇인가요?
2. 이미지를 삽입할 때 사용하는 태그는 무엇인가요?
3. 링크를 새 창에서 열고 싶을 때 사용하는 속성은 무엇인가요?
4. 이미지가 로드되지 않을 때 보여줄 대체 텍스트를 지정하는 속성은 무엇인가요?
5. 이메일 링크를 만들 때 href 속성에 어떤 값을 넣어야 하나요?