티스토리

doctype

검색하기

블로그 홈

doctype

doctype.tistory.com/m

Doworld - a.k.a 여리

구독자: 0

방명록 방문하기

주요 글 목록

Full width (100%) inputs & textareas with padding Full width (100%) inputs & textareas with padding input, textarea {width: 100%; padding: 0.5em; box-sizing: border-box; /* Opera/IE 8+ */ -webkit-box-sizing: border-box; /* Safari, Chrome et al */ -moz-box-sizing: border-box; /* Firefox */ } 공감수 0 댓글수 0 2015. 10. 16.
 사용. : IE9 버전만 표시 : IE9 이상 버전에 표시 : IE9 초과 버전에 표시 : IE9 이하 버전에 표시 : IE9 미만 버전에 표시 버전별로 javascript 또는 css 를 적용할 때 유용함. 공감수 0 댓글수 0 2014. 2. 27.
웹페이지 프린트시 background(color/image) 가 인쇄되지 않을때 웹페이지를 프린트 하려고 할때에 css의 background (color / image) 는 인쇄가 되지 않는다. 브라우저에서 설정하는 방법과 css 코드로 적용하는 방법이 있다. 브라우저에서 설정방법 IE FF Chrome 코드상에서 해결하겠다면 링크 참조. (이건 다음에 다시 봐야겠음) http://naradesign.net/wp/2007/12/19/133/ 검색하다보니 #id : before { content: url{"경로명/파일명"; } 과 같은 방법도 있긴하던데.. 파이어폭스와 크롬에서는 잘 되는듯 싶지만.. IE에서 제대로 안나오는듯. 공감수 0 댓글수 0 2013. 5. 30.
단계적 향상 단계적 향상이란 성능이 가장 떨어지는 브라우저를 기준으로 사이트를 설계하고 모든 브라우저에서 같은 모습으로 사이트가 보이게 하는 것이 아니라, 모든 사용자에게 반드시 제공해야 할 정보와 기능은 기본으로 모두 제공하고 좋은 성능을 가진 브라우저를 사용하는 사용자에게는 좀 더 멋진 화면의 추가적인 기능을 제공한다는 개념입니다. 단계적 향상을 적용하면 실제로 개발 생산성이 향상됩니다. 예를 들어, 테두리에 쉐도우 이펙트가 제대로 보이게 하고, 표준안을 따르지 않는 브라우저에서는 쉐도우 이펙트를 포기하는 것입니다. (box-shadow) 결과적으로 성능이 떨어지거나 오래된 버전의 브라우저 사용자는 어떤 기능이 생략되었는지조차 모를 것입니다. 단계적 향상의 가장 큰 걸림돌은 웹사이트가 모든 브라우저에서 똑같이 보.. 공감수 0 댓글수 0 2013. 5. 24.
Javascript 코드를 왜 페이지 하단(아래)쪽에 놓을까? Javascript 를 요즘엔 태그가 닫히기 바로 전에 선언하는 것이 추세(?)임.. 그간 나와있는 자바스크립트 책들을 보면 안에 선언하라고 나와있는데 왜 태그가 닫히기 바로 전. 페이지의 제일 하단에 선언하는게 추세가 되었나. 자바스크립트가 하는 일이 많아지면서 덩치가 좀 커지고 하다보니 에 선언해놓은 자바스크립트 때문에 페이지가 열리는 속도가 느려지는 현상이 생긴다. 성질 급한 사람들.. 하얀 화면으로 조금만 버벅대는 경향이 있어도 걍 떠나버리고.. 일단 페이지라도 열려있으면 뭐 유입되기도 전에 떠나는 사람은 줄어들 것 아닌가. 자바스크립트를 하단으로 내리면 일단 페이지는 열린다. 그 후에 js 가 할 일들을 하게 되겠지.. 이걸 뭐라고 검색해봐야 하나 싶었는데 javascript lazy loadi.. 공감수 1 댓글수 0 2013. 5. 15.
웹폰트 1. 웹폰트란? 웹페이지를 보는 사람의 컴퓨터에 해당 글꼴이 설치되어 있지 않아도, 임시로 글꼴을 받아 웹페이지에서 볼 수 있도록 하는 폰트의 한 종류. 2. 웹폰트는 왜 필요한가? 기본으로 제공하는 폰트 이외에 자신이 평소에 즐겨쓰는 폰트나 웹사이트에 어울리는 폰트를 원할 경우 사용. 윈도우 폰트는 .ttf 포멧 형식이고, 웹폰트는 .eot 형식으로 다르기에 윈도우 폰트를 웹에서 직접 사용하는 것은 안되며, .eot 형식으로 변환을 해야 웹에서 사용 가능. 3. 웹폰트의 종류 기본적으로 시스템에서 사용중인 TrueType과 OpenType은 생략. 우리가 흔히 적용하는 폰트는 .eot, woff, svg 로 나뉨. - eot (Embedded Open Type) 익스플로러가 지원하는 폰트로 버전 8 이.. 공감수 0 댓글수 0 2013. 4. 22.
텍스트 줄넘침 현상. html 에서 div에 width값이 지정이 되어있더라도 텍스트에 띄어쓰기가 없으면 줄넘침 현상이 발생한다. 이렇게 나오는 녀석을 해결하려면..... 해결방법 1. #box {width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 말줄임...으로 해결..;; 해결방법 2. #box {width:100px;overflow:hidden;word-wrap:break-word;} 자동 줄바꿈으로 해결..;; 익스 7, 8, 9, 파폭, 크롬, 사파리, 오페라 확인;; ----------------------------------------------------2015.07.07 내용 추가.----------------------------.. 공감수 4 댓글수 2 2013. 4. 17.
GSAP JS – Professional-Grade JavaScript Animation 플래시 액션스크립트에서 많이 사용되었던 TweenMax 와 TimelineMax (난 타임라인맥스는 잘 안써봤지만-_-) 자바스크립트 버전으로 다시 만났다. http://www.greensock.com/gsap-js/ 지금 대세인 jQuery.. 의 .animate() 메서드로도 대략 모션을 주기엔 무리가 없으나 트윈맥스는 아무래도 모션을 잡기에 특화되어있다. 타임라인맥스와 함께한다면 최고이지 않을까 싶다. jQuery와 함께 써도 상관없고.. 딱히 충돌?) 날 일은 없을듯.. 크로스 브라우징의 걱정이 좀 되는데.. 익스 6은 요새 거의 버리는 추세고.. 익스 7에서 제대로 안되는 듯 ㅜㅜ 익스 8부터는 되는거 같다.. (샘플들만 확인해본 바로는-_-) http://www.greensock.com/jum.. 공감수 0 댓글수 0 2013. 4. 2.
float을 clear하는 4가지 방법 http://naradesign.net/wp/2008/05/27/144 선스크랩 후정독.. -_-a 공감수 0 댓글수 0 2013. 3. 14.
CSS 선택자 Type 선택자 xhtml 요소명을 선택자로 사용하는 것을 “Type 선택자” 또는 “요소 선택자”, “태그 선택자” 라고 함. 요소명 { 속성 : 값; } // ex) p { color:#ff0000; } 전체 선택자 선택자에 * 기호를 사용하면 모든 요소에 스타일을 지정할 수 있음. 이를 “전체 선택자” 또는 “유니버셜(universal) 선택자” 라고 함. * { margin:0; padding:0; } class 선택자와 id 선택자 xhtml 요소에 class나 id 속성을 부여한 경우에 해당 class나 id 이름으로 접근하여 선택할 수 있음. class 이름은 여러 번 사용할 수 있으니 한꺼번에 스타일 지정할 때 사용하면 편함. id 이름은 한번만 사용할 수 있기 때문에 특정 요소에 접근하여.. 공감수 0 댓글수 1 2013. 2. 5.
자유롭고 창의적인 디자인 기법 (CSS) CSS란? Cascading Style Sheet 의 약자. 마크업 요소에 스타일을 적용하기 위해 W3C에서 고안한 언어. 테이블 방식의 레이아웃 때문에 마크업 코드가 복잡해지는 문제를 해결할 수 있고, 표현과 관련된 요소(font, b, i 등)의 사용을 제한하면서 CSS 속성으로 대체할 수 있음. CSS 방식의 디자인은 웹 사이트의 성능 향상에 기여. 웹 접근성이나 웹 사용성을 높이는데도 효과적. CSS 서식 1. Rule set CSS 서식은 ‘선택자’와 ‘선언부’로 나눌 수 있음. 선택자는 스타일을 적용할 대상을 의미. 선언부는 선택자에 적용할 디자인 관련 속성과 값을 의미. selector { property : value; } // 선택자 { 속성 : 값; } 2. CSS 적용하기 - Exte.. 공감수 0 댓글수 0 2013. 2. 5.
XHTML 요소 - 03 (폼, 인라인 프레임, 개체삽입, 스타일, 스크립트, 그룹화 요소) 폼 관련 요소 1. 폼이란? 웹 문서가 서로 상호작용을 할 수 있도록 함. (라디오 버튼, 체크박스, 콤보박스, 버튼 등등) 2. 폼 요소 폼의 범위를 정의할 때 form 요소를 사용. 속성으로는 폼의 내용을 처리하는 서버의 URI를 지정하기 위한 action과 폼의 내용을 처리하는 방법인 method 가 있음. 폼의 내용 * GET 과 POST 의 전송방식의 차이점 GET : 속도가 빠르지만 정보가 노출되어 보안에 취약하고 정보의 크기가 1024바이트로 제한적. POST : URL 주소에 정보노출이 되지 않으니 보안성이 좋고 정보의 크기 제한이 없지만 GET방식보다 느리다. 3. 폼 요소 그룹화 및 제목 , 여러 개의 폼 요소를 그룹화하여 좀 더 구조적으로 만들려면 fieldset 요소를 사용. fie.. 공감수 0 댓글수 2 2013. 2. 1.
XHTML 요소 - 02 (링크, 이미지, 목록, 텍스트, 테이블 관련 요소) 링크와 이미지 1. 하이퍼링크 a 요소는 텍스트나 이미지 컨텐츠에 링크를 설정할 때 사용. href, target, title 속성 등을 사용할 수 있음. Transitional DTD 일 경우에만 target 속성을 지정 가능. 텍스트 또는 이미지 2. 이미지 웹 문서에 텍스트가 아닌 이미지 개체를 삽입할 때에 빈 요소인 요소를 이용. src 속성과 alt 속성은 필수. 이미지의 크기 정보를 지정할 때에는 width / height 속성을 사용. alt 속성은 이미지가 보이지 않는 환경에서 대체 텍스트를 제공하기 위한 목적으로 사용. 3. 이미지 맵 , 이미지 맵은 이미지의 여러 곳에 링크를 설정할 때 사용할 수 있음. * 클라이언트 사이드 이미지 맵 (client-side image map) 사용자가.. 공감수 0 댓글수 2 2013. 2. 1.
XHTML 요소 - 01 (문서정보, 제목, 문단 관련 요소) 문서 정보 및 문서 제목 1. 문서 정보와 문자 코드 세트 (meta) 웹 브라우저에서 한글이나 영어와 같은 문자를 처리하기 위해 사용할 문자 코드 세트(인코딩) 선언 값과 저작자, 키워드, 요약문, 만기일 등에 관한 문서 정보의 경우 빈 요소인 meta 요소를 이용하여 지정할 수 있음. * 문자 코드 세트 지정하기 웹 페이지를 제작할 때 사용한 문자가 깨지지 않고 인코딩 되도록 하려면 meta 요소를 이용 다국어 인코딩의 경우 utf-8 을 지정할 수 있고 한글은 euc-kr 을 지정 요즘은 다들 utf-8 로 지정하는 듯 * 키워드 지정하기 meta 요소를 이용하면 검색 키워드를 지정할 수 있음 검색 사이트에서 상위에 노출되는 효과를 얻을 수 있음 공감수 0 댓글수 2 2013. 1. 31.
유용한 DOM 프로퍼티 1. 노드 프로퍼티 - nodeName nodeName 프로퍼티는 특정 노드의 이름을 포함한 문자열을 반환한다. name = node.nodeName 특정 노드가 요소 노드이면 nodeName 프로퍼티는 그 요소의 이름을 반환한다. 이 경우 tagName 프로퍼티와 같은 값을 가진다. 텍스트 노드이면 nodeName 프로퍼티는 “#text” 라는 문자열을 반환한다. 읽기 전용이고 값을 바꾸거나 변경할 수 없다. - nodeType nodeType 프로퍼티는 특정 노드의 형식을 지정하는 정수 값을 반환한다. integer = node.nodeType 경우에 따라 열 두가지의 값이 반환된다. 각 숫자는 nodeType에 해당하는 노드의 종류를 알려준다. ELEMENT_NODE ATTRIBUTE_NODE TE.. 공감수 0 댓글수 0 2013. 1. 30.
유용한 DOM 메소드 1. 노드 만들기 - createElement createElement 메소드는 특정 태그 내에 포함된 새로운 요소 노드를 만들 때 사용. 새로 만들어진 요소를 반환. reference = document.createElement( element ) 이 메소드는 만들려고 하는 태그 명을 인수로 가진다. var para = document.createElement( “p” ); 일단 createElement로 만들어진 요소는 바로 문서 내에 추가할 수 있는 것이 아니다. 이것을 실제로 추가하려면 appendChild 나 insertBefore 메소드 혹은 replaceChild 등을 사용한다. var para = document.createElement( “p” ); document.body.appendC.. 공감수 0 댓글수 0 2013. 1. 30.
구조를 위한 XHTML XHTML의 서식 xhtml은 html을 xml로 재정의한 언어이기 때문에 요소와 속성에는 차이가 없다. 하지만 xml 방식의 엄격한 규칙을 적용하기 때문에 문법상 html과 xhtml은 몇가지 차이점이 있다. * 요소 사용 시 종료 태그 생략 불가능 * 요소명과 속성명에 소문자 사용 * 빈 요소 사용시 형식으로 기술 * 속성에 속성값 생략 불가능 … … * 잘못된 중첩 사용 불가능 … // 순서 바뀜 … // 올바른 순서 * 모든 속성값에 인용부호 사용 * , &을 , &amp로 변환하여 사용 웹 표준 & 웹 접근성 웹 표준 & 웹 접근성 * 주석을 바르게 사용하고 그 안에 --(더블대시) 사용불가 XHTML 구성 요소 * 태그 태그는 “” 로 묶어서 표현하는 명령어. 기본 형식은 ~ 이고 일부.. 공감수 0 댓글수 3 2013. 1. 29.
속성 다루기. 1. object.getAttribute(attribute) String - 속성값의 이름을 검색함. 이라는 녀석이 있다면 요소의 title 속성을 얻기 위해서는 getElementByTagName과 함께 사용하여야 한다. var paras = document.getElementByTagName(“p”); var title_txt = paras.getAttribute(“title”); alert(title_txt); 해본다면 Hello World 가 출력되는걸 확인할 수 있다. 2. object.setAttribute(attribute, value) Attr – 새로운 속성값을 추가함. 이 메서드는 특정 속성 노드의 값을 바꿀 수 있다. attribute는 바꾸고 싶은 속성이고 value는 바꿀 값을 넣.. 공감수 0 댓글수 0 2011. 8. 10.
노드 찾기. 1. document.getElementById(String elementId) NodeList – ID가 element에 의해 주어지는 요소를 반환함. document.getElementById(“myImg”); 이런식으로 찾아서 사용할 수 있다. Id는 다른 Id와 이름이 겹치면 안된다. 2. document.getElementByTagName(String tagname) NodeList – 주어진 이름을 갖는 모든 요소들의 NodeList를 그것들이 도큐먼트 트리 안에서 표현되는 순서로 반환함. document.getElementByTagName(“img”); 이런 식으로 사용된다. 태그이름은 여러번 사용될 수 있으므로 배열에 저장된다. document.getElementByTagName(“img”.. 공감수 0 댓글수 0 2011. 8. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.