HTML+CSS 기초 강의 - 11. HTML5 에서 사용하지 않는 태그와 속성들

html4 시절에 표준에서 제외되어 사라지는 것으로 예고되었고 html5에서는 표준에서 제외되면서 더이상 사용되지 않는 태그와 속성들입니다. 

표준에서 제외되었을 뿐 대부분 브라우저들이 호환성 유지를 위해 아직 표준에서 제외된 많은 태그와 속성들을 지원합니다. 

미래의 언젠가는 지원되지 않을 태그여서 언젠가는 브라우저에서 정상 표시 되지 않겠지만, 아직은 잘 동작한다는 점은 알아두어야 합니다.

사라지는 태그들

태그

설명

축약어 표시에 사용. 태그로 대체.

흑우 -> 흑우

애플릿 정의에 사용.

HTML 문서의 기본 글꼴 정의에 사용.

텍스트를 더 크게 표시함.

디렉토리 목록 표시에 사용.

사용 글꼴 정의. font-family:글꼴명 CSS 속성으로 대체.

</p></td> <td style="width: 717px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>프레임 구조로 페이지 레이아웃을 작성하는데 사용. <iframe> 또는 CSS 레이아웃 속성으로 대체.</p></td> </tr> <tr><td style="width: 106px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p><isindex></p></td> <td style="width: 717px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>검색어를 입력하는 한줄 입력 필드로 사용.</p></td> </tr> <tr><td style="width: 106px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p><s></p> <p><strike></p></td> <td style="width: 717px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>텍스트 취소선 긋기에 사용. text-decoration:line-through CSS 속성으로 대체</p></td> </tr> <tr><td style="width: 106px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1"><tt></td><td style="width: 717px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1"><p>텔레타입(타자체) 텍스트-Teletype-Text-표시에 사용. <code> 태그로 대체</p></td></tr><tr><td style="width: 106px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1"><u></td><td style="width: 717px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1"><p>텍스트 밑줄 긋기에 사용. text-decoration:underline CSS 속성으로 대체.</p></td></tr><tr><td style="width: 106px; height: 24px; border-bottom: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1"><center></td><td style="width: 717px; height: 24px; border-bottom: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1"><p>텍스트 가운데 정렬에 사용. text-align:center CSS 속성으로 대체.</p></td></tr></tbody></table> <!--kg-card-end: html--> <p><strong><u>사라지는 태그 속성들</u></strong></p> <!--kg-card-begin: html--> <table class="txc-table content-codetable" width="819" cellspacing="0" cellpadding="0" border="0" style="border: none; border-collapse: collapse; width: 819px;" 맑은="" 고딕",="" sans-serif;font-size:13px"=""><tbody><tr><td style="width: 185px; height: 24px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0) rgb(217, 217, 217) rgb(217, 217, 217) rgb(0, 0, 0); background-color: rgb(246, 246, 246); color: rgb(0, 0, 0);"><p>태그</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0); background-color: rgb(246, 246, 246); color: rgb(0, 0, 0);"><p>사라지는 속성들</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>a</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>rev,  charset,  shape, coords</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>link</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>rev, target</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>img</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>longdesc, name, hspace, vspace, align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>iframe</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>longdesc, frameborder, marginwidth, marginheight, scrolling, align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>area</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>nohref</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>head</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>profile</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>html</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>version</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>meta</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>scheme</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>object</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>archive, classid, codebase, codetype, declare, standby, border, hspace, vspace, align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>param</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>valuetype, type </p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>td</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>axis, abbr, scope, bgcolor, width, nowrap, char, charoff, valign, align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>th</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>bgcolor, width, nowrap, char, charoff, valign, align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1">tr</td><td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1"><p>bgcolor, char, charoff, valign, align</p></td></tr><tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1">thead, tfoot</td><td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" rowspan="1">char, charoff, valign, align</td></tr><tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>table</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>bgcolor, border, cellpadding, cellspacing, frame, width, rules, align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>body</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>alink, link, vlink, text, background, bgcolor</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>hr</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>width, noshade, size, align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>br</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>clear </p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>ol, ul</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>compact, type</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>dl, menu</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>compact</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>li</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>type </p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>col, colgroup</p></td><td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>char, charoff, valign, width, align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>tbody</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>char, charoff, valign , align</p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>pre</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(217, 217, 217); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>width </p></td> </tr> <tr><td style="width: 185px; height: 24px; border-bottom: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(217, 217, 217); border-left: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>div, h1, h2, h3, h4, h5, h6, p, caption, input, legend</p></td> <td style="width: 633px; height: 24px; border-bottom: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);"><p>align</p></td> </tr> </tbody></table> <!--kg-card-end: html--> <p><a href="https://apost.dev/67">&lt;&nbsp;이전강의</a> <a href="https://apost.dev/63">다음강의&nbsp;&gt;</a><br></p> </div> <div class="gh-related gh-canvas"> <div class="related-wrapper"> <div class="related-title">CSS 관련글</div> <!-- Related Post --> <ul class="related-section"> <li><p><a href="/css-transparent-color-rgba/">CSS 반투명 색상과 rgba(), opacity 투명도 적용 방법</a></p></li> <li><p><a href="/866/">CSS 텍스트영역(&lt;textarea&gt;) 크기 조절 차단하기</a></p></li> <li><p><a href="/839/">&lt;sup&gt; 태그(어깨문자)를 CSS로 구현하기</a></p></li> <li><p><a href="/831/">&lt;abbr&gt;과 &lt;dfn&gt; 태그의 활용</a></p></li> <li><p><a href="/680/">HTML 데이터셋(Dataset, data-*) 속성의 이해</a></p></li> </ul> <a href="/tag/css/"> 글 182 개 모두보기 &rarr;</a> </div> </div> <footer class="gh-article-footer gh-canvas"> <nav class="gh-navigation"> <div class="gh-navigation-previous"> <a class="gh-navigation-link" href="/729/"> <span class="gh-navigation-label"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="19" y1="12" x2="5" y2="12"></line> <polyline points="12 19 5 12 12 5"></polyline> </svg> Previous post</span> <span class="gh-navigation-title">티스토리 글 주제 자동 선택하기</span> </a> </div> <div class="gh-navigation-middle"></div> <div class="gh-navigation-next"> <a class="gh-navigation-link" href="/730/"> <span class="gh-navigation-label">Next post <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg></span> <span class="gh-navigation-title">노트북용 로지텍 무선 페블마우스 M350 1년 사용기. 그리고 사망 기록</span> </a> </div> </nav> </footer> </article> </main> <footer class="gh-foot no-menu gh-outer"> <div class="gh-foot-inner gh-inner"> <div class="gh-copyright"> Copyright© 2024 aPOST All rights reserved. </div> <div class="gh-powered-by"> <a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a> </div> </div> </footer> </div> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> <script src="/assets/built/main.min.js?v=68b820934a"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- Prism Languages --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-markup-templating.min.js" integrity="sha512-TbMpeuT8rHP3DrAX8tSkpspYIT3It0fypBn5XaSp+Hiy3n9wvPFjd3pal7YtesrphulbmxcLNB9E0sq7xDGtWg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-bash.min.js" integrity="sha512-/xr8BBHgclic5pEsdspPqQS8ne+X8QbYRK22c1WRDj8zERTBJDH+Ic/3o8vnrdz5yeGzlzMfp8k33tGgDaAh6g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-python.min.js" integrity="sha512-yIpe1UXrH/ZWwu3n7MdHNfMbPXftP0jlg9+lRhzlpbolElt33h3PGx9ICzqf/k+yca3QNzqcO3sdtKJuYRTi4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-ignore.min.js" integrity="sha512-nOh7T3GqdtbSsxWGfh/Z/XO9j4sNuVZUO5o3KtlqlqhU4L5CtNZwc25qrMjHh5P+6FbVXpOZiH9LEs8yGacRJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-http.min.js" integrity="sha512-D74dfEUMZ499epu7enRNiT7KR6kBW+aXnyDrv83PQyHJDBebMLR5aYT97CkfGtAwCXtKmME+mcyNXRVtflrKHw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-css.min.js" integrity="sha512-Jv/EO8zjSyqIDa2S0YjCGFY+mEROxud6g7AhfA0KcggjdzhPBhoRyetxV7G7/dnfBdZBzcOvpRn1K+J6sn3jyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-javascript.min.js" integrity="sha512-3oavHcAYV/4pmn+iDuax6ru7dpjKnd+21+SzCQrYdTiYDncloL7QJ3qYvsA9JU0p7ZQjB+DizGeWMm2sUrCzSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- Prism Plug-ins --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/line-numbers/prism-line-numbers.min.js" integrity="sha512-dubtf8xMHSQlExGRQ5R7toxHLgSDZ0K7AunqPWHXmJQ8XyVIG19S1T95gBxlAeGOK02P4Da2RTnQz0Za0H0ebQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.min.js" integrity="sha512-YrvgEHAi5/3o2OT+/vh1z19oJXk/Kk0qdVKbjEFl9VRmcLTaWRYzVziZCvoGpJ2TrnV7rB8pnJcz1ioVJjgw2A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" integrity="sha512-pUNGXbOrc+Y3dm5z2ZN7JYQ/2Tq0jppMDOUsN4sQHVJ9AUQpaeERCUfYYBAnaRB9r8d4gtPKMWICNhm3tRr4Fg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> window.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('pre[class*=language-]').forEach(function (node) { node.classList.add('line-numbers'); }); Prism.highlightAll(); }); </script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-K8Y5SJP0NY"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-K8Y5SJP0NY'); </script> <script> window.addEventListener("DOMContentLoaded", function(){ const imgs = Array.from(document.querySelectorAll("div.gh-content img")) imgs.forEach(img => { console.log(img.alt) if(img.alt == ""){ const altText = img.src.split("/").at(-1).split(".").slice(0, -1).join(".").replaceAll("-","").toUpperCase() img.setAttribute("alt", altText) } }) }) </script> </body> </html>