반응형 Development/HTML24 웹표준가이드(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. 이전 1 2 3 4 5 6 다음 반응형