7월이 되면서 날씨가 점점 더 더워지는 것 같다. 심지어 미세먼지 수치가 나쁨이라 창문을 열 수도 없다. ㅠㅠ
그래도! 힘내서 공부!! 오늘은 Chapter 1~3 부분의 연습문제를 풀 예정이다.
▷QUIZ-1 (난이도 1/3)
문제 : images폴더에 있는 umbrella.jpg 이미지 320 * 210 크기로 줄여서 삽입하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>이미지 삽입하기</title>
</head>
<body>
<h1>이미지 삽입하기</h1>
</body>
</html>↑before ↓after
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>이미지 삽입하기</title>
</head>
<body>
<h1>이미지 삽입하기</h1>
<img src="images/umbrella.jpg" width="320" height="210">
</body>
</html>QUIZ-1은 너무 쉬웠다.ㅎㅎ
▷QUIZ-2(난이도 2/3)
문제 : 국내 포털 사이트 Daum이미지주소 찾아서 이미지 삽입하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 사용하기</title>
</head>
<body>
<h1>포털 사이트 Daum으로 연결하기</h1>
</body>
</html>↑before ↓after
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 사용하기</title>
</head>
<body>
<h1>포털 사이트 Daum으로 연결하기</h1>
<img src="https://blog.kakaocdn.net/dn/yElzG/btqw7QZODLs/iA6TBn80hto4lndolDKB00/img.jpg"
alt="Daum이미지" width="320" height="210" >
</body>
</html>QUIZ-2도 QUIZ-1과 마찬가지로 이미지를 삽입하는 문제라 쉬웠다.
▷QUIZ-3(난이도 3/3)
문제 : QUIZ-2에서 삽입한 이미지에 Daum링크 연결하기
QUIZ-2에 이어서 링크를 연결하는 문제이미로 before코드는 생략
↓after
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 사용하기</title>
</head>
<body>
<h1>포털 사이트 Daum으로 연결하기</h1>
<a href ="https://www.daum.net/" target ="_blank">
<img src="https://blog.kakaocdn.net/dn/yElzG/btqw7QZODLs/iA6TBn80hto4lndolDKB00/img.jpg"
alt="Daum이미지" width="320" height="210" usemap="#link_Daum"></a>
</body>
</html>이미지에 링크를 거는 방법이 여러가지라 조금 헷갈렸다.
이미지 링크거는 연습이 조금 더 필요할 것 같다.
'HTML' 카테고리의 다른 글
| [Chapter 4-2] HTML5 공부 6일차!(2021-07-04) (0) | 2021.07.05 |
|---|---|
| [Chapter 4-1] HTML5 공부 5일차! (2021-07-03) (0) | 2021.07.04 |
| [Chapter 3] HTML5 공부 3일차 (2021-06-30) (0) | 2021.07.01 |
| [Chapter2 - 연습문제] HTML5 공부 2일차 (2021-06-29) (0) | 2021.06.30 |
| [Chapter 2-2] HTML5 공부 2일차 (2021-06-29) (0) | 2021.06.30 |