본문 바로가기
반응형

Development271

웹표준가이드(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.
반응형

티스토리툴바