Day 3: 링크와 이미지 삽입하기 ✨
| 실습 시 주의사항
- 이미지 경로:
src="flower.png"와 같은 상대 경로를 사용할 때는 실제로 해당 이름의 이미지 파일이 HTML 파일과 같은 위치에 있어야 합니다. 없다면 이미지가 표시되지 않습니다.
* 아래 이미지 flower.png로 다운로드
- 이미지 경로:
src="weather.png"와 같은 상대 경로를 사용할 때는 실제로 해당 이름의 이미지 파일이 HTML 파일과 같은 위치에 있어야 합니다. 없다면 이미지가 표시되지 않습니다.
src="flower.png"와 같은 상대 경로를 사용할 때는 실제로 해당 이름의 이미지 파일이 HTML 파일과 같은 위치에 있어야 합니다. 없다면 이미지가 표시되지 않습니다.
- 이미지 경로:
src="weather.png"와 같은 상대 경로를 사용할 때는 실제로 해당 이름의 이미지 파일이 HTML 파일과 같은 위치에 있어야 합니다. 없다면 이미지가 표시되지 않습니다.
* 아래 이미지 weather.png로 다운로드
- 외부 링크: 외부 웹사이트로 연결되는 링크는 반드시
http:// 또는 https://로 시작해야 합니다. 그렇지 않으면 브라우저가 올바르게 인식하지 못합니다.
- 앵커 링크:
href="#image-section"과 같은 페이지 내 링크를 사용할 때는 반드시 해당 id를 가진 요소가 페이지에 존재해야 합니다.
- alt 텍스트: 모든 이미지에는 항상 적절한
alt 속성을 제공하세요. 이는 접근성을 높이고 SEO에도 도움이 됩니다.
http:// 또는 https://로 시작해야 합니다. 그렇지 않으면 브라우저가 올바르게 인식하지 못합니다.href="#image-section"과 같은 페이지 내 링크를 사용할 때는 반드시 해당 id를 가진 요소가 페이지에 존재해야 합니다.alt 속성을 제공하세요. 이는 접근성을 높이고 SEO에도 도움이 됩니다.| 실습코드
* 아래 소스코드 편집 노트(ex. 윈도우 메모장)에서 저장, 확장자는 html로 저장
* 파일이름 예시: day3.html
<!DOCTYPE html>
<html>
<head>
<title>Day 3: 링크와 이미지 삽입하기</title>
</head>
<body>
<h1>Day 3: 링크와 이미지 삽입하기</h1>
<h2>1. 기본 링크 만들기</h2>
<p>다음은 가장 기본적인 링크 예시입니다:</p>
<a href="https://www.google.com"> 구글 방문하기</a>
<h2>2. 다양한 링크 활용하기</h2>
<p>새 탭에서 링크 열기:</p>
<a href="https://www.google.com" target="_blank">구글 검색하기 (새 탭에서 열림)</a>
<p>이메일 링크:</p>
<a href="mailto:example@email.com">이메일 보내기</a>
<p>페이지 내 특정 위치로 이동:</p>
<a href="#image-section">이미지 섹션으로 바로 이동</a>
<h2 id="image-section">3. 이미지 삽입하기</h2>
<p>기본 이미지 삽입:</p>
<img src="flower.png" alt="아름다운 꽃">
<p>이미지 크기 지정:</p>
<img src="flower.png" alt="빨간 장미 작은 이미지" width="100" height="100">
<p>이미지와 텍스트가 모두 포함된 링크:</p>
<a href="https://www.weather.com">
<img src="weather.png" alt="날씨 아이콘" width="300" height="300">
오늘의 날씨 확인하기(이미지클릭)
</a>
<p><a href="#top">맨 위로 이동</a></p>
</body>
</html>1. 기본 링크 만들기 🔗
<a href="https://www.google.com">구글 방문하기</a>
<a href="https://www.google.com">구글 방문하기</a>
이 코드는 가장 기본적인 형태의 링크입니다:
<a>: 앵커(anchor) 태그로, 하이퍼링크를 만드는 데 사용합니다.href="https://www.google.com": href 속성은 "hypertext reference"의 약자로, 링크가 연결될 목적지 URL을 지정합니다.네이버 방문하기: 링크 텍스트로, 사용자에게 보이는 부분입니다.
브라우저에서는 이 링크가 파란색 텍스트와 밑줄로 표시되며, 클릭하면 네이버 홈페이지로 이동합니다.
2. 다양한 링크 활용하기 🚀
<a href="https://www.google.com" target="_blank">구글 검색하기 (새 탭에서 열림)</a>
<a href="https://www.google.com" target="_blank">구글 검색하기 (새 탭에서 열림)</a>
이 링크에는 target="_blank" 속성이 추가되었습니다. 이 속성은 링크를 클릭했을 때 새 탭이나 창에서 열리도록 합니다. 현재 페이지를 그대로 유지하면서 다른 사이트로 이동할 때 유용합니다.
<a href="mailto:example@email.com">이메일 보내기</a>
mailto: 링크는 사용자의 기본 이메일 클라이언트를 열고 수신자 주소를 자동으로 채워줍니다. 웹사이트에서 연락처를 제공할 때 매우 유용합니다.
<a href="#image-section">이미지 섹션으로 바로 이동</a>
#으로 시작하는 링크는 같은 페이지 내의 특정 위치로 이동하는 앵커 링크입니다. 이 경우 id="image-section"을 가진 요소로 페이지가 스크롤됩니다. 긴 페이지에서 특정 섹션으로 빠르게 이동할 수 있게 해주는 유용한 기능입니다.
3. 이미지 삽입하기 🖼️
<img src="flower.png" alt="아름다운 꽃">
<img src="flower.png" alt="아름다운 꽃">
이미지를 삽입하는 기본 코드입니다:
<img>: 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 요소(empty element)입니다.src="flower.png": 이미지 파일의 경로를 지정합니다. 이 예시에서는 HTML 파일과 같은 폴더에 있는 'flower.jpg' 파일을 참조합니다.alt="아름다운 꽃": 대체 텍스트로, 이미지를 표시할 수 없거나 스크린 리더를 사용하는 경우 이 텍스트가 대신 표시됩니다.
<img src="flower.png" alt="작은 이미지" width="100" height="100">
이 코드는 이미지의 크기를 지정하는 방법을 보여줍니다:
width="100": 이미지 너비를 100픽셀로 설정합니다.height="100": 이미지 높이를 100픽셀로 설정합니다.
원본 이미지 크기와 상관없이 지정된 크기로 이미지가 표시됩니다.
4. 링크와 이미지 조합하기 🔗🖼️
<a href="https://www.weather.com">
<img src="weather" alt="날씨 아이콘">
</a>
<a href="https://www.weather.com">
<img src="weather" alt="날씨 아이콘">
</a>이 코드는 이미지를 클릭 가능한 링크로 만드는 방법을 보여줍니다:
<a>태그 안에<img>태그를 넣어 이미지 전체를 클릭할 수 있는 링크 영역으로 만듭니다.- 이 예시에서는 다음 로고 이미지를 클릭하면 다음 홈페이지로 이동합니다.
<p><a href="#top">맨 위로 이동</a></p>
페이지 맨 위로 이동하는 링크입니다. #top은 문서의 최상단을 가리키는 특별한 앵커입니다. 긴 페이지를 스크롤한 후 빠르게 처음으로 돌아갈 수 있게 해줍니다.
| Q&A 자주 묻는 질문
Q: 링크 색상을 변경할 수 있나요?
A: 네, CSS를 배우면 가능합니다! 다음에 배울 예정입니다.
Q: 이미지 주변에 여백을 추가하려면 어떻게 해야 하나요?
A: HTML에서는 hspace와 vspace 속성을 사용할 수 있지만, CSS로 더 유연하게 설정할 수 있습니다.
Q: 이미지가 로드되지 않을 때 어떻게 해야 하나요?
A: 파일 경로가 올바른지 확인하세요. 특히 파일명의 대소문자와 확장자가 정확한지 체크해보세요.
Q: 이미지 크기는 항상 지정해야 하나요?
A: 꼭 필요하지는 않지만, 지정하면 페이지 로딩 시 레이아웃이 갑자기 변하는 것을 방지할 수 있어 좋은 습관입니다.
ㅇ Day 4 - HTML 리스트와 테이블 태그 가이드 👉클릭
#HTML링크 #이미지삽입 #웹개발기초 #앵커태그 #a태그사용법 #img태그사용법 #IT기초 #HTML
