<!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">
    <title>Table tamplate</title>
    <link rel="stylesheet" href="minimal-table.css" type="text/css">
</head>
<body>
    <h1>Planets data</h1>
    
    <table>
        <caption>
            Data about the planets of our solar system (Planetary facts taken from 
                <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">
                    Nasa's Planetary Fact Sheet - Metric</a>).
        </caption>
        <colgroup>
            <col span="2">
            <col style="border: 2px solid black;">
            <col span="9">
        </colgroup>
        <thead>
            <tr>
                <td colspan="2"></td>
                <th scope="col">Name</th>
                <th scope="col">Mass (10<sup>24</sup>kg)</th>
                <th scope="col">Diameter (km)</th>
                <th scope="col">Density (kg/m<sup>3</sup>)</th>
                <th scope="col">Gravity (m/s<sup>2</sup>)</th>
                <th scope="col">Length of day (hours)</th>
                <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
                <th scope="col">Mean temperature (°C)</th>
                <th scope="col">Number of moons</th>
                <th scope="col">Notes</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th rowspan="4" colspan="2" scope="rowgroup">Terrestrial planets</th>
                <th scope="row">Mercury</th>
                <td>0.330</td>
                <td>4,879</td>
                <td>5427</td>
                <td>3.7</td>
                <td>4222.6</td>
                <td>57.9</td>
                <td>167</td>
                <td>0</td>
                <td>Closest to the Sun</td>
            </tr>
            <tr>
                <th scope="row">Venus</th>
                <td>4.87</td>
                <td>12,104</td>
                <td>5243</td>
                <td>8.9</td>
                <td>2802.0</td>
                <td>108.2</td>
                <td>464</td>
                <td>0</td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Earth</th>
                <td>5.97</td>
                <td>12,756</td>
                <td>5514</td>
                <td>9.8</td>
                <td>24.0</td>
                <td>149.6</td>
                <td>15</td>
                <td>1</td>
                <td>Our world</td>
            </tr>
            <tr>
                <th scope="row">Mars</th>
                <td>0.642</td>
                <td>6,792</td>
                <td>3933</td>
                <td>3.7</td>
                <td>24.7</td>
                <td>227.9</td>
                <td>-65</td>
                <td>2</td>
                <td>The red planet</td>
            </tr>

            <tr>
                <th rowspan="4" scope="rowgroup">Jovian planets</th>
                <th rowspan="2" scope="rowgroup">Gas giants</th>
                <th scope="row">Jupiter</th>
                <td>1898</td>
                <td>142,984</td>
                <td>1326</td>
                <td>23.1</td>
                <td>9.9</td>
                <td>778.6</td>
                <td>-110</td>
                <td>67</td>
                <td>The largest planet</td>
            </tr>
            <tr>
                <th scope="row">Saturn</th>
                <td>568</td>
                <td>120,536</td>
                <td>687</td>
                <td>9.0</td>
                <td>10.7</td>
                <td>1433.5</td>
                <td>-140</td>
                <td>62</td>
                <td></td>
            </tr>
            <tr>
                <th rowspan="2" scope="rowgroup">Ice giants</th>
                <th scope="row">Uranus</th>
                <td>86.8</td>
                <td>51,118</td>
                <td>1271</td>
                <td>8.7</td>
                <td>17.2</td>
                <td>2872.5</td>
                <td>-195</td>
                <td>27</td>
                <td></td>
            </tr>
            <tr>
                <th scope="row">Neptune</th>
                <td>102</td>
                <td>49,528</td>
                <td>1638</td>
                <td>11.0</td>
                <td>16.1</td>
                <td>4495.1</td>
                <td>-200</td>
                <td>14</td>
                <td></td>
            </tr>
            <tr>
                <th colspan="2" scope="row">Dwarf planets</th>
                <th scope="row">Pluto</th>
                <td>0.0146</td>
                <td>2,370</td>
                <td>2095</td>
                <td>0.7</td>
                <td>153.3</td>
                <td>5906.4</td>
                <td>225</td>
                <td>5</td>
                <td>
                    Declassified as a planet in 2006, but this 
                        <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">
                            remains controversial</a>.
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

도움 받은 곳

https://github.com/mdn/learning-area/blob/main/html/tables/assessment-finished/planets-data.html

https://discourse.mozilla.org/t/structuring-planet-data-assessment/24680

 

참고한 곳

https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced

 

깨달은 것

1. 속성 scope의 값 colgroup, rowgroup은 <th>의 부제목이 두 개 이상일 경우 사용한다.

-> 위의 Dwarf planets의 경우 부제목이 한 개이므로 scope 속성으로 둘 다 row를 사용한다.

 

 

2. 아래 코드에서 <col>의 background-color 속성이 적용 안 되는 이유

 

HTML 파일

<colgroup>
    <col span="2">
    <col style="border: 2px solid black; background-color: red;">
    <col span="9">
</colgroup>

 

CSS 파일

th {
    background-color: rgb(235, 235, 235);
}

-> column과 column-group에서 background 속성으로 열에 있는 셀의 배경을 설정하려면, 셀과 행 모두 배경이 투명해야 한다. 

 

-참고-

https://www.w3.org/TR/CSS21/tables.html#columns

https://www.w3.org/TR/CSS21/tables.html#table-layers

'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 - Marking up a letter  (0) 2022.10.12
MDN - Structuring a page of content  (0) 2022.10.12
<!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/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

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

Task 2 

<!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">
    <title>Media/embedding: Task 2</title>
    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0; 
        }

        * {
            box-sizing: border-box;
        }

        video {
            border: 1px solid black;
            background-color: black;
        }
    </style>
</head>

