📚 공부한 내용

HTML

목록

정의형 목록

용어와 설명 or 이름과 값

<dl>
  <!-- 평점이라는 텍스트는 숨김 처리 -->
  <dt>평점</dt>
  <dd>
    <!-- 스크린리더가 읽지 않음 -->
    <span aria-hidden="true">★ ★ ★ ★ ☆</span>
    <span>4점</span>
  </dd>
  <!-- HTML 5.2 버전부터 dl 요소가 div를 자식으로 포함할 수 있게 되었다. 반드시 dt와 dd를 쌍으로 묶어야한다.-->
  <div>
    <dt>학습시간</dt>
    <dd>09:00 ~ 17:00 ( 28시간 )</dd>
  </div>
</dl>

하이퍼 링크

페이지 내 링크 이동 또는 다른 페이지로 이동하는 기능

<h1 title="여기는 제목입니다.">하이퍼링크 속성</h1>
<div title="마우스를 올리면 툴팁이 보입니다.">
  <a href="링크의 목적지">더보기</a>
</div>

<div>
  <a href="/" title="다운로드">
    <img src="images/brochure.png" alt="카페 W 강좌 브로슈어" />
  </a>
</div>

<!-- alt 속성은 이미지가 표시되지 않을 때 이미지를 대체하는 텍스트를 제공하는 데 사용되는 반면, title 속성은 이미지에 대한 설명을 제공하는 데 사용된다. -->
<!-- 따라서 alt 속성 대신 title 속성을 입력해선 안된다. -->
<div>
  <a href="/">
    <img src="images/brochure.png" title="다운로드" />
  </a>
</div>

하이퍼링크의 보안 이슈 해결방안

<div>
  <!-- 
  rel="noopener", rel="noreferrer" 링크를 열 때 새 창을 사용하는 경우, 
  링크된 페이지에서 원래 페이지로 돌아갈 수 없도록 하는 보안 취약성을 방지하고 
  링크된 페이지는 새 창에서 독립적으로 열리며, 원래 페이지와의 연결이 끊어진다. 
  -->
  <!-- 
  target="_blank" 링크를 새 창이나 새 탭에서 열도록 지정, rel="noopener",rel="noreferrer"와 함께 사용하기 권장되는데
  target="_blank"만 사용할 경우 링크된 페이지에서 window.opener를 통해 원래 페이지에 접근할 수 있어 보안상의 위협이 될 수 있기 때문이다.
  -->
  <a href="/" target="_blank" rel="noopener">링크</a>
  <a href="/" target="_blank" rel="noreferrer">링크</a>
  <a href="/" target="_blank" rel="nofollow">링크</a>
</div>

rel (relationship) 속성은 주로 <a> 태그로 생성된 하이퍼링크의 대상이 되는 URL과의 관계를 설명한다.

• nofollow: 이 값을 사용하면 검색 엔진이 해당 링크를 따라가지 않도록 지시할 수 있다.
  즉, 검색 엔진은 해당 링크를 따라가지 않고 링크된 페이지를 색인화하지 않는다.
• noopener: 이 값을 사용하면 링크를 통해 다른 문서로 이동할 때 새 창 또는 탭에서 열린 문서에 대해 원래 문서에 있는 JavaScript 코드의 권한을 제한할 수 있다.
  이는 보안 상의 이유로 권장되는 방법이다.
• noreferrer: 이 값을 사용하면 링크를 클릭한 사용자의 리퍼러 정보를 링크된 문서에 전달하지 않는다.
  이는 사용자의 개인 정보 보호와 관련이 있을 수 있다.

전역 속성

모든 HTML 요소에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있다.

• accesskey 요소에 대한 키보드 단축키를 제공
• autocapitalize 텍스트를 자동으로 대문자로 변환
• autofocus 요소가 페이지가 로드될 때 자동으로 포커스를 받도록 하는 데 사용
• class 요소에 클래스를 지정
• contenteditable 요소가 사용자 편집 가능하도록 설정하는 데 사용
• data-* 요소에 사용자 정의 데이터를 저장하는 데 사용
• dir 요소의 텍스트 방향을 설정
• draggable 요소가 드래그 가능하도록 설정하는 데 사용
• dropzone 요소가 드롭 존이 되도록 설정하는 데 사용
• hidden 요소를 화면에 표시하지 않는 데 사용
• id 요소에 고유한 ID를 지정하는 데 사용
• lang 요소의 언어를 설정하는 데 사용
• spellcheck 요소의 텍스트가 맞춤법 검사를 거치도록 설정하는 데 사용
• style 요소의 스타일을 설정하는 데 사용
• tabindex 요소의 탭 순서를 설정하는 데 사용
• title 요소의 설명을 설정하는 데 사용
• translate 요소가 번역되는지 여부를 설정하는 데 사용

