노션 데이터베이스를 DB로 사용 중JS 스크립트에서 계정 DB를 불러오고, 계정 DB의 각 행에서 다시 주제 DB를 불러서 일치하는 URL을 불러오고 있음속도가 느림평균 로딩 시간은 약 44.4초계정 DB의 각 행마다 주제 DB를 호출하기 때문에, DB 호출 횟수는 1

CSS를 공부하고 있는 상황이었다.새로운 속성을 학습하고 실제로 어떻게 동작하는지 눈으로 보고 싶었다.직접 작성직접 코드를 작성하는 건 시간도 걸리고 귀찮다.무엇보다 의지력이 소모되므로 공부를 지속하는데 영향이 간다.예제 찾기MDN이나 코딩 블로그를 보면 예제와 함께

코드의 구조와 계층을 한눈에 보기 쉽도록 만드는 정렬 규칙주로 2칸 또는 4칸의 공백을 사용들여쓰기는 코드 가독성, 협업, 유지보수성을 높여줌HTML 자체 문법은 아니지만, 좋은 코드 습관으로 권고된다.

코드에 설명이나 메모를 추가할 때 사용하는 기능이다.<!--주석 내용--> 형식으로 사용한다.브라우저에 표시되지 않고, 오로지 소스 코드 상에서만 보인다.한 줄/여러 줄 모두 사용 가능하다.코드를 일부 일시적으로 실행하지 않고 비활성화할 때 자주 사용한다.

웹 페이지의 내부 구조, 코드, 성능, 네트워크 문제 등을 쉽게 분석하고 디버깅할 수 있도록 브라우저에 내장된 도구원하는 영역을 클릭하면 해당 요소의 HTML 구조와 적용된 스타일을 실시간으로 보여준다.서버로 오가는 모든 데이터를 추적할 수 있다.콘솔에서 명령을 실행하

미리 정의된 옵션들을 제안해 주는 자동완성 드롭다운 기능을 제공한다.HTML5에서 추가된 태그select 태그와 달리 목록 외의 값도 자유롭게 입력할 수 있다. (옵션에 없는 값도 입력할 수 있다.)input의 list 속성과 datalist의 id 값이 일치해야 한다

브라우저가 사용자가 이전에 입력했던 값을 자동으로 완성하거나 안내하는 기능을 허용할지 지정한다.email, current-password, family-name, tel 등 구체적인 값을 지정할 수도 있어, 브라우저가 더 정확하게 자동완성 값을 불러올 수 있게 한다.f

input이나 textarea 등에 입력할 값의 예시나 간단한 안내를 잠시 보여주는 속성이다.사용자가 입력을 시작하면 이 힌트는 자동으로 사라진다.짧은 안내만 권장한다.value 속성은 실제 초기값이므로, 폼 전송시 그 값이 그대로 서버로 가지만, placeholder

input, select, textarea 등 폼 요소에 사용하는 Boolean 속성이다.이 속성이 있으면, 해당 필드는 반드시 입력해야 폼이 제출된다.사용자가 비워두고 제출하려고 하면, 브라우저가 자동으로 경고 메시지를 표시하면서 제출을 막아준다.checkbox나 r

개념 form 안에서 연관된 입력 요소들과 그에 대응하는 label 들을 그룹으로 묶는 요소이다. 특징 박스 모양의 경계선이 생겨, 시각적 구분을 제공한다. legend 태그를 함께 쓰는 것이 좋다. 예시

사용자가 클릭할 수 있는 버튼을 정의할 때 사용input 태그와 달리 닫는 태그가 있어 내부에 텍스트나 이미지 등의 콘텐츠를 삽입할 수 있다. (예: 텍스트, 이미지, HTML 요소)type 속성으로 버튼의 동작을 제어한다. (예: submit(기본값), reset,

드랍다운 리스트를 만드는 폼 요소이다.내부에 option 태그들을 포함하여 각각의 선택 항목을 정의한다.기본적으로 하나만 선택 가능하지만, multiple 속성으로 다중 선택 지원optgroup 태그로 관련 옵션들을 그룹으로 묶을 수 있다.selected 속성으로 미리

여러 줄의 텍스트를 입력받을 수 있는 폼 요소<input type="text">와 달리, 긴 텍스트나 여러 줄의 내용을 자유롭게 입력할 수 있다.form의 하위 요소로 사용된다.rows 속성과 cols 속성으로 기본 크기를 설정한다.여는 태그와 닫는 태그 사이에

사용자로부터 데이터를 입력받아 서버로 전송하기 위한 입력 양식을 만드는 컨테이너 요소다양한 입력 요소들을 포함하여 구성된다.action 속성으로 데이터를 전송할 서버 URL을 지정한다.method 속성으로 GET 또는 POST 방식을 선택할 수 있다.name 속성이 있

행과 열 구조로 데이터를 표현하는 테이블을 만드는 요소이다.table > tr > td/th 순서의 계층 구조thead, tbody, tfoot으로 머리글, 본문, 바닥글 구분colspan, rowspan 속성으로 셀 확장 가능레이아웃 목적으로 사용 금지caption,

\-<audio>와 <video> 요소에 자막, 캡션, 설명 등의 시간별 텍스트 트랙을 제공하는 요소이다.미디어 재생과 동기화되는 시간 기반 텍스트 콘텐츠를 정의한다.WebVTT(.vtt) 형식의 파일을 사용하여 특정 시간대에 표시할 텍스트를 지정하고, 접근

<audio>, <video>, <picutre> 요소에 사용할 수 있는 다중 미디어 자원을 정의하는 요소이다.브라우저 호환성 문제를 해결하기 위해 여러 개의 미디어 파일 형식을 제공할 때 사용한다.브라우저가 지원하는 첫 번째 형식을 자동으로 선택하여

비디오를 웹 브라우저에서 직접 재생할 수 있게 해주는 요소이다.자동재생, 반복재생, 음소거, 사전로딩 등 지원비디오 로드 전 표시할 썸네일 이미지 설정 가능대부분의 브라우저에서 자동재생을 제한함width/height를 미리 설정하지 않으면 로딩 중 페이지 레이아웃이 변

오디오 콘텐츠를 웹 브라우저에서 직접 재생할 수 있게 해주는 요소이다.대부분의 브라우저에서 자동재생이 제한된다.청각 장애인을 위한 대체 텍스트 제공이 필요하다.JS로 커스텀 플레이어를 만들거나, 진행률 표시, 볼륨 조절 등의 고급 기능 구현이 가능하다.

문서의 본문과 관련은 있지만, 제거하거나 위치를 옮겨도 본문 흐름이 깨지지 않는 독립적인 콘텐츠 묶음을 나타내는 시맨틱 블록 요소이다.보통 이미지, 다이어그램, 코드, 인용, 표 등과 그 설명을 함께 감싼다.제목/설명/출처 등 메타 정보를 명시figure 안에서 첫 번