편리한 작업을 위한 CSS 단위별 폰트크기(px, em, %, pt)PixelsEMsPercentPoints6px0.375em37.5%5pt7px0.438em43.8%5pt8px0.5em50%6pt9px0.563em56.3%7pt10px0.625em62.5%8pt11px0.688em68.8%8pt12px0.75em75%9pt13px0.813em81.3%10pt14px0.875em87.5%11pt15px0.938em93.8%11pt16px1em100%12pt17px1.063em106.3%13pt18px1.125em112.5%14pt19px1.188em118.8%14pt20px1.25em125%15pt21px1.313em131.3%16pt22px1.375em137.5%17pt23px1.438em143.8%1..

1. display(표시)2. overflow(넘침)3. float(흐름)4. position(위치)5. width/height(크기)6. padding/margin(간격)7. border(테두리)8. background(배경)9. color/font(글꼴)10. animation11. 기타 1~6 레이아웃 | 7~8 테두리/배경 | 9 글꼴 | 10 동작 | 11 기타 출처[NHN 마크업 코딩 컨벤션]

***** 이클립스 사용팁 및 단축키 모음 ******* ===== 실행 ===== 1. Ctrl + F11 : 바로 전에 실행했던 클래스 실행 ===== 소스 네비게이션 ===== 1. Ctrl + 마우스커서(혹은 F3) : 클래스나 메소드 혹은 멤버를 상세하게 검색하고자 할때 2. Alt + ->, Alt + 입력하는 도중엔 언제라도 강제 호출 가능하다. 2. F2 : 컴파일 에러의 빨간줄에 커서를 갖져다가 이 키를 누르면 에러의 원인에 대한 힌트를 제공한다. 3. Ctrl + l : 원하는 소스 라인으로 이동 로컬 히스토리 기능을 이용하면 이전에 편집했던 내용으로 변환이 가능하다. 4. Ctrl + Shift + Space : 메소드의 가로안에 커서를 놓고 이 키를 누르면 파라미터 타입 힌트를 볼 ..

1. NHN방법(position/z-index를 이용) 로고일경우 span에 로고 이미지를 넣고 position을 줘서 글자 위에 그림이 오게끔 함. 좋은점:f12눌렀을때 이미지 사용 안함이라고 있는데그때 이미지는 사라져도 글자가 남음.(이거까지 고려해서 만들어야 되는 경우 있다죠..) 2번째 방법은 요약해서 쓸게요 text-index:-9999px 을 이용해서 텍스트를 들여쓰기 할 경우눈에 보이지 않지만 실제 모니터 바깥위치까지 들여쓰기가 되기 때문에 성능측면에서는 비효율 적이라고 합니다.(원래 캔버스가 1024면 -9999px을 들여쓴만큼 캔버스로 간주) 그리하여 쓸수있는 방법 text-indent:100%white-space:nowrap;overflow:hidden; 100%만큼 들여쓰기하고 now..

모던 웹을 위한 JavaScript + jQuery 입문 윤인성 저자한빛미디어 자바스크립트 완벽 가이드데이비드 플래너건 저자인사이트 자바스크립트 코딩 기법과 핵심 패턴스토얀 스테파노프 저자인사이트 자바스크립트 웹 애플리케이션알레스 맥카우 저자한빛미디어 자바스크립트 성능 최적화니콜라스 자카스 저자한빛미디어

디자인에 앞서 반드시 숙지해야 할 사항색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.전경색과 배경색은 충분한 대비를 가지고 있어야 한다.텍스트는 쉽게 읽을 수 있도록 충분한 크기도 제공되어야 한다.(KADO의 품질마크 인증 기준에 의하면 판독하기 쉬운 텍스트의 충분한 최소 크기는 12px로 정의하고 있음.이용에 시간제한이 있는 콘텐츠의 경우 경고 및 시간조절 기능을 제공하여야 한다.팝업창을 불필요하게 사용하지 않아야 한다.각 링크의 목표 위치를 명확하게 하여야 한다. 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 함. 도형의 모양을 달리 하여 색 뿐만 아니라 도형의 모양으로 구분이 가능하게 함. 명도 대비는 최소 4.51:1을 유지해야 함배경색이..

프로그램 개발에 앞서 반드시 숙지해야 할 사항.불필요 하거나 과도하게 많은 프레임을 사용하지 않아야 한다.키보드만으로 모든 콘텐츠를 제어할 수 있어야 한다.각 서식 제어 요소를 설명하는 레이블을 사용하여야 한다.키보드만으로도 온라인 서식 입력 및 서식 간 이동이 가능하여야 한다.스크립트, 애플릿, 플러그인 등 부가 어플리케이션에 의한 콘텐츠는 자체적인 접근성을 지니고 있어야 html페이지에 프로그램을 입히면서 올바른 태그를 사용하지 않는 경우최근 개발된 사이트는 대부분 XHTML 1.0 Transitional 형식 이지만 개발자 대부분은 그에 맞는 태그 지식이 없음. 최초 만들어진 html 문서와 함께 개발과 연관된 태그 가이드라인 제공 필요. - DTD가 XHTML형식일 때에는 닫기와 따옴표를 생략할 ..

/* html */headercontainer footer /* css */ html, body{width:100%height:100%}html{width:100%;height:100%}body{width:100%;height:100%} html과 body에 height:100%를 적용시킵니다. #header{width:100%;height:50px;position:relative;z-index:20;overflow:hidden;background-color:#fcc} 백그라운드컬러는 잘 먹혔는지 확인을 위한것일뿐입니다.높이값을 꼭 header에 정해주어야되며 position이 필수로 있어야지 container가 올라왔을때 z-index를 이용해서 container위에 올라올수있습니다.(z-index의 ..