HTML <input> 시간 관련 타입 완전 정복: time, month, week, date, datetime-local
·
Programing/HTML
웹 폼에서 날짜와 시간을 입력받는 경우는 매우 많습니다. HTML5부터는 사용자 경험과 데이터 일관성을 높이기 위해 다양한 날짜/시간 입력 타입이 추가되었으며, 이들 타입은 기본적인 폼 처리뿐 아니라 예약 시스템, 달력 UI, 시간 기록 등 여러 실무 영역에서 핵심 기능으로 활용됩니다.이 글은 의 날짜/시간 관련 타입에 대해 기본 구조 → 고급 예제 → 자바스크립트 활용 → 심화 응용 순으로 설명하여 초보자도 글을 다 읽고 나면 준전문가 수준에 이를 수 있도록 구성했습니다.🕒 1. — 시:분 입력 전용✅ 기본 개념시간(시:분)을 입력받기 위한 입력 필드초 단위는 입력할 수 없음 (HH:mm 포맷)기본적으로 사용자의 로컬 시간대를 따름✅ 기본 사용 예예약 시간:💡 고급 사용 예 1: 최소/최대 시간 ..
🔤 HTML 특수 문자(Entity) 정리 가이드
·
Programing/HTML
HTML에서 , >, &, 공백과 같은 문자는 브라우저에서 특별한 의미를 가지기 때문에, 이를 문자 그대로 출력하려면 HTML 엔터티(Entity) 형식으로 변환해야 합니다. 이 글에서는 HTML에서 사용하는 모든 주요 특수 문자와 그 사용처를 정리하고, 표 형태로 설명 + 사용 예제 코드도 함께 제공합니다.✅ HTML 특수 문자란?HTML에서 문법 요소와 겹치는 기호나 특수한 의미를 가진 문자를 표현할 때 사용하는 코드입니다. 보통 &문자이름; 또는 &#코드; 형태로 사용됩니다.📋 특수 문자 종류 및 설명표현 문자숫자 표현문자 표현설명사용 예시 및 상황&nbsp;&#160;Non-breaking space줄바꿈이나 공백 제거를 방지하는 빈칸문단 정렬, 강제 공백 등&lt;&#60;less than: ..
🌐 메타 태그(meta tag) 종류와 사용법 정리
·
Programing/HTML
HTML 문서의 안에 사용되는 메타 태그(meta tag)는 페이지에 대한 정보를 브라우저나 검색 엔진 등 외부 시스템에 전달하는 역할을 합니다. 이번 글에서는 자주 사용되는 메타 태그들의 종류와 의미, 그리고 적절한 사용법을 예시와 함께 정리합니다.✅ 메타 태그 기본 문법📌 대표적인 메타 태그 종류와 설명1. 문서 인코딩 설정HTML 문서의 문자 인코딩 방식을 설정대부분 UTF-8을 사용하며, 이는 다국어 지원을 의미2. 문서 정보 제공author: 페이지 제작자description: 페이지 요약. 검색엔진에서 요약 문구로 사용됨keywords: 관련 키워드 (요즘은 SEO 영향 미미함)3. 검색 엔진 설정검색 엔진이 이 페이지를 색인(index)하고 링크를 따라가도록 허용noindex, nofol..
HTML5 Video - DOM 속성 및 이벤트.
·
Programing/HTML
모바일에서 동영상 재생 서비스 부분을 만들고 있는데 쉽지가 않네요 ^^;; 여러가지 걸리는 문제점도 있고, 플랫폼에 따라 지원여부도 틀려지고 ㅠ 아래는 프로젝트 진행도중 자료를 찾다 유용하게 사용한 부분들을 정리하였습니다. 더 많은 정보는 http://dev.opera.com/articles/view/introduction-html5-video/ 여기를 통해 확인 할 수 있습니다. (*) 으로 표시 된 속성은 파폭에서 지원 하지 않습니다. Display attributes src (string): 소스파일 (경로 포함) poster (URL): 동영상에 표시될 이미지. controls (boolean): 브라우저에 의한 제어? videoWidth, videoHeight (integer): 동영상의 가로,..
HTML5 mobile meta 태그
·
Programing/HTML
web app으로 선언하여 아이폰에서 홈화면 추가시 상단 URL 주소와 하단의 UI 부분을 숨겨준다. user-scalable no 사용자의 확대/축소 기능 불가 initial-scale number (1.0) 1.0은 100%와 같은 말 (1.2 = 120%) maximum-scale number (2.0) 최대 확대율 minimum-scale number (0.5) 최소 축소율 width=device 디바이스 크기에 일치시킴 window.addEventListener('load', function(){ setTimeout(scrollTo,0,0,1) },false); URL 주소를 가려준다.
table border
·
Programing/HTML
table border 의 값 Value Description Version JavaScript syntax collapse 각 셀을 공유 CSS2 object.style.borderCollapse="collapse" separate 각 셀을 분리 CSS2 object.style.borderCollapse="separate" 기본 셀간의 기본 값은 separate 입니다. 예제 collapse separate (table 태그의 기본 속성) 추가 FF에서 collapse를 다르게 렌더링 하기 때문에 상단의 2px 정도 띄어져 버립니다. 원하는 결과를 얻기 위해서 table에 display: block;을 주는 걸로 해결합니다.
html target 옵션
·
Programing/HTML
_blank : 새창 _self : 현재창 _parent : 부모창 메모의 중요성-_- parent가 생각이 안나서 계속 검색한다 ㅠ_ㅠ
페이지 로딩중(로딩바) 표시
·
Programing/HTML
로딩중 표시 하기 로딩중 본문 페이지 로딩중 이미지 표시하기. 위 방식을 이용하면 로딩바도 가능 하지 않을까;
메모
·
Programing/HTML
... ... .. =================== ======= 반복문을 돌렸을때 온클릭이벤트를 사용하는 예제 그리고 타겟을 아이프레임으로 잡고 이벤트를 발생 했을때 본 페이지에서 값의 변화 되게 하기위핸 스크립트
absmiddle
·
Programing/HTML
style="vertical-align:middle" 이미지와 버튼을 나란히 정렬시 가끔 위아래 여백이 안맞아 서로 어긋 날때가 있다. 이때 이미지 & 버튼에 해당 코드를 추가해보자.