23.5.31 TIL

김진주·2023년 5월 31일

TIL html

TJL(Today Jinju Learned)

목록 보기

5/35

강의 내용

정의형리스트

하이퍼 링크

인용문과 줄바꿈

어휘 관련 요소

텍스트레벨 요소

address 요소

픽쳐와 소스 요소

비디오와 소스 요소

아이프레임 요소

이미지맵 요소

테이블 관련 요소

폼 관련 요소

정의형리스트 -사전에 많이 사용

정해진 바는 없으나 사용자한테 이해가 어려울 수도 있으니 1대1로 사용

<!-- 아리아 히든을 사용해서 텍스트는 보이지만 스크린리더에서 읽지는 않음 -->
<span aria-hidden="true">★ ★ ★ ★ ☆</span>

테이블로 구성할 수 있지만 정의형리스트로 만들 수 있다. 컨텐츠 블록이 있으면 제목이 있어야함

원래는 div로 안 묶였는데 HTML5부터 사용 가능해졌다. 대신 dt dd를 같이 묶어야 함
둘 중 하나만 묶는 건 문법상 오류!!
-> 정의형 리스트는 잘 사용하지는 않음

하이퍼 링크 요소

<body>
  <h1 title="여기는 제목입니다">하이퍼링크 관련 속성</h1>
  <div title="마우스를 올리면 툴팁이 보입니다">
    <a href="/">더보기</a>
  </div>
  
  <div>
  <!--  title : 마우스를 올리면 보충 설명 표시 
  		(ex. 약도 - 본문에 내용이 나와있을 때, 자세한 내용은 본문 내용 참조) -->
    <a href="/" title="다운로드">
    <!-- alt : 사진이 안 보일 때 대체 텍스트 표시 
    	 (ex. 약도 - 지하철 7번 출구로 나와서 300m 직진) -->
      <img src="images/brochure.png" alt="카페 W 강좌 브로슈어" />
    </a>
  </div>

  <div>
    <!-- alt 값을 읽지 않고 아리아 레이블에 있는 설명을 읽음 -->
    <!-- aria-lable : 태그들에 범용적으로 적용할 수 있는 속성, 
    		요소를 설명을 줄 때 사용하는 태그 title/id/class/스타일/히든 전역 속성 -->
    <!-- 액박 떴을 때 아리아 레이블도 화면에 표시 되나요? 뜨지 않는다. -->
    <a href="/" aria-label="카페 W 강좌 브로슈어 다운로드">
      <img src="images/brochure.png" alt="" />
    </a>
  </div>
</body>

전역속성

class: 요소에 CSS 클래스를 지정한다.
id: 요소에 고유한 식별자를 지정한다.
style: 요소에 인라인 CSS 스타일을 지정한다.
title: 요소에 추가 정보를 제공하는 툴팁을 지정한다.
lang: 요소의 언어를 지정한다.
data-: 사용자 정의 데이터 속성을 지정한다.
aria-: 접근성 관련 속성을 지정한다.
hidden: 요소를 화면에 표시하지 않는데 사용한다.
tabindex: 사용하면 키보드로 접근 가능 / 보드의 Tab키를 눌렀을 때 포커스의 이동 순서를 임의로 조정한다.

⚠️ hidden을 사용하면 돔트리에 아예 없는 요소가 된다. 그래서 스크린리더에서 읽히지 않는다.
메인은 한 번 밖에 사용하지 못 하지만 hidden을 사용하면 중복해서 쓸 수 있다. <main hidden>

title을 사용하면 이미지가 로딩이 될 때나 안 될 때나 모두 볼 수 있고 스크린리더에도 읽히는데, 왜 이렇게 사용하지 않는 걸 까?? 그이유는 다음과 같은 이유로 되지 않는다.
img 태그에 alt가 필수 항목이라 문법 에러가 난다

