2.레이아웃에 사용되는 두가지 속성 position 과 float
div 속성의 비교
| 레이아웃속성 | positon | float |
| 기본속성 |
static, absoulte, relative |
left, right, none |
| 속성내용 |
|
|
보통 position, float를 어디에 사용할지는 꼭 구분된것은 아니지만
라는 점을 고려하여 선택사용한다.
[출처] 웹표준가이드(6)/css 레이아웃기초|작성자 마그리뜨
| 이미지 자동슬라이드 (0) | 2011.12.30 |
|---|---|
| 상하스크롤시 따라다니는 박스(none script) (0) | 2010.11.10 |
| layout (블로그형) (0) | 2008.07.29 |
| layout (0) | 2008.07.29 |
컬럼형 레이아웃 - 블러그형 / float가 적합
마크업(markup)
| <div id="wrapper"> <div id="head">Site Top Area</div> <hr /> <div id="sub">Site Left Area</div> <hr /> <div id="body">Site MainContent</div> <hr /> <div id="sidebar">Side Bar</div> <hr /> <div id="foot">Site Bottom Area</div> </div> |
CSS
|
body { margin: 0; padding: 0; } |
브라우저 마다 body의 기본값을 통일시켜준다. |
|
hr { display: none; } |
각부분을 구분지어 주는 역활을 하므로
디자인상 화면에 나타나지 않도록 display:none; 시켜준다. |
|
#wrapper{ width: 700px; border: solid 1px #eee; margin: 20px auto; } |
1. 컬럼 전체의 폭고정을 위해 사용 2. 화면을 가운데 배치하기 위해 ⇒ (margin: 20px auto;) |
|
#head { height: 80px; background: #eee; } |
높이와 배경색 지정 |
|
#foot { height: 30px; background: #eee; } |
높이와 배경색 지정 |
|
#sub, #body, #sidebar { float: left; } |
Site Lefr Area, Site Main Area, Side Bar를 모두 왼쪽으로 띄운다. |
|
#sub, #sidebar { width: 150px; } |
|
|
#body { width: 400px; height: 450px; } |
|
|
#foot { clear: both; } |
float 된 블록 다음에 오는 엘리먼트는 clear: both시켜서 전체모양이 일그러지지 않게 한다. |
| float 시킬때는 항상 width나 height를 지정해 주어서 확실한 영역을 만들어 준다. | |
<결과>
float를 이용하여 레이아웃을 잡을 때 배경이 보이지 않는 경우 overflow: auto;로 해결
float를 이용하여 레이아웃을 잡을 경우 배경색이 나타나지 않아 다른 엘리먼트를 추가하거나 컨텐츠 속성을 이용하곤 했다.
이는 아래 보이는 float된 div의 하위 엘리먼트 ul의 내용이 없을 경우 높이를 0으로 취급하기 때문이다. 이는 overflow: auto를 사용하면 쉽게 해결할 수 있다.
| <div id="articles"> <ul id="notice"> ... </ul> <ul id="news"> ... </ul> <ul id="stats"> ... </ul> </div> |
| #articles { width: 700px; margin: 20px auto; background: #ddd; overflow: auto; } |
overflow: auto;적용으로 배경색을 표현할 수 있다.
만약 overflow: auto; 미 적용시 화면에 아무것도 나타나지 않게 된다. [출처] 웹표준가이드(8)/css 레이아웃기초-2|작성자 마그리뜨
| 이미지 자동슬라이드 (0) | 2011.12.30 |
|---|---|
| 상하스크롤시 따라다니는 박스(none script) (0) | 2010.11.10 |
| 레이아웃에 사용되는 두가지 속성 position 과 float (0) | 2008.07.29 |
| layout (0) | 2008.07.29 |
기본레이아웃
마크업(markup)
1.시작 단계에서 고려할점
디자인, css에 우선하여 페이지의 구성요소, 그룹에 적합하게 분리하여 적합한 태그 id, span으로 마크업한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>Simple CSS Layout</title>
</head>
<body>
<div id="head">Site Top Area</div>
<hr>
<div id="sub">Site Left Area</div>
<hr>
<div id="body">Main Content Area
</div>
<hr>
<div id="foot">Site Bottom Area</div>
</body>
</html>
CSS
|
body { margin: 0; padding: 0; } |
브라우저 마다 다른 body값의 통일 |
|
hr { display: noen; } |
각부분을 구분지어 주는 역활을 하므로 디자인상 화면에 나타나지 않도록 display:none; 시켜준다. |
|
#head { height: 170px; background: #eee; } |
상단 로고, 메뉴 등은 고정된 높이를 갖는 경우가 많다. 따라서 높이를 지정하고 배경색만 지정해준다. |
|
#sub { postioin: absolute; top: 170px; left: 0; width: 160px; background: #c4e8fd; } |
1. 일정한 높이를 가지고 있는 경우 2. head 부분 바로 아래 , 왼쪽에 위치시킨다. (top: 170px; left: 0;) 3. main content영역과 겹치는 현상 |
|
#body padding-left: 170px; width: 700px; min-height: 400px; background: #ffff80; } |
1. 왼쪽 메뉴와 겹침 현상 방지를 위해 padding-left 지정 margin값을 사용하지 않은 이유는 Side Left를 포함한 body전체에 배경을 지정하기 위해서이다. 2. Main Content 높이가 Side left가 낮을 경우 배경 footer가 Side Left에 가리는 것을 방지하기 위해서 최소 높이 지정 |
<결과>
relative 와 absolute의 관계
|
absolute position 을 relative position과 함께 사용할 경우 보다 자유롭게 offset 설정가능(하위 absolute position의 offset 기준은 더 이상 브라우저가 아닌 상위 relative postion에 있다.) |
| <div id="board_list" class="freeboard_item"> <ul id="board_list_item"> <li> <div class="number">26</div> <div class="title">title</div> <div class="name">name</div> <div class="date">date</div> <div class="hits">hits</div> </li> <li> <div class="number">26</div> <div class="title">title</div> <div class="name">name</div> <div class="date">date</div> <div class="hits">hits</div> </li> <li> <div class="number">26</div> <div class="title">title</div> <div class="name">name</div> <div class="date">date</div> <div class="hits">hits</div> </li> </ul> </div> |
#board-list-item li {
position: relative;
width: 548px;
border-bottom: 1px solid #EBDDD4;
color: inheret;
}
#board-list li div.number,
#board-list li div.date,
#board-list li div.hits {
top: 7px;
}
#board-list li div.title {
padding-top: 7px;
padding-bottom: 5px;
}
#board-list div.number {
position:
left: 0;
width: 79px;
text-align: center;
}
#board-list div.title {
margin-left: 90px;
width: 297px;
}
#board-list div.date {
position:
right: 57px;
width: 92px;
text-align: center;
}
#board-list div.hits {
position:
right: 0;
width: 57px;
text-align: center;
}
div.freeboard-item div.name {
position:
top: 10px;
right: 150px;
width: 55px;
height: 1.5em;
text-align: center;
overflow: hidden;
}
div.freeboard-item div.title {
width: 252px !important;
}
[출처] 웹표준가이드(7)/css 레이아웃기초-1|작성자 마그리뜨
| 이미지 자동슬라이드 (0) | 2011.12.30 |
|---|---|
| 상하스크롤시 따라다니는 박스(none script) (0) | 2010.11.10 |
| 레이아웃에 사용되는 두가지 속성 position 과 float (0) | 2008.07.29 |
| layout (블로그형) (0) | 2008.07.29 |
table의 구성
|
<thead>, <tbody>, <tfoot>, <th>, <td>등을 적합하게 사용한 작업은 접근성을 높이며 효율적인 css 참조도 쉬워진다. |
1. cellpadding, cellspacing / border-collapse, padding
| 내용 | 예전 태그 | 추천 css | |
| cellpadding | 컨텐츠와 cell경계 사이의 영역 | cellpadding="0" | border-collapse: collapse; |
| cellspacing | cell 간의 간격 | cellspacing="0" | table th, table td {padding: 0;} |
| border | cell 경계선 | border="0" | 생략무방 |
2. 테이블 고정(table-layout: fixed)
width값을 정확하게 입력했는데 입력한데로 표현되지 않을 수 있다.
이때문에 <img src="blank.gif" width="100">을 이용해서 width를 강제로 고정하는 방법을 사용했었다. 이를 보완하는 것이 table-layout 속성
|
table { table-layout : fixed; } |
주의사항
table-layout: fixed;로 width값을 조정할 경우 첫번째 줄 외에 다른 값은 무시된다.
[출처] 웹표준가이드(11)/테이블(Table)|작성자 마그리뜨
| embed태그 (0) | 2011.02.06 |
|---|---|
| object를 이용한 플래시 삽입 (0) | 2010.04.28 |
| textarea 컨트롤 (0) | 2008.11.04 |
| 올바른 마크업을 위한 준수사항 (0) | 2008.07.29 |
| ul과 ol 과 dl (0) | 2008.07.29 |
박스모델 (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선언 앞에 다른 문자열 혹은 공백이 들어갈 경우 |
| 표준랜더링 | HTML 4.01, XHTML 1.0과 같이 W3C의 선언을 정확하게 할 경우 |
랜더링에 따른 width, height 차이
| 호환랜더링 | widht, height값이 줄어든다. |
| 표준랜더링 | width, height영역이 변화 없이 컨텐츠의 영역을 나타낸다. |
2. 중앙정열
Mark Up
<table>를 사용해서 중앙정열을 할 경우 align="center"를 사용했지만 css를 이용한 레이아웃에서는
align="center" 대신 margin="10px auto;" 적용
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" body { text-align: center; } #content { width: 300px; padding: 1em; border: 1px solid #999; margin: 0 auto; line-height: 1.5em; text-align: left; } </style></head> <body> <div id="content"> <p>margin 의 auto 값을 이용해서 보다 다양한 레이아웃을 제작 할 수 있다.</p> </div> </body> </html> |
CSS
|
body { text-align: center; } |
#content의 margin: 0 auto;가 ie5에서 적용되지 않는다. 따라서 body{text-align: center; }추가 |
|
#content { width: 300px; padding: 1em; border: 1px solid #999; margin: 0 auto; line-height: 1.5em; text-align: left; } |
텍스트 역시 가운데 정렬 됨으로 다시 text-align: left;로 가운데 정렬시켜준다. |
3. 화면 정 중앙 위치시키기
|
<table> 엘리먼트를 이용할 때는 valign 혹은 height="100%"와 같은 속성을 이용 세로정렬이 자유롭지만 css에서는 쉽지 않다. |
vertical-align속성
1. vertical-align 특성
| vertical-align 속성을 사용할 수 있는 범위는 td 와 inline 속성에서 적용 가능<td>, <img>,<input> |
2. <예제>
|
-----------------------
|
|
<style type="text/css">
<form action=""> |
중앙정렬을 위해 img, input, select { |
|
* vertical-align은 input, img와 같은 inline 속성에서 사용되며 이는 완벽한 중앙 정렬이 될 수 있다 |
4. position 속성과 negative margin
|
<style type="text/css"> margin: -77px 0 0 -77px; |
1. position: offset 지정 가능 2. top 50%; left: 50%; 브라우저의 상단과 왼쪽에 의 50%에 위치 3. 블럭크기의 절반만큼 음수마진을 주게 되면 엘리먼트의 정중앙이 화면의 정중앙과 일치 |
| <body>
<div id="middle"> </body> |
<결과>
5. 100% 높이 유지하는 레이아웃
div {height: 100%:}가 적용되지 않는 이유
| div 속성에서 height: 100%;를 주었음에도 랜더링시 적용되지 않는 이유는 height 값의 기본은 상위 엘리먼트 이기 때문 따라서 body의 height: 100%;로 지정되어 있지 않을 경우 하위 div {height: 100%;}는 랜더링 불가 마찬가지로 html역시 height: 1000%;로 지정되어 있어야 한다. |
| html > body > div 순서로 height: 100%로 지정 |
<예제>
| <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #head { height: 100px; background: #ddd; position: relative; z-index: 1; } #body { min-height: 100%; margin: -100px 0 -50px 0; } #content-area { padding: 100px 0 50px 0; } #foot { height: 50px; background: #ddd; } </style> <!--[if IE]> <style type="text/css"> #body { height: 100%; } </style> <![endif]--> |
1. 가장 상위 html 부터 차례대로 height: 100%적용 ⇒html, body {height: 100%;} 2. #head 일정한 높이를 가지게 됨으로 position: relative로 한다. 3. #body 선택자 head가 relative 속성을 가짐으로 선택자 body에 해당하는 div는 head 밑에 놓이게 된다. 따라서 margin을 선택자head의 높이에 해당하는 만큼 음수값으로 지정(margin-bottom 동일한 이유) 이후 최소 높이 min-height: 100%;를 지정 4. 컨디셔널 코멘트 사용 l------------------------------ l <!--[if IE]> l <code for Internet Explorer> l <![endif]--> l------------------------------ IE는 min-height의 속성이 구현되지 않는다 따라서 IE를 위한 컨디셔널 코멘트 사용 |
<div id="head"> head (height 100px) </div> <div id="body"> <div id="content-area"> content area </div> </div> <div id="foot"> foot( 50px) </div> |
<랜더링 결과>
| I-ON5 CMS교육 (0) | 2010.04.27 |
|---|---|
| UI개발자, 웹퍼블리셔, 웹코더의 차이점이란? (0) | 2008.07.29 |
| 티스토리 스킨 첫번째 작업 (1) | 2008.07.28 |
목록 (List)
세가지 목록
| ul(unordered list) | 순서가 없는 리스트 |
| ol(ordered list) | 순서가 있는 리스트 |
| dl(definition list) | dt = term , dd = definition 쌍으로 이루어진 리스트 |
각 브라우저별 특징
| <ol>, <ul> | <li>좌측 기본마진 발생, 브라우저별 블릿 다름 (background-image로 해결) |
| <dl> | 출력사항 없음 단 <dd>에서 기본마진 있음 |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unordered List</title> <style type="text/css"> ul { margin: 0; padding: 0; list-style: none; } </style> </head> <body> <ul> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> </body> </html> |
아무런 블릿 스타일도 적용되지 않은 세줄의 텍스트가 나옴
여기에 아래 스타일을 적용시키면 블릿을 가진 리스트가 생긴다.
li {
background: url(bullet.gif) no-rpeat 0 0.25em;
padding-left: 15px;
}
[출처] 웹표준가이드(9)/List (ul, ol, dl, dt, dd) |작성자 마그리뜨
| embed태그 (0) | 2011.02.06 |
|---|---|
| object를 이용한 플래시 삽입 (0) | 2010.04.28 |
| textarea 컨트롤 (0) | 2008.11.04 |
| 올바른 마크업을 위한 준수사항 (0) | 2008.07.29 |
| 테이블 (0) | 2008.07.29 |
| I-ON5 CMS교육 (0) | 2010.04.27 |
|---|---|
| UI개발자, 웹퍼블리셔, 웹코더의 차이점이란? (0) | 2008.07.29 |
| 박스모델 (0) | 2008.07.29 |
|
