본문 바로가기

Development/HTML

A4 용지 출력 웹페이지에서 프린트 출력할때 유용합니다. HTML

A4 용지 세로 1 이어서

A4 용지 세로 2 이어서


A4 용지 세로 1 분리

A4 용지 세로 2 분리

A4 용지 가로

A5 용지 세로

웹표준!! 이제는 div 테이블은 이제 그만 쉬어야 할 때 - DIV테이블(html의 table 을 칭함)은 이제 목적 이상의 일을 할 필요가 사라졌습니다. 그저 단순한 “표” 를 만들기 위해서 제작된 테이블이 레이아웃, 즉 홈페이지 틀을 잡기위해서 쓰이고 있다니. 그리고 그것이 테이블의 맞는 용도처럼 교육되고 있다니 이제는 슬슬 멈추어야 할때라고 봅니다. 특히 XHTML이 개발되어 나오면서 계층형과 같은 구조로 레이아웃은 디자인되며 디자인이 우선이 아닌 그 안의 내용의 구성을 먼저 생각해야하는 개념 자체의 변화가 찾아오고 있습니다. 아니, 예전 HTML 생성되었을때의 원래의 개념으로 돌리려고 하고 있습니다. 얼마전 XHTML 2.0(이 포스팅이 쓰여지는 현재는 XHTML 1.1) 이 개발되면서 약간의 내용을 볼수 있었습니다. ..
웹표준가이드(11)/테이블(Table) table의 구성 , , , , 등을 적합하게 사용한 작업은 접근성을 높이며효율적인 css 참조도 쉬워진다. 1. cellpadding, cellspacing / border-collapse, padding 내용 예전 태그추천 csscellpadding컨텐츠와 cell경계 사이의 영역 cellpadding="0"border-collapse: collapse; cellspacingcell 간의 간격 cellspacing="0" table th, table td {padding: 0;} bordercell 경계선 border="0" 생략무방 2. 테이블 고정(table-layout: fixed) width값을 정확하게 입력했는데 입력한데로 표현되지 않을 수..
웹표준가이드(10)/박스모델(Box Model) 박스모델 (Box Model) <박스모델> 박스의 구성content + padding + border + margin + offset로 구성 비주얼1. 화면에서 보이는 부분 : content + padding + border 2. 화면에서 보이지 않는 부분 : margin + offset width값의 범위1. 잘못된 width 값 : content + padding + border ⇒ 화면에 커지게 된다.2. 올바른 width 값 : padding, border를 제외한 순수한 content 영역 1. IE DOCTYPE Switching 숙지사항 DOCTYPE선언에 따라 호환 혹은 표준으로 랜더링 된다.호환랜더링이 되는3가지 경우비표준DTD선언 혹은 선언하지 않을 경우,DOCTYPE선언 앞에 다른 문..
웹표준가이드(9)/List (ul, ol, dl, dt, dd) 출처 : http://blog.naver.com/maglitt/60053124686목록 (List) 세가지 목록 ul(unordered list)순서가 없는 리스트 ol(ordered list)순서가 있는 리스트 dl(definition list)dt = term , dd = definition 쌍으로 이루어진 리스트 각 브라우저별 특징
    ,
웹표준가이드(8)/css 레이아웃기초-2 출처 : http://blog.naver.com/maglitt/60053121781컬럼형 레이아웃 - 블러그형 / float가 적합 마크업(markup)

Site Left Area

Site MainContent


컬럼전체를 고절할 수 있는 블럭 하나를 만든다. ⇒ (#wrapper)side bar를 하나 더 추가한다.렌더링시 기본 레이아웃과 커다란 차이 ..
웹표준가이드(7)/css 레이아웃기초-1 출처 : http://blog.naver.com/maglitt/60053112481기본레이아웃 마크업(markup) 1.시작 단계에서 고려할점 디자인, css에 우선하여 페이지의 구성요소, 그룹에 적합하게 분리하여 적합한 태그 id, span으로 마크업한다.Simple CSS Layout
웹표준가이드(6)/css 레이아웃기초 출처 : http://blog.naver.com/maglitt/60053037339CSS 레이아웃이란? 1.그리드가 아닌 구성요소의 집합 웹페이지를 그리드로 바라보고 접근한 것 (좌측)과 구성요소로 구분하여 접근한 측면(우측) 2.레이아웃에 사용되는 두가지 속성 position 과 float div 속성의 비교 레이아웃속성positon float 기본속성static, absoulte, relativeleft, right, none 속성내용static : 기본값absolute : 화면값에 영향을 주지 않고 위치지정 가능(layer라고 부른다.)relative : static과 비슷, offset 지정가능, 하위엘리먼트의 기준left : 엘리먼트 왼쪽배치right : 오른족 배치none : float하지 않..