<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mozilla splash page</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
/* header and body setup */
html {
font-family: 'Open Sans', sans-serif;
background: url(pattern.png);
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
/* Header styling */
header {
height: 150px;
}
header img {
width: 100px;
position: absolute;
right: 32.5px;
top: 32.5px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
/* main section and video styling */
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
iframe {
border: none;
float: left;
margin: 0 20px 20px 0;
max-width: 100%;
}
/* further info links */
.further-info {
clear: left;
padding: 40px 0;
background: #c13832;
box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5),
inset 0 -3px 2px rgba(0, 0, 0, 0.5);
}
.further-info a {
width: 25%;
display: block;
float: left;
}
.further-info img {
max-width: 100%;
}
.clearfix {
clear: both;
}
/* Red panda image */
.red-panda img {
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Mozilla</h1>
<!-- insert <img> element, link to the small version of the Firefox logo -->
<img src="firefox-logo-120.png" alt="Firefox logo">
</header>
<main>
<article>
<!-- insert iframe from youtube -->
<iframe
width="400"
height="225"
src="https://www.youtube.com/embed/ojcNcvb1olg"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h2>Rocking the free web</h2>
<p>
Mozilla are a global community of technologists, thinkers, and builders, working together to keep the
Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web.
We believe this act of human collaboration across an open platform is essential to individual growth and
our collective future.
</p>
<p>
Click on the images below to find more information about the cool stuff Mozilla does. <a
href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias
Appel.
</p>
</article>
<div class="further-info">
<!-- insert images with srcsets and sizes -->
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img
srcset="firefox-logo-120.png 120w,
firefox-logo-400.png 400w"
sizes="(max-width: 500px) 120px,
400px"
src="firefox-logo-400.png"
alt="Dowonload Firefox">
</a>
<a href="https://www.mozilla.org/">
<img
srcset="mozilla-dinosaur-head-120.png 120w,
mozilla-dinosaur-head-400.png 400w"
sizes="(max-width: 500px) 120px,
400px"
src="mozilla-dinosaur-head.png"
alt="Learn more about mozilla">
</a>
<a href="https://addons.mozilla.org/">
<img
srcset="firefox-addons_120.jpg 120w,
firefox-addons_400.jpg 400w"
sizes="(max-width: 500px) 120px,
400px"
src="firefox-addons_400.jpg"
alt="Customize Firefox with add-ons">
</a>
<a href="https://developer.mozilla.org/en-US/">
<img
src="firefox-addons_120.jpg"
alt="Learn web development with MDN"
srcset="mdn.svg">
</a>
<div class="clearfix"></div>
</div>
<div class="red-panda">
<!-- insert picture element -->
<picture>
<source media="(max-width: 600px)" srcset="red-panda-600.jpg">
<img src="red-panda-1200.jpg" alt="a red panda">
</picture>
</div>
</main>
</body>
</html>
도움 받은 곳
깨달은 것
1.
<iframe
width="400"
height="225"
src="https://www.youtube.com/embed/ojcNcvb1olg"
frameborder="0"
allowfullscreen>
</iframe>
위의 코드를 w3c markup validation service 에 입력하면 뜨는 오류이다.
-> frameborder 속성은 구식의 속성이니 css를 대신 사용하라고 해서 html 문서 내에서 <iframe>에 border: none 스타일 속성을 추가했다. (참고 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
2.
<picture>
<source media="(max-width: 600px)" srcset="red-panda-600.jpg">
<source media="(min-width: 601px)" srcset="red-panda-1200.jpg">
<img src="red-panda-1200.jpg" alt="a red panda">
</picture>정답을 보기 전에 나는 이렇게 코드를 작성하였는데 두 번째 <source>요소를 제거해도 똑같이 작동한다.
-> <source>가 어떤 미디어 조건도 반환하지 않을 때 <img>가 default와 대체 이미지를 제공하기 때문이다.
찾아볼 것
1. <iframe>에 title과 allow 속성이 없어도 작동하는 이유
-> title 속성은 접근성 문제를 해결하기 때문에 사용하는게 좋다.
-> allow 속성은 <iframe> 기능에 대한 정책을 지정한다.
참고할 자료
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
2. github 정답에서는 svg를 포함하기 위해서 <img>를 사용하고 role 속성으로 svg를 이미지 콘텐츠로 알리도록 마크업 했다. 하지만 브라우저가 svg를 지원하지 않을 경우를 대비해서, <img>의 srcset 속성에 svg를 연결하고 src 속성에 png 혹은 jpg를 참조하게 하는게 옳지 않을까?
<a href="https://developer.mozilla.org/en-US/">
<img src="mdn.svg" role="img" alt="Learn web development with MDN">
</a>
-> role 속성과 svg 파일을 페이지에 추가하는 방법에 대해 더 찾아보자.
<img> 요소를 사용하여 HTML에 추가하면 자바스크립트로 조작이 불가능하며, CSS를 인라인으로 적용해야 한다.
그러므로 둘 중 어느 하나를 선택하더라도 제약사항은 똑같다. 둘 중 어느하나를 선택해도 상관이 없어보이지만, role 속성을 이용하여 <img>의 보조기술이 svg를 이미지 콘텐츠로 알려주는 github 정답도 좋아보인다.
참고할 자료
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
'HTML > MDN 평가' 카테고리의 다른 글
| MDN - Structuring planet data (0) | 2022.10.18 |
|---|---|
| MDN - Multimedia and embedding (0) | 2022.10.13 |
| MDN - Media/embedding (0) | 2022.10.12 |
| MDN - Marking up a letter (0) | 2022.10.12 |
| MDN - Structuring a page of content (0) | 2022.10.12 |