본문 바로가기

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.
웹표준가이드(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.. 2013. 5. 29.
웹표준가이드(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; .. 2013. 5. 29.
웹표준가이드(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;}상단 로고, 메뉴 등은 고정된 높이를 .. 2013. 5. 29.
웹표준가이드(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하지 .. 2013. 5. 29.
웹표준가이드(5) / css적용 체크포인트 4가지 출처 : http://blog.naver.com/maglitt/60053025373 01/CSS적용 체크포인트 4가지 HTML, XHTML, XML 등의 markup 문법 확인 감사(DTD선언에 기초한 문법 확인)⇒ http://validator.w3.orgXHTML 의미와 구조적 구성 각각의 문서 내용에 적합하게 사용해야 한다. ~문서내 중요도의 단계에 ,,, 각 엘리먼트들이 의미에 맞게 사용되도록 한다. ,,id,class 문서작성 후 의미에 따라 구분해준다. 표준문법사용 주석문처리css주석처리 /*comment*/html, 다른 언어//한줄주석처리 단위 표기0을 제외한 모든 값에 단위표기 구문이 끝날때는 세미콜론 표시(;) 색상 표기 #rrggbb형식 - color: #ff0000; (color: .. 2013. 5. 29.
웹표준가이드(4) / css선택자와 선언종류 출처 : http://blog.naver.com/maglitt/60052974527 css제대로 사용하기 01 / html과 css의 관계 html : 컨텐츠의 내용과 구조 표시컨텐츠가 문단인지, 인용문인지, 리스트형태인지에 따라 적합한 엘리먼트로 표기컨텐츠가 문서내에서 가지는 의미에 따라 와 적절한 id, class 속성표기(나타내고자 하는 컨텐츠를 의미에 맞게 기술하여 웹페이지로의 접근성을 높이는 방법으로 markup을 만드는 것이 웹표준의 목적)웹표준의 목적 : 컨텐츠의 의미에 맞게 기술하여 웹페이지로의 접근성을 높이는 방법으로 markup하는 것. css : 문서의 내용과 표현을 분리하는것문서의 내용은 html로 작성하고 표현은 css로!! 02 . css의 일반선택자일반선택자(selector) .. 2013. 5. 29.
웹표준가이드(3) / 올바른 마크업을 위한 준수사항 출처 : http://blog.naver.com/maglitt/60052954929 01 / 무분별한 table의 사용금지 02 / 잘못된 위치, 태그, 스크립트 사용form태그 tr태그 사이에 넣지 않기⇒ 오류의 원인 (form태그의 공배해결을 위해)⇒ 해결책 form {margin:0;} form submit 자바스크립트로 하지 않기⇒ 잘못된 표현예 ⇒ 해결책 혹은 제목 내용 작성자 03 / 올바른 그룹요소의 사용 (div, span)div등 일부 태그를 table 대용으로 사용하지 않도록 한다. (의미에 맞는 태그사용)block / inline 예block 요소 ⇒ , , , , , , , inline 요소 ⇒ , , , , 04 / 표제의 사용(Heading)~ 문서내 가장 중요한 제목을 에서 부.. 2013. 5. 29.
웹표준가이드(2) / 일반문법 출처 : http://blog.naver.com/maglitt/60052938568 정확한 문서 구조 준수 문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정 해야 한다. 표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는 head, title 및 frameset 구조 요소가 포함되어야 한다 모든 요소의 완벽한 중첩모든 요소들이 완벽하게 내포(nest) 되어야 한다. This is a bad example. This is a good example. 모든 속성 값은 인용 부호“ 또는 ‘로 묶는다. 틀린 경우 맞는 경우 모든 요소와 속성 소문자표기 - 와는 서로 다른 태그다! 틀린 경우 맞는 경우 모든 요소는 닫아야.. 2013. 5. 29.
웹표준가이드(1) / 올바른 DOCTYPE 사용 출처 : http://blog.naver.com/maglitt/60052938048 HTML 3.2 표준 문서 형식 HTML 4.01 표준 문서 형식 XHTML 1.0 표준 문서 형식 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional을 사용하는 것이다. XHTML 1.1 표준 문서 형식 표준 문서 형식(Doctype)을 기반한 웹페이지에 대한 정확한 사용법 ... [출처] 웹표준가이드(1) / 올바른 DOCTYPE 사용|작성자 마그리뜨 2013. 5. 29.
반응형 웹디자인의 조건 글꼴 크기 출처 : http://demun.tistory.com/2212 반응형 웹디자인을 적용하려면 제일 먼저 글꼴 크기를 정해줘야 한다.예전에 방탄웹에서는 키워드를 사용하는 방법을 말했다. 이유는 키워드는 어떤 브라우져에서 봐도 동일하나는 결론이였죠. 하지만 이제는 환경이 좀 변했습니다.바로 반응형이죠. 브라우져의 크기, 보는 기기의 크기에 따라 웹페이지가 변해야 한다는 점입니다.그 조건에 가장먼저 적용해야 하는 것이 바로 글꼴의 크기 입니다.글꼴의 크기에 따라서 컨텐츠의 크기도 달라지고, 여백도 달라집니다.즉 모든 것이 달라지기 때문에 레이아웃이 변합니다. 기존의 px 로 되어 있는 크기를 em 으로 변환해야 합니다.그런 어떤식으로 변환해야 올바른 것일까?? 특별히 다른 값을 명시하지 않는 한 모든 최신 브라.. 2013. 5. 28.
반응형 웹디자인의 조건 너비 width 출처 : http://demun.tistory.com/2213 반응형 웹디자인의 첫번째 조건인 글꼴 크기를 정하는 방법에 대해서 알아봤습니다.이제 글꼴 크기를 정했으니 레이아웃에 반영되는 너비 width 를 지정하는 방법에 대해서 알아보겠습니다. 예를들어 아래와 같은 px 로 지정한 css 설정이 있다고 가정합니다. header content sidebar footer 기본만 정했으니 참고하시고 여기서도 타킷 ÷ 컨텍스트 = 결과 공식을 사용해서 width를 반응형으로 수정해보겠습니다. css#wrapper { width: 96%; /* 가장큰것이 100%라고 가정하고 96%로 지정합니다. */ margin: 0 auto; } #header { width: 97.9166667%; /* 940 ÷ 960 .. 2013. 5. 28.
IE8 이하에 HTML5 적용 아직까지 불안감이 없지 않아 있는 IE9 이하에서의 HTML5 문서적용이다.해서 구글링을 하다보니, 구글에서 HTML5 문서구조를 지킬 수 있는 형태의 스크립트를제시하고 있었다. 먼저 기본적으로 많이 알려진 IE8 이하에서 존재하지 않는 HTML5의 요소들.nav , article, section 등등의 요소들을 사용가능토록 하는 스크립트이다. http://html5shiv.googlecode.com/svn/trunk/html5.js 이 스크립트 파일로 인해서 HTML5 에 요소가 활성화 된다.여기서 주의할것은 본래 스크립트는 파싱절차가 있기에 문서 하위단에링크를 연결해주도록 하는게 좋으나, 위 스크립트는 아마도 요소 재정의에가깝기에 head 단에서 연결해주도록 하는 것이 맞는것 같다.여기서도 이 스크립.. 2012. 7. 25.
Visual Studio 2010 HTML 유효성 검사 비쥬얼 스튜디오 2010 에서 HTML5 코드를 작성하다 보니,자꾸 인텔리센스및 유효성 검사에 걸린다. 최초 기본은 XHTML 1.0 기반으로 설정되어 있다. 아무래도 가장 활성화 되어있는 표준코드 작성양식은XHTML 1.0 Transitional 이기에 기본설정되어 있는 것 같다. 그러다 그러다보면 HTML5 코드작성하는데 자꾸밑줄 뜨고..ㅡㅡ;;그래서 아래 경로에서 플러그인을 다운로드 받는다. 구찮으면 아래 파일 다운로드받으시고~http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d/ VS2010유효성검사_HTML5Setup.msi 해서 해당 플러그인을 다운로드 받아 설치하고 나서 다시 옵션 > 유효성 검사란.. 2012. 7. 9.
HTML UI 에 대해서 정말로 그 동안 계속 개발을 해오며, HTML UI 때문에 이만저만 고생한것이 아니다. 박스모델 등.. 테이블 코드를 이용한 그리드 레이아웃등. 어쨌건.. 그 동안 이런 저러한 테스트들을 통하여 결과를 다시 작성해 본다. 먼저 기본적이 웹사이트 UI 에 가장 많이 사용되는 UI 형태이다. 작성된 HTML코드는 다음과 같다. 이제 이와 같은 형태에서 많은 각각의 요소(엘리먼트) 안에 내용들이 할당된다. HEADER 부분에는 평균적으로 메뉴가 들어가게 될것이고, LEFT 부분에는 로그인및 배너및 기타요소가 들어가게 될것이고, CONTENT 부분에는 말 그대로 컨텐츠등이 들어가게 될것이다. FOOTER 에는 카피라이트 문구나, 소개형태의 내용이 들어가게 된다. 그런데 이와같은 형태의 UI에서 빈번하게 삽질하게.. 2012. 3. 12.