HTML + CSS
이미지와 하이퍼링크 실습
H_u
2024. 4. 12. 15:36
728x90
반응형
SMALL
이미지1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>바빠 시리즈</h1>
<!--img : 이미지 삽입-->
<img src="images/cover2.jpg" alt="빠른연산">
</body>
</html>
이미지2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>이미지 크기 조절</h1>
<img src="images/gugudan.jpg">
<img src="images/gugudan.jpg" width="250" height="250">
</body>
</html>
link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1>텍스트 링크 만들기</H1>
<!--a 태그에 href 속성으로 문서나 웹사이트 주소로 이동-->
<H1>이미지 링크 만들기</H1>
<!--a 태그에 omg 태그를 사용해서 이미지로 이동-->
<img src="images/naver.jpg">
</a>
</body>
</html>
child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/git.jpg">
<br><br>
<h2>문서 지옥, 깃&허브로 하루 안에 탈출한다.</h2>
<p>1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!</p>
<p>자주 쓰는 기능을 모두 담아 한 권에 끝낸다!</p>
<p>
<!-- coupang : iframe 허용됨-->
도서 상세 보기(현재 화면에)
</a>
</p>
<p>
<!--target="_top => 부모 창 전체를 사용해서 이동"-->
도서 상세 보기(전체 화면에)
</a>
</p>
</body>
</html>
figcaption
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/git.jpg">
<br><br>
<h2>문서 지옥, 깃&허브로 하루 안에 탈출한다.</h2>
<p>1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!</p>
<p>자주 쓰는 기능을 모두 담아 한 권에 끝낸다!</p>
<p>
<!-- coupang : iframe 허용됨-->
도서 상세 보기(현재 화면에)
</a>
</p>
<p>
<!--target="_top => 부모 창 전체를 사용해서 이동"-->
도서 상세 보기(전체 화면에)
</a>
</p>
</body>
</html>
parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문</h1>
<p>
아래 화면은 iframe 태그를 이용해 외부 문서를 현재 문서에 삽입한 것입니다.
</p>
<br><br>
<!--iframe : -->
<iframe src="child.html" width="600" height="620"></iframe>
</body>
</html>
anchor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<ul id="menu">
<!--#content1 -> id="content1"로 찾아감-->
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p>
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고
그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을
앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>
728x90
반응형
SMALL