인용문과 줄바꿈

문장 내에서 인용 구문이 사용될 필요가 있다면 <q> 요소 (큰 따옴표("), 작은 따옴표(')로 대체 가능)
여러 문장을 묶은 인용 구문이 필요하다면 <blockquote> 요소로 구조화
출처는 <cite> 요소

줄바꿈(Line Break)은 빈 요소(Empty Element)인 <br> 요소

<blockquote>
  <p>
    우리가 할 수 있는 노력은 과정이 전부야.
    <br />
    <q>결과는 우리 손 안에 있는 게 아니야.</q>
  </p>
  <cite>드라마 &lt;미생&gt; 중에서</cite>
</blockquote>

어휘 요소

<strong> strong 요소는 중대하거나 긴급한 콘텐츠를 나타낸다.</strong>
<b>
  b 요소는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용한다. 
  b 를 사용해 텍스트를 꾸미면 안되는 대신 CSS font-weight를 사용해 굵은 글씨체를 적용하거나, strong 요소를 사용해 특별히 중요한 텍스트를 나타내자
</b>

<em>
  em 요소는 텍스트의 강세를 나타낸다.
  텍스트의 의미를 강조하고 스크린 리더와 같은 보조 기술에서 강조된 음성 표현을 제공합니다.
</em>
<i>
  i 요소는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타낸다.
  시각적인 스타일링을 위해 사용되며, 텍스트의 의미나 중요성과는 관련이 없다.
  스크린 리더와 같은 보조 기술에서는 텍스트에 특별한 강조를 제공하지 않는다.
</i>

텍스트 레벨 요소

Text-level semantics

<div>
  <!-- 위 첨자와 아래 첨자 -->
  H<sub>2</sub>SO<sub>4</sub><sup>[1]</sup>
</div>
<div>
  <!-- 참조 목적의 하이라이트 된 글자 -->
  <mark>삼각함수</mark>
</div>
<div>
  <!-- 날짜와 시간읠 의미 -->
  <time datetime="2023-05-31">May 31. 2023</time>
</div>
<div>
  <!-- 축약어 -->
  <abbr title="맥도날드">맥날</abbr>
  <abbr title="점심 메뉴 추천">점메추</abbr>
</div>
<div>
  <!-- 의미적으로 삭제되었거나 오래된 정보일 수 있으며, 삭제된 것처럼 강조되지 않는다.-->
  <s>11,900원</s>
</div>
<div>
  <!-- del 태그는 시각적으로 중요한 정보가 삭제되었음을 강조하는 데 사용 -->
  정상가격 <del>10,000원</del> <br />
  할인가격 <ins>1,000원</ins>
</div>
<div>
  <!-- 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트 -->
  <small>COPYRIGHT RESERVED. 2002 &copy; EUID</small>
</div>

주소 요소

사용자 및 조직, 단체 등의 주소 및 연락처 정보

<footer>
  <address>
    <span>(주)홍길동</span>
    <span>대표이사 홍길동</span>
    <span>서울특별시 종로구 종로길</span>
    <span>사업자 등록번호 : 123-45-6789</span>
    <span>통신판매업 신고 : 2023 - 서울 - 00123</span>
    <span>연락처 : <a href="tel:+821012345678">010-1234-5679</a></span>
    <span>문의 <a href="mailto:contact@honggildond.net">contact@honggildond.net</a></span>
  </address>
<footer/>

임베디드 요소

HTML 문서에 포함(embedded) 할 수 있는 콘텐츠 요소

picture

 <picture>
    <!-- source는 생략가능해도 img는 생략 불가능하다. -->
    <source srcset="images/netflix.svg" type="image/svg" />
    <img src="images/netflix.png" 
         srcset="images/netflix@1x.webp 1x, images/netflix@2x.webp 2x" alt="넷플릭스" />
 </picture>

<img> 태그는 단일 이미지를 삽입하기 위해 사용되는 반면, <picture> 태그는 여러 개의 이미지 소스를 지정하고 미디어 쿼리를 사용하여 화면 크기 또는 장치에 따라 적합한 이미지를 선택하는 데 사용한다.

<source> 태그는 다른 이미지 소스를 지정하고, srcset 속성을 사용하여 각 이미지 소스의 URL을 지정한다.
또한 media 속성을 사용하여 각 이미지 소스가 적용되는 조건을 지정할 수 있다.

<img> 태그는 <picture> 태그의 자식 요소로 사용되며, <picture> 태그가 지정한 이미지 소스 중에서 가장 적합한 이미지를 선택할 수 없을 경우, <img> 태그의 src 속성에 지정된 대체 이미지를 사용한다.

비트맵 이미지 vs 벡터 이미지

• 이미지의 구성 방식
  • 비트맵 이미지는 픽셀 그리드로 구성되어 있다.
    각 픽셀은 고유한 색상 값을 가지며, 이러한 픽셀들의 배열이 이미지를 형성한다.
  • 벡터 이미지는 수학적인 방정식과 기하학적인 요소를 사용하여 이미지를 표현한다.
    선, 곡선, 다각형 등의 기하학적인 요소와 이러한 요소의 속성(색상, 두께 등)을 정의하여 이미지를 생성한다.
• 확대 및 축소의 품질 손실
  • 비트맵 이미지는 이미지가 확대되거나 축소될 때 픽셀 수준에서 정보를 유지하기 때문에 화질 손실이 발생할 수 있다.
    이미지가 확대되면 픽셀이 더 커지고, 이미지가 축소되면 픽셀이 더 작아지며, 이로 인해 계단 현상이나 흐림 등의 품질 저하가 발생할 수 있다.
  • 벡터 이미지는 수학적인 방식으로 이미지를 표현하기 때문에 확대 또는 축소해도 깔끔한 선과 곡선을 유지할 수 있다.
• 파일 크기
  • 비트맵 이미지는 픽셀 그리드에 모든 픽셀의 정보가 포함되기 때문에 이미지의 해상도가 높을수록 파일 크기가 커지는데 이는, 화면에 표시할 때 필요한 모든 픽셀의 색상 정보를 포함하기 때문이다.
  • 벡터 이미지는 수학적인 방정식과 기하학적인 요소만을 저장하기 때문에 이미지의 복잡성과 상관없이 파일 크기가 작다.
• 활용 분야
  • 비트맵 이미지는 사진, 실제 이미지, 디테일한 텍스처 등과 같이 자연스러운 이미지를 표현하는 데에 적합합니다.
  • 벡터 이미지는 로고, 아이콘, 일러스트레이션 등과 같이 기하학적인 요소가 주요한 이미지에 적합합니다.
    또한 화면 크기에 상관없이 고품질의 출력물을 생성하는데 유용합니다.
    
    
    비트맵 이미지는 JPEG, PNG, GIF와 같은 형식으로 저장되고, 벡터 이미지는 SVG (Scalable Vector Graphics)와 같은 형식으로 저장되고 각 형식은 서로 다른 용도와 요구 사항에 따라 사용된다.

video

<figure>
  <!-- poster 비디오가 재생되지 않을때 보여질 이미지 -->
  <!-- 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>

<!-- 비디오가 하나일 때는 소스는 생략 가능하다. --> 
<video
  src="video/google-developer-stories.mp4"
  controls
  autoplay
  muted
 ></video>

.vtt
track element

iframe 요소

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/6AHLPtiNFTE"
  title="스크린리더 사용자를 위한 착한 마크업 - 키보드 사용 보장 2부"
  frameborder="0"
  allowfullscreen
></iframe>

사용자 에이전트 스타일시트(User Agent Stylesheet)는 웹 브라우저의 기본 스타일링을 제어하기 위해 브라우저에 내장된 스타일 시트다.
모든 브라우저는 사용자 인터페이스 요소(버튼, 링크, 텍스트 등)를 렌더링하기 위한 기본 스타일을 가지고 있고, 기본 스타일은 브라우저 개발자들이 웹 페이지를 일관된 방식으로 표시할 수 있도록 지원하며, 일반적으로 브라우저의 기본 테마와 스타일을 정의하는 데 사용된다.

image map

link를 각각의 이미지에 따로 걸고싶을 때

<img src="images/sns.png" 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>

테이블 요소

Table tutorials w3c

행과 열로 이루어진 표 형식의 콘텐츠를 마크업할 때 사용할 수 있다.

<table> 영역에는 표 제목인 <caption> , 행을 나타내는 <tr> , 제목 셀을 나타내는 <th> , 내용 셀을 의미하는 <td>로 구성되어 있다.

<colgroup> 열 그룹을 정의하기 위해 사용
<col> 열의 스타일 및 속성을 지정하기 위해 사용
<thead> 테이블의 머리글 영역을 정의하기 위해 사용
<tbody> 테이블의 본문 영역을 정의하기 위해 사용
<tfoot> 테이블의 바닥글 영역을 정의하기 위해 사용

<table border="1">
  <thead>
    <tr>
      <th>과목명</th>
      <th scope="col">HTML/CSS</th>
      <th scope="col">Javscript</th> 
      <th scope="col">React</th>
    </tr>
  </thead>
  <!-- tfoot으로 선언한 행은 제일 마지막 행으로 이동된다 -->
  <tfoot>
    <tr>
      <th scope="row">김철수</th>
      <td>100</td>
      <td>95</td>
      <td>98</td>
    </tr>
  </tfoot>
  <!-- thead와 tfoot은 한번만 선언할 수 있지만, tbody는 여러번 선언할 수 있다. -->
  <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>

scope는 <th> 요소가 해당 헤더 셀이 어떤 범위를 가지는지를 지정하는 데 사용된다.

• scope 속성 값
  • row: <th> 요소가 해당 행의 헤더 셀임을 나타낸다.
    즉, 해당 헤더 셀이 속한 행의 모든 데이터 셀에 대한 헤더 역할을 수행한다.
  • col: <th> 요소가 해당 열의 헤더 셀임을 나타낸다.
    즉, 해당 헤더 셀이 속한 열의 모든 데이터 셀에 대한 헤더 역할을 수행한다.
  • rowgroup: <th> 요소가 해당 행 그룹의 헤더 셀임을 나타낸다.
    즉, 해당 헤더 셀이 여러 행을 묶는 그룹의 헤더 역할을 수행한다.
  • colgroup: <th> 요소가 해당 열 그룹의 헤더 셀임을 나타낸다.
    즉, 해당 헤더 셀이 여러 열을 묶는 그룹의 헤더 역할을 수행한다.
    
    scope 속성은 시각적으로 화면 낭독기와 같은 보조 기술을 사용하는 사용자들에게 테이블의 구조를 명확하게 전달하는 데 도움을 준다.
    또한, 웹 개발자들이 테이블의 의미론적인 구조를 정확하게 정의할 수 있도록 지원한다.

<p id="tableDesc">프론트엔드 관련 기술 시험 결과를 나타낸 표 입니다.</p>
<!-- aria-describedby 요약 정보을 바깥쪽에 만들고 연결시키기 -->
<table border="1" summary="표의 요약 정보" aria-describedby="tableDesc">
  <tr>
    <th>과목명</th>
    <th id="html">HTML/CSS</th> 
    <th id="js">Javscript</th>
    <th id="react">React</th>
  </tr>
  <tr>
    <th id="user01">김철수</th>
    <td headers="html user01">100</td>
    <td headers="js user01">95</td>
    <td headers="react user01">98</td>
  </tr>
</table>

headers 속성은 연결된 헤더 셀의 id 속성 값을 참조한다.
특정 <td> 요소가 여러 헤더 셀과 연결되어 있을 경우, headers 속성 값은 공백으로 구분하여 여러 id 값을 포함할 수 있다.
headers 속성은 연결된 헤더 셀의 id 속성 값을 참조하고, 특정 <td> 요소가 여러 헤더 셀과 연결되어 있을 경우 headers 속성 값은 공백으로 구분하여 여러 id 값을 포함할 수 있다.

이를 통해 보조 기술을 사용하는 사용자들이 데이터 셀과 관련된 헤더 셀을 이해하고 연관성을 파악할 수 있다.
또한, 웹 개발자들이 테이블의 구조를 명확하게 정의하여 웹 접근성을 향상시킬 수 있다.

form

폼 관련 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역할

접근성 측면에서도 중요한 부분이기 때문에 사용자의 환경을 고려하여 표준 문법에 맞게 마크업!!!

<div>
  <!-- method = "get || post" -->
  <form action="서버 URL" method="get">
    <!-- fieldset, legend 생략 가능 -->
    <fieldset>
      <legend>검색</legend>

      <!-- 명시적인 레이블링 labae for 와 input id 연결, 사용 권장-->
      <label for="search">검색어</label>
      <input type="text" id="search" />
      <!-- 암묵적인 레이블링 -->
      <label> 검색어 <input type="text" /> </label>

    </fieldset>
  </form>
  <!-- form 안에 button이 있어야 하지만 form id와 button form 연결을 통해 button과 연결 -->
  <!-- button은 type가 정의되지 않았을 때 submit이 default -->
  <button form="searchForm" type="submit"></button>
</div>