현재 노트: KR-010.10 b HTML 구현 기록 저장소
상위 분류: KR-010.10 HTML,CSS,JavaScript

#HTML

글 작성 이유

실제 사용했던 HTML 관련 내용을 정리하기 위해

흔히 HTML 사용할 줄 아세요? 라는 말을 들었을 때 주로 태그 , 이벤트 ,window, document 이런 요소를 어느 정도 다룰 줄 아냐는 질문이 포함됐다고 생각합니다.

위의 요소들은 보통 모르면 인터넷에서 필요할 때마다 검색해서 사용하게 됩니다. 그 양이 너무 많기 떄문이죠. 그래서 제가 직접 사용해본 것들을 업데이트 해놓으면 html 캐쉬 저장소 처럼 사용하기 좋지 않을까? 싶어 작성하는 글입니다.

물론 HTML의 경우 HTML5의 특정 기술이나 웹 브라우저 및 서버 클라이언트의 통신이라는 이론적인 내용도 사실 HTML을 한다는 것에 포함되기는 하지만, 여기서는 실제 구현 위주의 언급했던 요소들 위주로 작성합니다. 본 글은 계속 업데이트 예정입니다.

카테고리

• tag
• event
• window
• document
• element

Tag

HTML에서 사용되는 기본 단위인 태그를 정리해 놓는 부분입니다. 모든 태그들에 사용되는 공통 property와 method 그리고 각 태그별로 사용되는 예제 형태로 구성됩니다.
태그의 추가 요소는 attribute라고 불리며 특정타입이나 설정을 변경합니다.

태그와 요소는 같지 않습니다.

global property

global method

• scrollIntoView() 해당 element에 사용돼어 스크롤 이동

input 태그

입력을 받기 위한 태그. 다양한 입력을 받기 위해 사용되는 필수 기본 태그

• type: <input>의 입력 형태를 결정
  • button

button 태그

<input>의 type=button 과 비슷한 기능을 하지만, void element 가 아닌 것이 특징으로 button내에 css나 img등을 s자식 태그로 추가해서 관리 가능. default 가 <form>의 기능을 지원

• type: submit, button, reset

<form>

<textarea>

<label>

Media 파일들을 처리하는 태그들

<img>

img를 가져오는 대표적인 태그. img안에 링크를 지우너하지 않고 <a>태그의 자식으로 <img>사용

<aduio>

음성을 가져올 때 사용하는 태그 기본적으로 src에 닫힌 태그방식. 필요에따라 controls나 autoplay. roop 설정가능.
주의할점은 브라우저마다 지원안 되는 경우, 특정확장자가 지원안 하는 경우등도 있어서 이런 호환성을 잘 살펴봐야 한다

`<video그의 차이점

• 의미론적으로 <tr>은 테이블 행(Table Row)을, <th>는 테이블 헤더 셀(Table Header)을 의미합니다.
• 기본적으로 <th>는 굵은 글씨체와 가운데 정렬이 적용됩니다.
• 스타일을 동일하게 적용하면? 시각적으로 차이가 없긴하다.
• 그러나 스크린 리더와 같은 시각 장애인을 위한 보조 기술에서는 이 두 태그를 명확히 구분하여 읽어줍니다.

Event

키입력, 마우스 입력, 폼 제출과 같은 특정 이벤트가 발생 할 때 처리하기 위한 모음집입니다. 특정 태그에 종속된 이벤트가 있을 수 있고, 모든 태그에 사용 가능한 전역 이벤트가 있습니다.

• 전역 이벤트 (모든 태그 사용 가능)
  • onClick: 클릭 시 발생
  • onPointerMove: 포인터 이동 시 발생
  • onMouseOver/onMouseOut
  • onKeyDown/onKeyUp
  • onPointerEnter
• 특정 태그 종속 이벤트
  • onSubmit: <form> 전용
  • onReset: <form> 전용
  • onChange: 입력 요소 (<input>, <textarea>, <select>) 전용
  • onSelect: 텍스트 입력 요소 전용

window

HTML에서 중요한 window객체와 관련된 내용입니다. window객체의 property와 method를 정리해 봅니다.

property

window.location.href 현재페이지 url
window.location.searchurl의 쿼리 문자열

method

• new URLSearchParams(window.location.search).get(<query>) window객체를 통해 주소창에서 쿼리요소 얻기
• <confirm> : 확인 or 취소 입력 받기
  • return: true or false

document

HTML의 기본이 되는 document와 관련된 내용입니다. document객체의 property와 method를 정리해 봅니다.

proerty

method

• querySelectorAll(): 파라미터로 받은 selector에 대한 하나 이상의 NodeList