<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Harin Yu">
<title>Marking up a letter</title>
<style>
body {
max-width: 800px;
margin: 0 auto;
}
.sender-column {
text-align: right;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
p,
ul,
ol,
dl,
address {
font-size: 1.1em;
}
p,
li,
dd,
dt,
address {
line-height: 1.5;
}
</style>
</head>
<body>
<div class="sender-column">
<address>
<p>
<strong>Dr. Eleanor Gaye</strong><br>
Awesome Science faculty<br>
University of Awesome<br>
Bobtown, CA 99999,<br>
USA<br>
<strong>Tel: </strong>123-456-7890<br>
<strong>Email: </strong>no_reply@example.com<br>
</p>
</address>
<p><time datetime="2016-01-20">20 January 2016</time></p>
</div>
<address>
<p>
<strong>Miss Eileen Dover</strong><br>
4321 Cliff Top Edge<br>
Dover, CT9 XXX<br>
UK<br>
</p>
</address>
<h1>Re: Eileen Dover university application</h1>
<p>Dear Eileen,</p>
<p>
Thank you for your recent application to join us at the University of Awesome's science
faculty to study as part of your <abbr title="Doctor of Philosophy">PhD</abbr> next year. I will answer your questions one by one,
in the following sections.
</p>
<h2>Starting dates</h2>
<p>
We are happy to accommodate you starting your study with us at any time,
however it would suit us better if you could
start at the beginning of a semester; the start dates for each one are as follows:
</p>
<ul>
<li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>
<li>Second semester: <time datetime="2017-01-15">15 January 2017</time></li>
<li>Third semester: <time datetime="2017-05-02">2 May 2017</time></li>
</ul>
<p>
Please let me know if this is ok, and if so which start date you would prefer.
</p>
<p>
You can find more information about
<a href="http://example.com" target="_blank"
title="important university dates">important university dates</a>
on our website.
</p>
<h2>Subjects of study</h2>
<p>
At the Awesome Science Faculty, we have a pretty open-minded research facility
— as long as the subjects fall somewhere in the realm of science and technology.
You seem like an intelligent, dedicated researcher, and just the kind of person
we'd like to have on our team. Saying that, of the ideas you submitted we were
most intrigued by are as follows, in order of priority:
</p>
<ol>
<li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol
(C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>.)</li>
<li>Measuring the effect on performance of funk bassplayers at temperatures
exceeding 30°C (86°F), when the audience size
exponentially increases (effect of 3 × 10<sup>3</sup> increasing to 3 × 10<sup>4</sup>.)</li>
<li>
<abbr title="Hyper Text Markup Language">HTML</abbr> and
<abbr title="Cascading Style Sheet">CSS</abbr>
constructs for representing musical scores.
</li>
</ol>
<p>
So please can you provide more information on each of these subjects,
including how long you'd expect the research to take,
required staff and other resources, and anything else you think we'd need to know? Thanks.
</p>
<h2>Exotic dance moves</h2>
<p>
Yes, you are right! As part of my post-doctorate work,
I <em>did</em> study exotic tribal dances. To answer your question, my
favourite dances are as follows, with definitions:
</p>
<dl>
<dt>Polynesian chicken dance</dt>
<dd>
A little known but <em>very</em> influential dance dating back as far as
300<abbr title="Before Christ">BC</abbr>, a whole village would dance around in a circle
like chickens, to encourage their livestock to be "fruitful".
</dd>
<dt>Icelandic brownian shuffle</dt>
<dd>
Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved
huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid
ovements. One of my fellow students used to say that he thought this dance inspired modern styles such as Twerking.
</dd>
<dt>Arctic robot dance</dt>
<dd>
An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new
dance style characterized by "robotic", stilted movements, being practiced by inhabitants of Northern Alaska and Canada.
Later on however it was discovered that they were just moving like this because they were really cold.
</dd>
</dl>
<p>
For more of my research, see my
<a href="http://example.com" target="_blank"
title="exotic dance research page">exotic dance research page.</a>
</p>
<p>Yours sincerely,</p>
<p>Dr Eleanor Gaye</p>
<p>
University of Awesome motto:
<q cite="Bill%20S%20Preston,%20Esq">Be awesome to each other.</q>
-- <cite>The memoirs of Bill S Preston, <abbr title="Esquire">Esq</abbr></cite>
</p>
</body>
</html>
도움 받은 곳
깨달은 것
1. <blockquote>와 <q>의 속성 cite의 값으로 띄어쓰기 쓸 경우 오류 발생 -> %20 사용하기
2. <a> 요소에 속성 title 추가 가능
-> 링크 제목은 마우스를 가져갈 때만 표시됩니다. 즉, 키보드 컨트롤이나 터치스크린을 사용하여 웹 페이지를 탐색하는 사람들은 제목 정보에 액세스하는 데 어려움을 겪을 수 있습니다. 제목의 정보가 페이지의 유용성에 진정으로 중요한 경우 모든 사용자가 액세스할 수 있는 방식으로 제목 정보를 제시해야 합니다. 예를 들어 일반 텍스트에 넣는 방법입니다. (MDN)
기억할 것
1. Citations
The content of the cite attribute sounds useful, but unfortunately browsers, screen readers, etc. don't really do much with it. There is no way to get the browser to display the contents of cite, without writing your own solution using JavaScript or CSS. If you want to make the source of the quotation available on the page you need to make it available in the text via a link or some other appropriate way.
There is a <cite> element, but this is meant to contain the title of the resource being quoted, e.g. the name of the book. There is no reason, however, why you couldn't link the text inside <cite> to the quote source in some way
-참고 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
2. <head> 안에 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 의미하는 바는 무엇인가?
->The name and content attributes can be used together to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.
name specifies the type of meta element it is; what type of information it contains. content specifies the actual meta content.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
찾아볼 것
<head> 안에 <meta http-equiv="X-UA-Compatible" content="IE=edge">가 의미하는 바가 무엇인가?
-> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta 여기에서 찾아볼 수 있는데 무슨 말인지 잘 모르겠다. 프라그마에 대한 정의 - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Pragma
http에 대해서 몰라서 이해를 못하는 것 같다. http에 대해 더 공부하자.
-> https://developer.mozilla.org/en-US/docs/Web/HTTP 공부하기
-> 이 부분은 tistory에서 개발자 블로그를 보는 게 더 이해가 잘 된다. X-UA-Compatible 은 익스플로러 버전별 호환성을 지시하는 속성이다. content="IE=edge"은 IE 브라우저에서 가장 최신 버전으로 렌더링 되게 한다.
-출처-
'HTML > MDN 평가' 카테고리의 다른 글
| MDN - Mozilla splash page (0) | 2022.10.15 |
|---|---|
| MDN - Multimedia and embedding (0) | 2022.10.13 |
| MDN - Media/embedding (0) | 2022.10.12 |
| MDN - Structuring a page of content (0) | 2022.10.12 |
| MDN - Advanced HTML text (0) | 2022.10.11 |