<a>에 target="_blank"를 사용하면 탭 내빙(Tabnabbing)이라는 보안 이슈가 생기는데
다음은 그 문 제점을 해결하는 방법이다.

noopener, noreferrer 및 nofollow는 HTML 링크(<a> 요소)의 속성으로 사용되는 값들입니다. 각각의 차이점은 다음과 같습니다:

noopener: rel 속성에 noopener 값을 지정하면, 새 탭이나 창을 열 때 연결된 원래 문서와의 관계를 끊어 보안상의 이점을 제공합니다. 이를 통해 새 탭이 원래 페이지에 액세스할 수 없도록 하여 악용을 방지합니다. 주로 탭 내빙(Tabnabbing) 공격을 방지하기 위해 사용됩니다.

noreferrer: rel 속성에 noreferrer 값을 지정하면, 웹브라우저가 해당 링크를 통해 다른 페이지로 이동할 때 HTTP 리퍼러 정보를 전달하지 않도록 합니다. 리퍼러 정보는 이전 페이지의 URL을 포함하고 있어 개인정보 유출이나 사용자 추적에 이용될 수 있으므로, 이를 방지하기 위해 사용됩니다.

nofollow: rel 속성에 nofollow 값을 지정하면, 검색 엔진이 해당 링크를 따라가지 않도록 합니다. 즉, 해당 링크로부터 페이지로의 연결이 검색 엔진에 의해 무시됩니다. 이는 링크를 통해 얻는 검색 엔진 최적화(SEO) 이점을 방지하기 위해 사용될 수 있습니다. 주로 신뢰하지 않는 사이트로의 링크 또는 광고 링크에 적용됩니다.

요약하면, noopener는 새 탭에서 열린 페이지와 원래 페이지 사이의 연결을 끊어 보안상의 이점을 제공하고, noreferrer는 리퍼러 정보를 전달하지 않아 개인정보 유출 및 사용자 추적을 방지합니다. nofollow는 검색 엔진이 해당 링크를 따라가지 않도록 하여 검색 엔진 최적화(SEO) 이점을 방지합니다. 이 세 가지 속성은 각각 다른 보안 및 웹사이트 운영 관련 이슈에 대응하기 위해 사용됩니다.

인용문과 줄바꿈 요소

<q>는 작은단위 <blockquote>는 큰 단위

어휘 관련 요소

<body>
    <h1>카페 W 강의 후기</h1>
    <div>
      <!-- em 강조요소 strong이 더 큰 강조-->
      <!-- <strong> [중요성 강조 요소]
           <em> [강조 요소]
           <b> [중요성, 관련성 없이 다른 글자와 구분을 목적으로 사용되는 요소]
           <i> [기술적 용어, 관용구, 생각 등에 사용되는 요소]-->
      <p><em>무엇이 중요한지 알게된 시간!</em></p>
      <p>
        제가 들었던 해외 튜토리얼에 비해 <strong>시맨틱한 마크업</strong>과
        <strong>접근성</strong> 비중이 크게 다뤄져 좋았습니다. 많은 튜토리얼들이
        디자인을 어떻게 구현하는지에만 초점이 맞춰져 있잖아요. 무엇이 중요한지
        알게되어 많은 도음이 되었습니다.
      </p>
      <p><span>★★★★★</span> <b>5점</b> <i>우정민</i></p>
    </div>
  </body>

텍스트 레벨

