WEBDIR

웹코딩HTML 검색 결과

해당 글 43건

안드로이드용 크롬39 theme-color 속성 지원

롤리팝(Lollipop) 버전의 안드로이드 크롬 39부터 지원하는 새로운 메타 태그 속성에 대하여 알아봅니다. theme-color 속성 크롬 툴바의 색상을 변경할 수 있는 속성으로 안쪽에 메타 태그를 이용해 설정한다. 웹 사이트가 좀 더 응용프로그램 및 앱처럼 보이는 효과를 부여하게 된다. 언젠가는 앱처럼 모든 부분을 재설정 할 수 있는 기능이 추가되길 바라며...

웹코딩/HTML 9년 전

IE 조건부 주석 (Conditional Comment)

어딘가에 적어뒀다고 생각했는데 찾질 못해 새로 작성하는 글입니다. 아직도 크로스 브라우징을 위해 많이 사용되고 있습니다. 조건부 주석 소개 조건부 주석은 IE10 미만에서만 작동하는 조건문으로, 이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인등을 삽입하는 용도로 자주 사용된다. 조건부 주석 기본 문법 아래와 같이 기본형에 알맞은 조건을 기입하고 이를 만족할 경우, HTML 코드를 렌더링하게 된다. 구문 처음의 조건부 사용되는 기호는 : ! : 아니다(not) - 예) [if !ie] ie가 아니라면 lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면 lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같..

웹코딩/HTML 10년 전

input type="submit" vs button 비교

프로젝트를 진행하면서 로 폼의 내용을 전달하는 경우를 많이 접하게 되었습니다. 습관적으로 button 요소로 이를 대체하다가 문득 둘의 차이점이 궁금해서 검색을 해보았고 이와 관련된 내용을 정리합니다. button은 기능적으로 차이가 없을까? 폼 전송 기능을 하는 과 은 기능적으로 동일하다. 기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다. 즉 폼에서 이를 대체하기 위한 목적으로는 안성맞춤이다. button 속성값 브라우저별 기본 button 요소의 기능이 상이할 수 있으니 되도록 이를 명시하도록 하자. type="submit" : 폼의 전송 기능을 담당한다. type="reset" : 폼 작성 내용을 초기화하는데 사용한다. type="button" : 흔히 자..

웹코딩/HTML 10년 전

파비콘(Favicon)의 모든 것

