1. 문제 안내
컴퓨터의 기술 중 한 가지를 소개하는 웹 페이지를 작성하라. HTML5 태그로 다음 요소를 모두 삽입하라.
- 리스트, 표, 이미지
- 목차 부분은 링크로 만들고 본문에 앵커를 만들어 연결
- 관련 정보를 클릭하면 웹 페이지를 새 창이나 탭에 출력하도록 링크 작성
학교 수업 전 생활코딩을 통해 HTML을 배웠지만, 이렇게적극적인 실습은 한적이 없다. 이 카테고리에 많은 실습을 올렸으면 좋겠다.
2. 코드 작성
사실 문제 중 음성파일을 넣으라는 요구문도 있었지만, 구현하지 못했다. 내 노트북의 오디오가 고장나서 확인을 하지 못하기 때문이다...... 다음은 내가 구성한 페이지에서 중요한 문법들을 정리해보았다.
- 리스트
자료구조를 공부하던 도중이어서 그런진 모르겠지만, 리스트라는 단원을 보자마자 연결리스트가 떠올랐다...... HTML에서의 리스트는 말 그대로 문서를 작성할 때 사용하는 리스트라고 생각하면 좋다. HTML에서 사용하는 리스트 태그는 다양하게 존재하지만 이번 문제에서 사용할 리스트 태그는 <ul> 태그이다. 다음은 예시이다.
<ul>
<li>역사</li>
<li>안드로이드폰</li>
<li>아이폰</li>
<li>샘플</li>
</ul>
<ul> 태그 안에 <li> 태그가 있는 것을 알 수 있다. 실행결과는 밑에서 한꺼번에 공개하도록 하겠다.
- 이미지
이미지 같은 경우, <img> 라는 태그를 사용하면 된다. 그러나 다른 태그와는 다른 점이 있다면 닫는 태그가 없다는 것이다. HTML문서와 같은 파일에 이미지 파일이 존재해야하며 그렇지 않으면 주소를 지정함으로써 사용해주면 된다. 나는 HTML파일 안에 123.jpg라는 이미지파일이 있기에 다음과 같이 접근하였다.
<img src="11758.png">
- 표
내가 본 문법들 중 가장 복잡한 것이 바로 표이다. 사실 원리만을 잘 파악하면 어렵지 않을 수 있겠지만, 많은 태그들이 사용되는 것은 사실이다. 이 페이지는 내가 문제를 푸는 과정을 올리는 페이지이기에 개념설명은 하지 않지만, 간단하게 설명하면 <table> 이라는 태그 안에 <caption>, <thead>, <tfoot>, <tbody> 라는 태그를 넣음으로써 표를 만들 수 있며, <tbody> 태그 안에 <tr> 로 행을 표시하고 <td> 로 각각의 데이터를 표시하면 된다. 다음은 내가 사용한 표이다.
<table>
<caption>스마트폰 샘플</caption>
<tbody>
<tr>
<td> <img src="11758.png"> </td>
<td> <img src="123.jpg"> </td>
</tr>
</tbody>
</table>
위에서 알 수 있듯이, <caption>은 표의 제목을 나타내주는 태그이고 <tr> 이라는 태그 안에 두개의 <td>태그가 있으니 한줄에 두개의 이미지가 표시된다.
- 링크와 앵커
링크와 앵커는 <a>라는 태그를 사용하는 것은 같지만, URL을 연결할건지, 같은 문서내의 태그 혹은 데이터를 연결 하는지에 대한 차이가 있다. 단 앵커를 사용하는 경우 이동하려는 태그에 id속성을 주어야 한다. 다음은 예시이다.
<ul>
<li><a href="#history">역사</a></li>
<li><a href="#android">안드로이드폰</a></li>
<li><a href="#iphone">아이폰</a></li>
<li><a href="#sample">샘플</a></li>
</ul>
<h2 id="history"><a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0">역사</a></h2>
위의 예시에서 리스트에 존재하는 태그는 앵커이다. 즉 역사를 클릭하면 id값이 history인 <h2> 태그의 위치로 이동하게 되며, <h2> 로 감싸진 역사라는 텍스트를 클릭해면 설정된 주소로 이동하게 된다.
- 링크의 target 속성
새로운 창을 띄우는 방법은 여러가지이다. 현재 존재하는 창에서 연결할 수 있고 새로운 창에서 연결할 수도 있다. 인라인 프레임에서 사용되는 개념인 _top 같은 것들도 있지만, 지금은 말하지 않겠다. 이번 문제에서는 새로운 창으로 페이지를 열어야 한다고 했으니 target 속성값을 "_blank" 로 설정해주었다. 다음은 수정된 코드이다.
<ul>
<li><a href="#history">역사</a></li>
<li><a href="#android">안드로이드폰</a></li>
<li><a href="#iphone">아이폰</a></li>
<li><a href="#sample">샘플</a></li>
</ul>
<h2 id="history"><a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0" target="_blank">역사</a></h2>
- 전체 코드
다음은 전체 코드이다.
<!DOCTYPE html>
<html>
<head>
<title>컴퓨터 기술 소개</title>
</head>
<body>
<h1>스마트폰</h1>
<p>
스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다.
PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를탑재하여
인터넷검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등
PC의 기능을 거의 모두 갖추고 있다.
</p>
<h2>목자</h2>
<ul>
<li><a href="#history">역사</a></li>
<li><a href="#android">안드로이드폰</a></li>
<li><a href="#iphone">아이폰</a></li>
<li><a href="#sample">샘플</a></li>
</ul>
<h2 id="history"><a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0" target="_blank">역사</a></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum
as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<h2 id="android"><a href="https://m.blog.naver.com/PostView.nhn?blogId=hdj20&logNo=40142938104&proxyReferer=https:%2F%2Fwww.google.com%2F" target="_blank">안드로이드</a></h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't
anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures,
to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<h2 id="iphone"><a href="https://www.apple.com/kr/iphone/" target="_blank">아이폰</a></h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,
making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is
a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</p>
<h2 id="sample">샘플</h2>
<table>
<caption>스마트폰 샘플</caption>
<tbody>
<tr>
<td> <img src="11758.png"> </td>
<td> <img src="123.jpg"> </td>
</tr>
</tbody>
</table>
</body>
</html>
영어 문단은 전부 Lorem Ipsum을 사용하였다.
3. 실행결과
'대학교 과제 > 웹 프로그래밍 기초 [ 2 - 2 ]' 카테고리의 다른 글
| [명품 HTML5+CSS3+Javascript 웹 프로그래밍] - Open Challenge 08 (0) | 2020.12.19 |
|---|