<body>
  <h1>텍스트 레벨</h1>
  <!-- sub:아래첨자 sup:위첨자 -->
  <div>
    H<sub>2</sub>SO<sub>4</sub>
    <sup>[1]</sup>
  </div>

  <!-- 컨+F한것처럼 마크 -->
  <div>
    <mark>삼각함수</mark>
  </div>

  <!--time datetime="2023-05-31"로 날짜임을 알려줌 -->
  <div>
    <time datetime="2023-05-31T11:20:35">May 31. 2023</time>
  </div>

  <!-- abbr은 축약요소 표현 -->
  <div>
    <abbr title="맥도날드">맥날</abbr>
    <abbr title="점심 메뉴 추천">점메추</abbr>
  </div>

  <!-- 취소선 -->
  <div>
    <s>11,900원</s>
  </div>
  
  <div>
    정상가격 <del>10,000원</del> <br />
    할인가격 <ins>1,000원</ins>
  </div>
  
  <!-- 저작권, 법적 텍스트, 주석 및 작은 글씨 요소 -->
  <div>
    <small>COPYRIGHT RESERVED. 2022 &copy; EUID</small>
  </div>
</body>

address 요소

<body>
  <!-- 사용자 및 조직, 단체 등의 주소 및 연락처 정보를 마크업할 때 적절 -->
  <footer>
    <address>
      <span>(주)멋쟁이사자처럼</span>
      <span>대표이사 이두희</span>
      <span>서울특별시 종로구 종로3길 17 D타워, 16-17층</span>
      <span>사업자 등록번호 : 264-88-01106</span>
      <span>통신판매업 신고 : 2019 - 서울강남 - 00774</span>
      <!-- tel이라는 프로토콜을 활용해서 탭하면 전화가 걸림 -->
      <span>연락처 : <a href="tel:+821012345678">010-1234-5679</a></span>
      <!-- 메일 프로그램이 실행되면서 받는 사람란에 이메일이 자동 세팅됨-->
      <span>문의 <a href="mailto:contact@likelion.net">contact@likelion.net</a></span>
      <!-- 메일 프로그램이 실행되면서 받는 사람란에 이메일/제목까지 자동 세팅됨-->
      <span>문의 <a href="mailto:contact@likelion.net?subject=문의사항">contact@likelion.net</a></span>
    </address>
  </footer>
</body>

픽쳐와 소스 요소

<body>
    <!-- 자신 디바이스에 맞는 이미지 선택됨 -->
    <!-- 화면의 너비가 변하면 그에 맞는 사진으로 대체됨-->
    <picture>
      <source media="(min-width: 650px)"
        srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
      <source media="(min-width: 465px)"
        srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-medium.png">
      <!-- img tag for browsers that do not support picture element -->
      <img
        src="https://googlechrome.github.io/samples/picture-element/images/kitten-small.png"
        alt="a cute kitten">
    </picture>
  </body>

비디오와 소스 요소

<body>
  <figure>
  <!-- controls-컨트롤할 수 있는 컨트롤바가 생김
  		autoplay-자동재생(이것만 쓰면 자동으로 재생되지 않음 -웹접근성 문제때문에) 
        muted-음소거가 기본값으로 설정(이걸 쓰면 자동재생된다.) -->
    <video class="fullsize" poster="video/poster.jpg" controls autoplay muted>
      <source src="video/google-developer-stories.mp4" type="video/mp4" />
      <source src="video/google-developer-stories.mov" type="video/mov" />
      <source src="video/google-developer-stories.ogg" type="video/ogg" />
      <source src="video/google-developer-stories.webm" type="video/webm" />
      <track src="video/google-developer-stories-subtitles-en.vtt"
        kind="captions" srclang="en" label="English Caption" />
    </video>

    <figcaption>구글 개발자 이야기</figcaption>
  </figure>
</body>

iframe 요소

<body>
  <h1>인라인 프레임</h1>
  <div>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/mhVhBCTDSIo" 
    	title="스크린리더 사용자를 위한 착한 마크업 - 사진을 묘사하는 VoiceOver 이미지 설명" 
    	frameborder="0"  allowfullscreen></iframe>
  </div>
  <!-- 에이전트 스타일로 브라우저가 가진 <figure>의 기본 스타일이 존재해서 둘의 격차가 발생 -->
  <figure>
    <div class="iframe-container iframe16">
      <iframe class="fullsize" width="560" height="315" title="웹접근성과 웹표준 개념" 
              frameborder="0" allowfullscreen 
              src="https://www.youtube.com/embed/fUcIe7-2zxw"></iframe>
    </div>
  </figure>
