<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body id="top">
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다
문서 안에 이름을 붙여놓고 그 위치로
한번에 이동하는 링크를 만들 수 있는데,
이 기능을 앵커(anchor)라고 합니다.
</p>
<ul id="menu">
<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>웹 문서가 너무 길 경우 필요한 곳마다
문서 안에 이름을 붙여놓고 그 위치로
한번에 이동하는 링크를 만들 수 있는데,
이 기능을 앵커(anchor)라고 합니다.
</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다
문서 안에 이름을 붙여놓고 그 위치로
한번에 이동하는 링크를 만들 수 있는데,
이 기능을 앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다
문서 안에 이름을 붙여놓고 그 위치로
한번에 이동하는 링크를 만들 수 있는데,
이 기능을 앵커(anchor)라고 합니다.
<p>웹 문서가 너무 길 경우 필요한 곳마다
문서 안에 이름을 붙여놓고 그 위치로
한번에 이동하는 링크를 만들 수 있는데,
이 기능을 앵커(anchor)라고 합니다.
</p>
<p>웹 문서가 너무 길 경우 필요한 곳마다
문서 안에 이름을 붙여놓고 그 위치로
한번에 이동하는 링크를 만들 수 있는데,
이 기능을 앵커(anchor)라고 합니다.
</p>
<p><a href="#menu">[메뉴로]</a></p>
<p><a href="#top">맨위로</a>
</p>
</html>
img 태그
- 웹 페이지에 이미지를 보여주기 위해 사용 - src속성이 꼭 기술되어야 한다. 다른 속성은 없어도 상관없다. - 빈 태그(empty tag)이다. - 인라인 요소로 한 줄 바꿈이 되지 않는다. - 너비, 폭 미지정시 디폴트는 원본 파일 크기로 적용됨. - width속성이나 height속성을 바로 사용하는 경우는 단위를 픽셀로 자동 인식하나 style속성 안에 나열되는 속성으로 사용되는 경우는 단위를 꼭 기술해주어야만 제대로 인식한다. - 기본 정렬 값은 left-bottom이다.
- 파일의 경로를 표시하는 속성을 지정 - 시작 엘리먼트에 지정된다. - 절대경로 : 고정된 경로를 지정하는 방법 - 상대경로 : 파일의 위치를 고려하여 상대적으로 경로를 지정하는 방법 등이 있다. (되도록이면 상대 경로를 권장. 다른 곳으로 옮겨도 파일들의 위치만 동등하게 해주면 이미지가 손실된 염려가 없다.)
너비, 폭 관련 속성 - 픽셀(px)값이나 비율(%)값으로 나타냄. - 시작 엘리먼트 안에 기술할 것. - width : 가로너비 속성. height : 세로 폭 속성
SYNTAX width ="값" height ="값" 또는 style ="width:값; height:값;"
alt 속성 - 이미지를 표시 할 수 없는 경우 이미지의 대체 텍스트를 지정함. - 시작 엘리먼트에 기술
SYNTAX alt ="텍스트"
title속성 - 요소에 대한 몇 가지 추가 정보를 정의 함. - 마우스를 오버하면 툴팁처럼 내용이 보여진다하여 툴팁 기능이라고 함. - 웹 접근성의 가장 기본적인 속성임. - 시작 엘리먼트에 기술
SYNTAX title= "텍스트"
lang속성 - html시작 엘리먼트( <html> )에 기술 - 웹페이지의 언어와 국가를 명시할 때 사용. ex) ko-KR:한국어-한국 / en-US: 영어-미국 / ja-JP:일본어-일본 - 검색 시 웹 페이지의 언어나 국가를 파악하기 위한 것이지 웹 페이지를 해당 언어로만 기술 해야 하는 것은 아니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이미지</title>
<style>
/*img {width: 500px;height: 500px;}*/
</style>
</head>
<body>
<h2>HTML Image</h2>
<!-- <img src ="./img/pic_trulli.jpg" alt="Trulli 이미지파일"> -->
<img src="../img/pic_trulli.jpg" alt="Trulli" title="남부 이탈리아의 원추형 석조건물인 Trulli" width="300" height="222">
<img src="../img/img_girl.jpg" alt="Girl in a jacket" width="300" height="222">
<img src="../img/img_chania.jpg" alt="Girl in a jacket" width="100" height="100">
<br><br>
<h1>이미지에 링크설정</h1>
<a href="#">가가가</a>
<a href="#">나나나</a>
<a href="#">다다다</a>
<br>
<a href="https://m.dongascience.com/news.php?idx=54418"><img src="../img/cute_dog.jpg" alt="Girl in a jacket" style="width:300px;height:222px;"></a>
해외 소셜 미디어에 화제로 떠오른 '윙크하는 강아지'의 모습이다.<br>
강아지는 얌전하게 앉아서 왼쪽 눈만 감았다.
오른쪽 눈은 동그랗고 얼굴은 전혀 찡그리지 않았다.
고양이는 윙크를 자주 해 봤으며 아주 능숙한 것으로 보인다.<br>
사진 설명에 따르면 강아지는 자유자재로 윙크를 한다고 한다.
하지만 많은 해외 네티즌들은 반신반의한다.
정말...........
훟
헿
홍
헿
헿
</body>
</html>
computer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>커피 사진</title>
</head>
<body>
<h1>Coffee</h1>
<img src="../img/coffeehouse2.jpg" style="width:600px;">
<p>Wikipedia says:</p>
<i>Coffee is a brewed drink prepared from roasted coffee beans,
which are the seeds of berries from the Coffea plant.</i>
<p><a href="computer.html">computer.html페이지로 이동</a></p>
<p><a href="../img/mac.jpg" target="_blank">computer이미지 보기</a></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>컴퓨터 사진</title>
</head>
<body>
<h1>Computer</h1>
<img src="../img/mac.jpg" style="width:600px;">
<p>Wikipedia says:</p>
<i>A computer is a device that can be instructed to carry out
arbitrary sequences of arithmetic or logical operations automatically.</i>
</body>
</html>
