본문 바로가기
반응형

Development271

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

티스토리툴바