</body>

이미지맵 요소

<body>
  <img src="images/sns.png" usemap="#image-map">
  <!-- 맵과 이미지 태그를 usemap="#image-map"에서 연결-->
  <!-- 하나의 이미지에 여러개의 링크연결할 때 사용 -->
  <map name="image-map">
      <area target="_blank" alt="페이스북" title="페이스북" href="https://www.facebook.com/" coords="15,15,14" shape="circle">
      <area target="_blank" alt="인스타그램" title="인스타그램" href="https://www.instagram.com/" coords="65,15,14" shape="circle">
      <area target="_blank" alt="유튜브" title="유튜브" href="https://www.youtube.com/" coords="115,15,14" shape="circle">
  </map>
</body>

테이블 관련 요소

<body>
  <h1>과목별 테스트 결과</h1>
  <table border="1">
    <thead>
      <tr>
        <!-- scope="col" 유효범위를 나타냄 -->
        <!-- thead, tbody, tfoot 순으로 나타남 /tbody는 여러번 사용 가능 -->
        <th>과목명</th>
        <th scope="col">HTML/CSS</th>
        <th scope="col">JavaScript</th>
        <th scope="col">React</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">금윤호</th>
        <td>100</td>
        <td>95</td>
        <td>98</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th scope="row">범쌤</th>
        <td>97</td>
        <td>100</td>
        <td>99</td>
      </tr>
      <tr>
        <th scope="row">홍길동</th>
        <td>80</td>
        <td>75</td>
        <td>63</td>
      </tr>
    </tbody>
  </table>
  
  <!-- 설명을 밖에 선언하고 테이블로 가져오기 aria-describedby="tableDesc" -->
  <p id="tableDesc">
    '함께 성장하는 바른 교육' 이듬(EUID)'과 멋사가 만났습니다. 좋은 프론트엔드 개발자를 양성하기 위해 최선의 노력을 다하겠습니다. 여러분도 적극 동참해 주시기 바랍니다.
  </p>

  <table border="1" aria-describedby="tableDesc">
    <tr>
      <th>과목명</th>
      <th id="html">HTML/CSS</th>
      <th id="js">JavaScript</th>
      <th id="react">React</th>
    </tr>
    <tr>
      <!-- 스크린리더에게 정확한 정보를 알려줌(웹접근성을 높여줌) / 
          headers="html ma01"정보를 연결 / 복잡할 때 사용하기 좋음 -->
      <th id="ma01">김미리</th>
      <td headers="html ma01">100</td>
      <td headers="js ma01">95</td>
      <td headers="react ma03">98</td>
    </tr>
    <tr>
      <th id="ma02">임시연</th>
      <td>97</td>
      <td>100</td>
      <td>99</td>
    </tr>
    <tr>
      <th id="ma03">김태진</th>
      <td>80</td>
      <td>75</td>
      <td>63</td>
    </tr>
  </table>
</body>

form 관련 요소

<body>
  <h1>폼 관련 요소</h1>
  <!-- 클라이언트랑 서버랑 연결되는 태그 -->
  <form action="서버 URL" method="get" id="searchForm">
    <!-- 연관성있는 것을 묶어줌 -->
    <fieldset>
      <legend>검색</legend>
      <div>
        <!-- 명시적인 레이블링 for="search - id="search 연결 -->
        <label for="search">검색어</label>
        <!-- 폼관련 요소는 1:1로 대응되는 레이블이 반드시 있어야 함 -->
        <input id="search" type="search" maxlength="10" minlength="6" placeholder="검색어"/>
      </div>
    </fieldset>
  </form>
  <!-- 버튼타입은 생략하면 submit이 기본값 -->
  <button type="submit" form="searchForm">전송</button>
</body>