파비콘에 대해 궁금했던 내용들을 정리했습니다. 파비콘(favicon) 소개 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘을 일컫는다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다. 최근에는 터치(touch) 아이콘, 타일(tile) 아이콘의 등장으로 더욱 혼란스러움이 가중되었으며, 각각의 기기에 최적화된 파비콘의 크기를 재설정하여 개발자들에게 어려움을 주고 있다. 파비콘(favicon) 기본 설정 1999년에 인터넷 익스플로러(Internet Explorer)에 처음 도입된 후로, 파비콘의 사양은 거의 변경되지 않은 채로 대부분 아이콘(ico) 파일의 형태로 도메인(domain)의 루트(root..

웹코딩/HTML 10년 전

MIME 타입

일반적인 MIME 값들에 대하여 알아봅니다. 애플리케이션 application/javascript - 자바스크립트 application/xhtml+xml - XHTML 오디오 audio/mpeg - MPEG, MP3 오디오 audio/x-ms-wma - Windows Media Audio 형식 audio/vnd.rn-realaudio - RealAudio 오디오 형식 이미지 image/gif - GIF 이미지 image/jpeg - JPEG 이미지 image/png - Portable Network Graphics 이미지 image/svg+xml - SVG 벡터 그래픽 메시지 message/http - 메시지 텍스트 text/css - 스타일 시트 text/csv - 콤마로 구분된 값들 text/html..

웹코딩/HTML 10년 전

글로벌 이벤트(Global Event) - WINDOWS, FORM, KEYBOARD, MOUSE, MEDIA

HTML 이벤트 핸들러 속성 이벤트를 발생시킬 수 있는 방법은 매우 다양하며, 아래와 같은 상황에서 발생한다. 사용자가 키보드의 키를 누르거나 마우스를 클릭하는 경우 페이지 로딩과 같이 자동적으로 실행되는 페이지 처리 타이머를 이용한 일정 간격으로 발생하는 이벤트 혹은 일정 시간이 지난 후 발생하는 이벤트 자바스크립트를 이용한 특정 동작에 반응하는 자바스크립트 이벤트 핸들러를 요소의 이벤트에 연결할 수 있다. 이벤트 핸들러는 HTML 태그의 특성에 대응한다.

웹코딩/HTML 10년 전

글로벌 속성(Global Attribute) #2 - CONTENTEDITABLE, CONTEXTMENU, DATA-*, DRAGGABLE, DROPZONE, HIDDEN, SPELLCHECK, TRANSLATE

글로벌 속성들 중에서 HTML5에서 추가된 속성들을 알아봅니다. CONTENTEDITABLE 속성 contenteditable 속성은 지정된 요소들의 콘텐츠를 사용자가 편집할 수 있다. 또 선택하고 편집할 수 있는 콘텐츠 영역에 대해 수정한 내용을 반영할 수 있다. 브라우저에서 수정해보세요! 이 속성을 지정하면 하위에 있는 모든 요소들에 영향을 미친다. DOM 속성에서는 contentEditable이라고 표현하며 isContentEditable로 해당요소가 편집가능한지 확인할 수 있다. 자바스크립트 사용해서document.designMode='on'이라고 지정을 해서 문서 전체가 편집 가능하게 만들수 있다. 편집한 이후에 사용자가 변경한 내용이 DOM에 적용돼 있으므로 편집한 영역의 innerHTML(d..

웹코딩/HTML 10년 전

글로벌 속성(Global Attribute) - ACCESSKEY, CLASS, DIR, ID, LANG, STYLE, TABINDEX, TITLE

어떤 요소들에도 적용할 수 있는 글로벌 속성에 대하여 알아봅니다. ACCESSKEY 속성 accesskey 속성은 바로가기 키(access key)를 지정한다. 컴퓨터의 기본 입력 장치는 마우스가 아니라 키보드이다. 따라서 문서에 있는 모든 요소는 키보드로 제어할 수 있어야 한다. Google accensskey 속성이 적용된 요소는 포커스를 받거나 실행이 이루어진다. input 요소에 적용되면 포커스를 받게 되고, a 요소에 적용되면 해당 키를 눌러 곧바로 목적지로 이동한다. 속성값은 키보드에 있는 알파벳이나 숫자 중에서 원하는 문자를 선택하여 지정한다. 하나의 요소에 두 개 이상의 문자를 정의할때는 띄어쓰기로 구분한다. 바로가기 키의 중복을 방지하기 위해 영국 정부의 바로가기 키 권고안을 참조한다. ..

웹코딩/HTML 10년 전

본문 : 상호작용(Interactive) 요소 - DETAILS, SUMMARY, MENU, COMMAND

사용자들과 상호작용하기 위해서 준비된 요소들에 대해 설명합니다. 인터랙티브 컨트롤 인터랙티브 컨트롤(interactive control)은 사용자가 입력한 데이터를 브라우저나 서버로 전송하기 위한 도구다. 과거에는 데이터 전송을 위해 폼이나 자바스크립트를 이용해야만 했다. 웹이 점점 애플리케이션화 되면서 웹 문서 어느 곳에서든 데이터 전송이 이루어질 필요가 있었고, 이를 위해 새롭게 details, summary, command, menu 요소가 제안되었다. DETAILS 요소 details 요소는 HTML5에 새롭게 추가된 요소로서 세부사항(DETAILS)을 표시한다. 이 요소를 사용하면 세부사항을 선택적으로 보여줄 수 있다. 사용자가 요약(summary)을 선택하면 숨겨져 있던 세부사항이 나타나도록 ..

웹코딩/HTML 10년 전

스크립트(Script) 요소 - SCRIPT, NOSCRIPT

흔히 자바스크립트를 삽입할때 스크립트 요소를 사용합니다. 이에 대해 알아보며 곁들여 noscript 사용법도 알아봅니다. SCRIPT 요소 script 요소는 클라이언트 사이드 스크립트와 같은 프로그래밍 코드를 HTML 문서 내에 직접 작성하거나 불러올때 사용한다. script 요소는 문서 내 어디든 놓일 수 있으며, 그 횟수도 제한이 없다. 문서의 머리에 script 요소를 두면 로딩과 함께 스크립트가 실행된다. 문서 전체에 걸쳐 기능을 제어해야 하거나 문서 본문을 처리하기 전에 스크립트가 실행될 필요가 있을때 문서의 머리에 둔다. 문서의 직전에 script 요소를 두게 되면 문서의 마지막에 스크립트가 실행된다. 이는 접속자들의 화면에 HTML의 구조와 CSS의 디자인을 먼저 적용하고 렌더링되기 때문에..

웹코딩/HTML 10년 전

본문 : 폼(Form) 요소 #3 - TEXTAREA, SELECT, OPTION, OPTGROUP, DATALIST, BUTTON, KEYGEN, METER, PROGRESS, OUTPUT

폼 요소를 소개하는 마지막 장입니다. HTML5에서 추가된 요소들도 포함되어 있지만 브라우저 지원사항이 제각각임에 유념하세요. TEXTAREA 요소 textarea 요소는 텍스트 영역(TEXT AREA)을 표시한다. 텍스트 필드가 한 줄짜리 입력 컨트롤이라면 텍스트 영역은 여러 줄짜리 입력 컨트롤이다. ... cols 속성 cols 속성은 세로 행에 입력될 수 있는 글자 수를 지정한다. 이것은 글자 수에 의해 텍스트 영역의 넓이를 지정하는 것인데 기본값은 20이다. 만약 20자를 넘게 되면 텍스트 영역이 커지는 것이 아니라 스크롤바가 생기면서 원래 저장되었던 텍스트 영역의 넓이는 그대로 유지된다. maxlength 속성 maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수를 지정한다. 이 속성..

웹코딩/HTML 10년 전

본문 : 폼(Form) 요소 #2 - LABEL, INPUT

폼에서 가장 많이 사용되는 label과 input 요소의 다양한 속성들에 대하여 알아봅니다. LABEL 요소 label 요소는 컨트롤 레이블(LABEL)을 표시한다. 레이블은 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말한다. 시각적으로만 그 용도가 표현되므로 브라우저가 레이블과 컨트롤 사이의 관계를 알 수 있도록 label 요소를 사용해야 한다. 이름: for 속성 for 속성은 레이블과 관련된 컨트롤을 지정한다. 컨트롤에 레이블을 제공하는 방법은 크게 암시적 방법과 명시적 방법으로 나뉜다. 암시적 방법 : 이 방법은 label 요소 내에 컨트롤을 둔다. 즉 label 요소 내에 있는 컨트롤은 굳이 밝히지 않아도 관련 있다고 보는 것이다. 명시적 방법 : 이 방법은 for 속성을 이용하여 ..

웹코딩/HTML 10년 전

본문 : 폼(Form) 요소 - FORM, FIELDSET, LEGEND

폼과 관련된 요소와 속성은 사용자들과 상호작용을하는 주요 수단입니다. 첫번째로 폼을 구성하는 기본 구조에 대하여 배워봅니다. FORM 요소 form 요소는 폼(FORM)의 범위를 표시한다. 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의된다. 상호작용이 양방향으로 이루어지면서 사용자로부터 데이터를 수집해야 하는 상황이 자주 발생하였고, 이를 위해 고안된 것이 바로 컨트롤이다. 그리고 이 컨트롤들이 모여 있는 곳이 바로 폼이다. ... 폼 요소는 블록 레벨 요소이므로 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다. actio..

웹코딩/HTML 10년 전

본문 : 테이블(Table) 요소 - TABLE, CAPTION, TR, TH, TD, COL, COLGROUP, THEAD, TFOOT, TBODY

테이블은 사실 사용을 자제하는 요소입니다. 테이블은 접근성에 문제가 있고 이를 구현하는데 브라우저는 많은 자원을 소모하기 때문입니다. TABLE 요소 table 요소는 테이블(TABLE) 범위를 표시한다. 중간고사 성적표 이름 학과 점수 등급 홍길동 경영학과 90 A 전지현 영문학과 80 B 테이블은 행과 열에 의해 만들어진 격자가 연속적으로 이어지는 구조로 주로 2차원 데이터를 그리드 형태로 표시할 때 사용한다. 테이블을 페이지 레이아웃을 제어하기 위한 용도로 사용하는 것을 금한다. 테이블의 의미적 마크업 수준이 높지 않기 때문에 되도록 자제한다. 테이블을 렌더링할때 브라우저가 겪어야 하는 수많은 시행착오를 고려한다면 성능적으로도 비추천된다. summary 속성 summary 속성은 테이블 요약을 지정..

웹코딩/HTML 10년 전