본문 바로가기

Development/HTML

A4 용지 출력 웹페이지에서 프린트 출력할때 유용합니다. HTML A4 용지 세로 1 이어서 A4 용지 세로 2 이어서 A4 용지 세로 1 분리 A4 용지 세로 2 분리 A4 용지 가로 A5 용지 세로 A5 용지 가로 A3 용지 세로 A3 용지 가로 CSS body { background: rgb(204,204,204); } page { background: white; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); } page[size="A4"] { width: 21cm; height: 29.7cm; } page[size="A4"][layout="portrait"] { width: 29.7cm; he..
웹표준!! 이제는 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값을 정확하게 입력했는데 입력한데로 표현되지 않을 수 있다.이때문에 을 이용해서 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 쌍으로 이루어진 리스트 각 브라우저별 특징 , 좌측 기본마진 발생, 브라우저별 블릿 다름 (background-image로 해결) 출력사항 없음 단 에서 기본마진 있음 list item1 list item2 list item3 아무런 블릿 스타일도 적용되지 않은 세줄의 텍스트가 나옴여기에 아래 스타일을 적용시키면 블릿을 가진 리스트가 생긴다. li {background: url(bullet.gif) no-rpea..
웹표준가이드(8)/css 레이아웃기초-2 출처 : http://blog.naver.com/maglitt/60053121781컬럼형 레이아웃 - 블러그형 / float가 적합 마크업(markup) Site Top Area Site Left Area Site MainContent Side Bar Site Bottom Area 컬럼전체를 고절할 수 있는 블럭 하나를 만든다. ⇒ (#wrapper)side bar를 하나 더 추가한다.렌더링시 기본 레이아웃과 커다란 차이 없음 (웹표준가이드(8)/css 레이아웃기초-2 참고) CSS body {margin: 0;padding: 0;}브라우저 마다 body의 기본값을 통일시켜준다.hr {display: none;}각부분을 구분지어 주는 역활을 하므로디자인상 화면에 나타나지 않도록 display:none; ..
웹표준가이드(7)/css 레이아웃기초-1 출처 : http://blog.naver.com/maglitt/60053112481기본레이아웃 마크업(markup) 1.시작 단계에서 고려할점 디자인, css에 우선하여 페이지의 구성요소, 그룹에 적합하게 분리하여 적합한 태그 id, span으로 마크업한다. Site Top Area Site Left Area Main Content Area Site Bottom Area CSS body {margin: 0;padding: 0;}브라우저 마다 다른 body값의 통일 hr {display: noen;}각부분을 구분지어 주는 역활을 하므로디자인상 화면에 나타나지 않도록 display:none; 시켜준다.#head {height: 170px;background: #eee;}상단 로고, 메뉴 등은 고정된 높이를 ..
웹표준가이드(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하지 ..