오늘도 HTML 태그 공부하고, js와 css 맛보기 했다.
오늘 배운 내용 정리
💡 임베디드(Embedded) 요소
HTML 문서에 포함(embedded) 할 수 있는 콘텐츠 요소로
<img>, <video>, <audio>, <iframe>, <map> 등이 있습니다. 💡 테이블 관련 요소
행과 열로 이루어진 표 형식의 콘텐츠를 마크업할 때 <table> 요소를 사용할 수 있으며
<table> 영역에는 표 제목인 <caption> 요소,
행을 나타내는 <tr> 요소,
제목 셀을 나타내는 <th> 요소,
내용 셀을 의미하는 <td> 요소로 구성됩니다.💡 폼 관련 요소
폼 관련 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역할을 담당합니다.
사용자가 자료를 검색하기 위한 검색어 입력 상자나 여러 가지 항목에서
원하는 값을 선택할 수 있도록 제공하는 라디오 버튼 또는 체크 박스,
목록 형태로 펼쳐지는 목록 상자(combo box),
서버로 자료를 전송하기 위한 전송 버튼 등이 이에 해당됩니다.💡 인터렉티브 요소
인터렉티브 요소는 사용자와 상호작용을 할 수 있도록 제공하며
<details>, <summary>, <dialog> 요소 등이 있습니다.💡 스크립팅 요소
스크립팅 관련 요소로는 <script>, <noscript>, <canvas> 요소 등이 있습니다.
HTML 문서를 제작할 때 자바스크립트의 역할은 매우 중요합니다.
이러한 자바스크립트 코드를 직접 문서에 삽입하거나 외부에 별도로 작성한
자바스크립트 파일을 연결하고자 할 경우 script 요소를 사용할 수 있습니다.
또한 HTML5에서는 <script> 요소에 기존에 제공하던 src와 type 속성 이외에
async와 defer 속성이 추가되었습니다.<script src="js/card.js" defer></script>
<noscript>
<p>Javascript를 지원하지 않은 환경에서는 서비스를 이용할 수 없습니다.</p>
</noscript>💡 유저 인터렉션 속성
앞서 살펴본 인터렉티브 요소처럼 사용자와
상호작용(Interaction) 할 수 있도록 만들어 주는 속성이 있습니다.
hidden, tabindex, accesskey, contenteditable,
draggable 속성들이 대표적인 유저 인터렉션 속성입니다.🐟 오늘 배웠던 내용 중에 궁금한 점
1. script > type="module" type 왜 다는건지???
오늘 코드를 따라 치면서 module이라는 type을 처음 들어봤다.
모듈(module)이란?
모듈은 기본적으로 JavaScript 코드를 담고 있는 파일입니다. 다만 일반적인 JavaScript 파일과는 다른 여러가지 차이점을 갖고 있습니다.
2. async / defer 차이는?
async / defer는 scipt 태그의 속성이다.
- async는 스크립트를 다운로드됐을 때 곧바로 평가 실행하고 defer은 문서(HTML)을 완전히 다 읽은 후에 실행한다.
- async는 먼저 다운로드된 순서대로 실행하고 defer은 정의된 순서대로 실행된다.
3. iframe / video 태그 차이는?
- iframe은 비디오를 삽입하기 위한 태그는 아니다.
주로 외부 웹 페이지를 현재 페이지에 삽입하여 특정 부분을 보여주는데 사용된다.
예를 들어, 지도, YouTube 비디오 플레이어, 소셜 미디어 피드 등을 삽입할 수 있습니다. - video는 비디오 콘텐츠를 재생하는 데 사용된다. 웹 페이지 내에서 비디오를 표시하고, 오디오 및 비디오 콘텐츠를 재생할 수 있다.
결론 = iframe은 외부 웹 콘텐츠를 현재 페이지에 삽입하는 데 사용되고, video는 비디오 콘텐츠를 표시하고 재생하는 데 사용된다.
@jaaerim