본문 바로가기

Local Oriented/HTML CSS JS

(105)
content="IE=edge,chrome=1" 메타 태그와 IE 그리고 Chrome 크롬과 IE 모두 설치된 PC 에서는 크롬의 렌더링 엔진을 차용해서 화면에 뿌려주지만, 아닌 경우에는 그냥 IE 모습 그대로.. ㅠ. 그래도, 호환성보기 옵션을 선택할 수 없게 된다는 것 자체에 의미를 두어야.. ^^. http://vouloir.tistory.com/839, Quirk Mode 쿼크모드로 웹화면이 열리는 경우..HTML5 형식으로 기술하면 열리지 않을듯..대체로는 doctype 이 없을 때 doctype 이 있어도 HTML 4.0.1 로 열 때..
세로로 반복되는 배경 이미지 위에 내용물을 입힐 때 의도하지 않은 빈 줄 없애는 방법 아래와 같은 경우 빈 줄이 생길 수 있습니다. ㅠ.ㅜIE 호환성보기에서는 빈 줄이 생기지 않지만, IE 기본모드와 비 IE 웹브라우저에서 발생.아마도, 반복되는 배경 이미지가 입혀져야 하는 height 를 자동으로 산출할 수 없기 때문에 발생하는 듯.. 세로로 반복되는 배경 이미지를 놓고..1. 그 안에 margin 을 사용할 때, margin 대신 padding 사용으로 해결2. 그 안에 float 를 사용할 때, clear:both 로 float 정지 ... ... 아래와 같이 margin 대신에 padding 을 사용해 보세요. ... ... ... ... 아래와 같이 float:left 가 들어간 동일 레벨 마지막에 clear:both 스타일을 먹여 보세요. ... ...
font-family font-family:돋움,Dotum,굴림,Gulim,sans-serif쉼표로 구분하여 표기한 순으로 웹브라우저가 폰트를 사용. - Apple Gothic 의 경우 iOS 에서 글자 폭에서 빈 여백이 많아서 다른 스마트기기와 차이가 나게 되므로 사용에 자제를..- iOS 에서는 돋움,Dotum 을 인식하지 못하는 모냥..- 명조 계열의 폰트는 세로선이 가로선에 비해서 얇기 때문에 웹에서는 시인성이 많이 떨어지므로 사용에 자제를..- 굴림 폰트는 일본인이 만들었다고.. ㅠ.ㅜ - Hack 핵을 사용하는 방법은.. 그냥 쓰지 마세요. 안 되면 안 되는 대로..머지않아 없어질 브라우저를 고민하지는 맙시다.. 물론, 레이아웃에 상당한 영향을 준다면야 어쩔 수 없이 핵을 사용하겠지만..http://sjpison...
CSS 와 jQuery, table 태그 등을 사용하여 목록 만들기 레이아웃이 아니라, 그리드 형태로 목록을 만들어야 하는 경우 table 태그를 사용하면 편합니다.아래 소개하는 목록은.. 목록의 맨 왼쪽과 맨 오른쪽 세로선이 없어요.가독성을 위해 짝수행에 배경색을 주고, 마우스 커서가 올려진 행에 배경색이 다르게 했어요.각 셀은 중앙정렬을 기본으로 하고 (아직 까지 모든 웹브라우저는 td 의 vertical-align 이 middle), 좌정렬과 우정렬은 클래스를 활용.셀에 입력된 글자가 많아질때 말줄임 표시를 할 수 있도록 세팅 .css 파일@charset "UTF-8" /* 혹시 문자셋 관계로 External CSS 를 사용하지 못한다면 사용 */table.tableList { table-layout:fixed; border-top:2px #EA0000 solid;..
console.log 와 alert 차이..? alert() 는 말 그대로 사용자에게 무언가 메시지를 알려주어 주의를 환기하는 것이고,console.log() 사용자에게 메시징 하는 것이 아니라, 개발자에게 메시징 하는 것.IE 8.x 이상에서 지원되고, IE 이외의 웹브라우저는 최신버전에서 지원된다.log() 뿐만 아니라 info(), warn(), error() 등의 함수도 가능.Object 안에 들어 있는 항목들도 세세하게 알려주는 웹브라우저와 가르쳐주지 않는 웹브라우저가 따로 있어요. http://deadfire.hihome.com/jscript/projscript003.html
태그 닫을때 유의할 점 1. 중첩 유의...... 이런식은 곤란, ...... 이렇게 사용..... 이런 것도 문제. .... 와 같이 사용. b 태그도 css 로 흡수 요망. 2. 나 로 닫으면 안 되고 반드시 로 닫아야 하는 것...... innerText 는 audio 태그를 지원하지 않는 브라우저에서 표시될 내용.. innerText 는 video 태그를 지원하지 않는 브라우저에서 표시될 내용 3. 나 로만 사용해야 하는 것 .. 이라고 하면 iOS 에선 일반적인 방식으로 작동하지만, Android 에선 뒤에 쓰인 이 무시됨. 4. , , .. 모두 가능한 것
웹브라우저 주소표시줄(창) 없애는 HTML/jQuery 코드 주소 표시줄 또는 주소 표시창을 없애는 방식이 애플 모바일 사파리에서 HTML meta 코드로 제공되는데,jQuery 를 사용하면 안드로이드 웹브라우저에서도 구현 가능합니다. 차이는 있습니다.. ^^.아래 1과 2 두가지 코드를 모두 사용하면 문제 해결입니다. ^^. 1. 애플 모바일 사파리안드로이드 기기에서는 아직까지 적용되지 않구요.. 앞으로도 아마 적용되지 않을 코드입니다. meta name 에 apple 이 들어가거든요..애플 OS 라도 모바일 기기의 iOS 에서는 구현되지만, 맥북이나 맥북 에어 등의 PC 에서는 적용되지 않구요. 2. jQuery$(window).load(function(){ setTimeout(scrollTo, 0,0,1);});이 코드도 body 에 구현되는 내용의 heig..
DOCTYPE 에 따른 html 언어 설정 KWCAG 에 보니까, 언어 설정이란 것이 있어서 이게 뭔가 고민했었네요..그냥, 한국어냐 일본어냐 뭐 이런거. DOCTYPE 에 EN 이라고 사용하니까 한글의 정체성 때문에 사용하는 것인지..?UTF-8 말고도, EUC-KR 도 나름 많이 사용. 요즘은 UTF-8 이 대세인데.. 한글 문자셋은 항상 문제. - HTML 4.01 인 경우... - XHTML 1.0 Transitional (Strict 보다는 Transitional 이 더 많겠네요..)... - XHTML 1.0 Strict... - HTML 5 인 경우는 아마도..... - DOCTYPE 이 없는 형태..? CSS 가 생각만큼 쉽게 적용되지 않아요.. ㅠㅜ... DOCTYPE 은 아래 URL 참조http://blog.naver.com/n..