저는 대학에서 컴퓨터공학 학위를 공부하고 있는 대학생입니다.
물론 어려운 내용도 배웁니다만, 그걸 어렵게 설명하고 싶진 않습니다.
친구처럼, 젊은 선생님처럼 아주 쉽게 전달하고 싶습니다.
이 카테고리에서는 제가 관심 있어하는 웹 개발에 대해 말해보려고 합니다.
https://that-is-all.tistory.com/entry/studying-web3
3. 웹 개발을 위한 프로그램 두 가지
저는 대학에서 컴퓨터공학 학위를 공부하고 있는 대학생입니다.물론 어려운 내용도 배웁니다만, 그걸 어렵게 설명하고 싶진 않습니다.친구처럼, 젊은 선생님처럼 아주 쉽게 전달하고 싶습니다.
that-is-all.tistory.com
오늘은 HTML 문법 중 'a 태그' 사용 방법에 대해 알려드리겠습니다.
아래는 공부할 예시 코드입니다.
(내용은 아무 의미 없으니 신경 쓰지 마세요. 혹은, 본인의 이야기를 채우셔도 상관없습니다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MY IMAGINATION</title>
</head>
<body>
<h1>IMAGINATION - h1</h1>
<p>
<a href="https://www.google.com">Google LINK</a>
</p>
<p>
<a href="about.html">Do you want to know me?</a>
</p>
Imagination is the production of sensations, feelings and thoughts informing oneself. These experiences can be
re-creations of past experiences, such as vivid memories with imagined changes, or completely invented and possibly
fantastic scenes. Imagination helps apply knowledge to solve problems and is fundamental to integrating experience
and the learning process.
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, non! Veritatis odio, vel autem eveniet
architecto facere, maiores rem eos dolorum veniam saepe quas eligendi dolore officiis libero totam accusantium.
</p>
<h2>Conceptual history - h2</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium soluta reprehenderit nulla voluptatum
praesentium quas laudantium quis, quia magni veritatis repellendus hic ullam. Quis porro ab iste harum
laudantium pariatur. Soluta, id. Nihil, minus reprehenderit corporis ipsam corrupti odio recusandae saepe porro
enim officia eius. Blanditiis ab explicabo molestias iusto! Praesentium autem deserunt error quaerat magni voluptatem
iste non sapiente.
</p>
<h3>Ancient - h3</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit nam qui possimus. Animi exercitationem, incidunt
ex aliquam perferendis quasi dolorum unde fugit, sint id alias cumque enim molestiae deserunt facere. Blanditiis
quisquam consequuntur voluptas sunt alias quos quae temporibus cupiditate maxime, deserunt culpa est aliquid
nesciunt quo assumenda beatae vel quam iste nulla quia? Tempore dolor corrupti reiciendis exercitationem
veritatis! Praesentium id, itaque minima error eligendi quae, quidem facere dolores provident reprehenderit libero
dolor quaerat ipsum ab reiciendis quis eveniet at tempora quod soluta esse eaque, corrupti cumque. Ratione, laborum.
Amet, corrupti ab! Delectus provident velit beatae asperiores, autem, quisquam quaerat libero in quos atque,
deleniti ea iusto culpa harum eligendi minima repudiandae excepturi tenetur odio praesentium? Corrupti,
excepturi optio!
</p>
<h4>Middle Ages - h4</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit veniam sed voluptates perspiciatis molestiae,
inventore cupiditate! Accusamus amet perferendis, iure id expedita, repudiandae nihil et neque rem quo vitae.
Odio.
</p>
<h5>Modern - h5</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio fuga numquam ab architecto libero, ipsum
dignissimos. Itaque, voluptate placeat impedit quasi vel beatae sunt praesentium nemo nisi consequatur
repellendus dolores. Alias laudantium tempore earum. Voluptatibus, labore soluta! Animi tempore ipsa deserunt
repudiandae ducimus libero quia, assumenda molestias id unde totam minima numquam harum voluptate! Consequuntur,
in. Eaque a recusandae itaque.
</p>
<h6>Cross cultural - h6</h6>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam vero nemo quae dicta doloribus voluptate tempore.
Et vel earum officiis? Amet vel cupiditate hic accusamus. Est voluptate vitae accusantium quis. Sit pariatur
adipisci iure dolores impedit mollitia eaque perspiciatis, atque iusto delectus, nostrum consequuntur
numquam. Autem, ipsum eligendi. Sunt, reiciendis! Mollitia tenetur nemo ut doloremque qui minima temporibus
soluta accusantium. Minima tempore optio quisquam dolore ipsum. Voluptatum, itaque consequatur exercitationem
repellendus, odio expedita labore pariatur neque voluptatibus veritatis, est dolorem obcaecati id maxime commodi
magnam dolores dolore doloremque vel? Voluptates?
</p>
</body>
</html>
위 코드의 <h1> 내부 내용의 출처는 아래와 같습니다.
https://en.wikipedia.org/wiki/Imagination
Imagination - Wikipedia
From Wikipedia, the free encyclopedia Creative ability Olin Levi Warner, Imagination (1896). Library of Congress Thomas Jefferson Building, Washington, D.C. Imagination is the production of sensations, feelings and thoughts informing oneself.[1] These expe
en.wikipedia.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<p>
I'm human.
</p>
</body>
</html>
★ 반드시 위 두 개의 HTML 코드를 같은 폴더에 넣어주세요. ★
첫 번째 코드를 실행시켜 보면 아래와 같습니다.
|
<p>
<p>
<a href="about.html">Do you want to know me?</a>
</p> |
<a> 태그를 통해 다른 웹페이지나 이메일 주소, 파일 혹은 심지어는 현재 페이지의 다른 위치로
연결할 수가 있습니다.
href = hypertext reference
모든 앵커 태그에 들어가는 href는 이 형식을 따릅니다. href="" 입니다.
href="google.com" 을 넣고 어떻게 되나 봅시다. 페이지를 새로고침 하면일단 클릭할 수 있는 링크가 생깁니다.
클릭하면 어떻게 될까요? 잘 안 되실 겁니다.
페이지로 연결해 주는 URL을 살펴봅시다. 지금 페이지의 URL에서 /google.com으로 연결됐을 겁니다..
제가 원하던 페이지가 아닙니다.
실제로는 이렇게까지 자세히 써 줘야 합니다.
그 이유는 바로 연결된 이 페이지가 엄밀히 따지면 여기 적힌 대로 로컬 또는 공유 파일을 보여주고 있기 때문입니다.
실제로는 HTTP 프로토콜을 사용하지 않았기 때문입니다.
웹사이트에 가려는 거니까 HTTP를 넣어 줘야 합니다. 그러면 이렇게 Google로 연결됩니다.
이렇게 같은 폴더에 들어있는 걸 확인할 수 있고, 또 직접 만든 HTML 문서(about.html)로 연결하는 것도 가능합니다.
※※※ HTML 파일에는 아직 아무것도 하지 않았습니다. 그냥 텍스트지만 확장자가 HTML이라서 파일을 이렇게 볼 수 있는 겁니다. 이건 아무 데도 올리지 않았습니다. 이 파일에 담긴 콘텐츠는 어떤 웹사이트나 서버에도 공개되지 않습니다. 이 기기에서 저만 볼 수 있습니다. 온라인 콘텐츠가 아니니까요. ※※※
'지식 Spoon > 1. 웹 개발' 카테고리의 다른 글
| 12. 웹 개발 - HTML(7) - 이미지 요소 (0) | 2025.05.22 |
|---|---|
| 10. 웹 개발 - HTML(5) - 목록 요소 (0) | 2025.05.20 |
| 9. 웹 개발 - Visual Studio Code에서의 유용한 기능1 (0) | 2025.05.19 |
