안녕하세요. HTML강사 코딩하는 고양이입니다.
오늘은 이미지 태그와 링크 태그를 배워볼 거예요.
시작하기 전에 초기 설정을 해주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>이것을 복사하세요.
이번 강의에는 이미지가 필요합니다.
1. 이미지 태그
이미지를 웹페이지에 삽입하려면 img 태그를 써야 합니다.
형태는 <img src="이미지 경로" alt="이미지 이름">입니다.
이미지 경로를 설정하실 때는 이 3가지만 외우세요
| 공식 | 설명 |
| ./ | 현재 폴더 |
| / | 최상위 폴더 |
| ../ | 상위 폴더 |
예를 들어./img/spp.png 는 현재 위치의 하위 폴더인 img폴더의 spp.png 사진이라는 뜻입니다.
그리고../img/spp.png 는 현재 위치의 상위 폴더인 img폴더의 spp.png 사진이라는 뜻입니다.
이미지 이름 alt는 사진이 안 나올 때 나올 이름입니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="img/images.png" alt="이미지">
</body>
</html>실행 결과
만약 실행결과처럼 사진이 안 뜨고 글자가 뜬다면
경로를 다시 확인해 주시길 바랍니다.
2. 이미지에 설명 쓰기
이미지에 설명을 쓰고 싶다면 <figure>이랑 <figcaption> 태그를 써주세요.
형태는
<figure>
<img src="경로" alt="이름">
<figcaption>설명</figcaption>
</figure>입니다
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure>
<img src="img/images.png" alt="이미지">
<figcaption>카메라</figcaption>
</figure>
</body>
</html>실행 결과
3. 링크 태그
링크를 삽입하고 싶을 때는 <a> 태그를 사용한다.
형태는 <a href="링크">(내용)</a>입니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#">하이</a> <!--임시로 링크를 설정할려면 #을 넣으세요-->
</body>
</html>실행 결과
4. 링크 태그의 응용
링크 태그에 target을 넣어 새 창에서 열 수도 있습니다.
<a href="링크" target="_blank" title="창 이름">(내용)</a>의 형태로 작성하세요.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#" target="_blank" title="하이">하이</a> <!--임시로 링크를 설정할려면 #을 넣으세요-->
</body>
</html>
오늘의 문제!
1번 문제
"사진" 글씨를 입력하면 네이버 사이트로 가게 하세요
2번 문제 (심화)
아래 사진을 클릭하면 네이버로 갈 수 있게 만드세요
위의 사진을 다운로드해야 합니다.
1번 모범답안
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="www.naver.com">사진</a>
</body>
</html>정답 조건
1. 네이버로 가는 링크를 썼다.
2. 사진이라는 글씨를 클릭하면 네이버로 가게 한다.
2번 모범답안
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="www.naver.com"><img src="img/0.PNG"></a>
</body>
</html>정답 조건
1. 사진을 문제에 있는 사진으로 썼다
2. 사진을 클릭하면 네이버로 갈 수 있게 했다
오늘은 여기까지 ㅂㅂ
'HTML, CSS > 이론' 카테고리의 다른 글
| [HTML/CSS] 5. 표 태그 (0) | 2023.03.23 |
|---|---|
| [HTML/CSS] 4. CSS의 기초 (1) | 2023.03.22 |
| [HTML] 2. 목록 태그와 설명 태그 (1) | 2023.03.20 |
| [HTML] 1. 텍스트 태그 (0) | 2023.03.19 |
| [HTML] 0. 초기 셋팅 (0) | 2023.03.18 |