본문 바로가기
반응형

Development/HTML24

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.. 2016. 9. 23.
웹표준!! 이제는 div 테이블은 이제 그만 쉬어야 할 때 - DIV테이블(html의 table 을 칭함)은 이제 목적 이상의 일을 할 필요가 사라졌습니다. 그저 단순한 “표” 를 만들기 위해서 제작된 테이블이 레이아웃, 즉 홈페이지 틀을 잡기위해서 쓰이고 있다니. 그리고 그것이 테이블의 맞는 용도처럼 교육되고 있다니 이제는 슬슬 멈추어야 할때라고 봅니다. 특히 XHTML이 개발되어 나오면서 계층형과 같은 구조로 레이아웃은 디자인되며 디자인이 우선이 아닌 그 안의 내용의 구성을 먼저 생각해야하는 개념 자체의 변화가 찾아오고 있습니다. 아니, 예전 HTML 생성되었을때의 원래의 개념으로 돌리려고 하고 있습니다. 얼마전 XHTML 2.0(이 포스팅이 쓰여지는 현재는 XHTML 1.1) 이 개발되면서 약간의 내용을 볼수 있었습니다. .. 2013. 5. 30.
웹표준가이드(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를 강제로 고정.. 2013. 5. 30.
웹표준가이드(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선언 앞에 다른 문자열 혹은 공.. 2013. 5. 30.
반응형