<body>
    <h1>Video embed</h1>
    
    <video
        controls
        width="320"
        height="240"
        muted
        preload="auto">
        <source src="media/video.mp4" type="video/mp4">
        <source src="media/video.webm" type="video/webm">
        <track
            label="English" 
            kind="subtitles" 
            srclang="en" 
            src="media/subtitles_en.vtt">
        <p>
            Your browser doesn't support this video file. Here is a
            <a href="media/video.mp4">link to the vedio file</a> instead.
        </p>
    </video>
</body>
</html>

 

 

Task 3

<!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">
    <title>Media/embedding: Task 3</title>
    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }        
        iframe {
            border: none;
        }
    </style>
</head>
<body>
    <h1>Embedding</h1>
    <object data="media/mypdf.pdf" type="application/pdf" width="800" height="400">
        <p>
            You don't have a PDF plugin, but you can
            <a href="media/mypdf.pdf">download the PDF file.</a>
        </p>
    </object>
    <hr>
    <iframe width="400" height="300" 
        src="https://www.youtube.com/embed/0xJxgvJO2Xo" 
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
    <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13048.553638783429!2d129.1099112345843!3d35.1531687351307!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3568ed2f27c70ec7%3A0xff6df0e14d9216fb!2z6rSR7JWI66as7ZW07IiY7JqV7J6l!5e0!3m2!1sko!2skr!4v1665563009621!5m2!1sko!2skr"
        width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</body>
</html>

 

 

도움 받은 곳

https://discourse.mozilla.org/t/assessment-request-for-multimedia-and-embedding-skill-test-1/98246

 

 

깨달은 것

 

Task 2 : <track> 하나이면 default 속성을 따로 지정할 필요 없다. 

 

Task 3 

1. <embed>와 <object>의 차이 

<embed> : 외부 콘텐츠 포함하는 요소 /  <object>  : 외부 개체 요소를 포함하는 요소

-> 이들을 페이지에 포함하는 것보다 다운로드하거나 별도의 페이지에서 읽을 수 있도록 링크하는 것이 좋으므로 많이 사용하지 않는다. (MDN)

 

-참고-

 

3.

<iframe width="400" height="300" 
    src="https://www.youtube.com/embed/0xJxgvJO2Xo" 
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
    <p>
        <a href="https://www.youtube.com/embed/0xJxgvJO2Xo">
            Fallback link for browsers that don't support iframes
        </a>
    </p>
</iframe>

이를 W3C markup validation service로 검사 했을 때

위와 같은 오류가 뜨는 것을 발견함. whatwg 사이트를 참고 했을 때, <iframe> 요소의 콘텐츠 모델(요소의 하위 및 하위 항목으로 포함되어야 하는 콘텐츠에 대한 규범적 설명-whatwg)은 아무것도 허용되지 않음.

그러므로 <p>와 <a>를 <iframe>내에 사용했을 때 오류가 뜨는 것이었다.

 

-참고-

https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

 

 

찾아봐야 할 것 

 

Task 2 :

1. preload 속성은 꼭 필요한가?

-> preload 속성은 미디어 리소스에 필요한 버퍼링의 양을 나타낸다. 작성자가 최고의 사용자 경험으로 이어질 것이라고 생각하는 것에 대한 힌트를 사용자 에이전트에 제공하기 위한 것이다. (WHATWG) 사용자에게 힌트를 제공하므로 작성하는 것이 좋아보인다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

https://html.spec.whatwg.org/multipage/media.html#media-resource

 

 

2. webvtt의 시간과 숫자의 정해진 규칙 

-> https://w3c.github.io/webvtt/

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

 

3. <track>이 모든 <source> 뒤에 온다고 MDN 문서에 명시되어 있는데, 대체 콘테츠를 포함해서 맨 뒤에 위치하는 것인가? 

-> 대체 콘텐츠가 <track>보다 뒤에 위치한다.  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

 

 

Task 3 : <iframe>의 속성 sandbox를 쓰면 오류가 뜨는데 해결할 방법이 있나?

-> sandbox 속성은 콘텐츠에 대한 추가 제한 집합을 활성화한다. (출처

youtube의 경우 sandbox의 속성 값으로  allow-same-origin, allow-scripts을 설정하면 해결되고, 구글 맵의 경우 allow-scripts를 설정하면 해결된다!

 

 

-출처-

https://stackoverflow.com/questions/41067069/javascript-errors-localstorage-cookie-loading-sandboxed-iframe-within-chrome

https://web.dev/sandboxed-iframes/

https://stackoverflow.com/questions/68983187/google-maps-iframe-doesnt-work-with-sandbox

'HTML > MDN 평가' 카테고리의 다른 글

MDN - Structuring planet data  (0) 2022.10.18
MDN - Mozilla splash page  (0) 2022.10.15
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

Task 2 

 

WEBVTT

0
00:00.000 --> 00:03.000
Don't touch my rabit.

1
00:04.000 --> 00:05.000
— It will perforate your stomach.
— You could die.

 

WEBVTT

0
00:00:00.010 --> 00:00:03.000
Don't touch my rabit.

1
00:00:04.500 --> 00:00:05.000
— It will perforate your stomach.
— You could die.

 

둘다 가능.

참고 https://w3c.github.io/webvtt/

'HTML > MDN 평가' 카테고리의 다른 글

MDN - Mozilla splash page  (0) 2022.10.15
MDN - Multimedia and embedding  (0) 2022.10.13
MDN - Marking up a letter  (0) 2022.10.12
MDN - Structuring a page of content  (0) 2022.10.12
MDN - Advanced HTML text  (0) 2022.10.11
<!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/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#citations

-참고 : 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 브라우저에서 가장 최신 버전으로 렌더링 되게 한다.

 

-출처-

https://webdir.tistory.com/m/38

https://gocoder.tistory.com/m/161  

'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

+ Recent posts