DIV
Tips and Notes
Tip: The div element is very often used with CSS to layout a web page.
Note: Browsers usually place a line break before and after the div element
DIV 여백없애려면:
바깥여백을 없애시려면 margin : 0px; 을 주시면 되고 안쪽 여백을 없애시려면 padding : 0px을 주시면 됩니다
다만, IE에서는 margin 버그가 있는 것으로 압니다.
(때문에 주로 웹페이지 제작시는 IE외 파이어폭스등의 브라우저를 기준으로 작업하시면 좋습니다.)
==================================================================================
UL-OL
Using an Image as List Item Marker
It is also possible to use an image as a list item marker:
Exampleul
{
list-style-image:url('arrow.gif');
}
The example above will not show the exact same result in all browsers. IE and Opera will display the images slightly higher than in Firefox, Chrome, and Safari.
The example above will be fine for most occasions. However, there is a way to position the image more precisely.
For the same result in all browsers, you will have to use a background image on each list item, like this:
Example
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(arrow.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
Example explained:
- For ul:
- Set the list-style-type to none to remove the list item marker
- Both padding and margin must be set to 0px for cross-browser compatibility
- For li:
- Set the URL of the image, and show it only once (no-repeat)
- Use the background-position property to place the image where you want it (left 0px and down 5px)
- Use the padding-left property to position the text in the list
=============================================================
Note: To apply more than one class per given element, the syntax is:
| <p class="center bold">This is a paragraph.</p> Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will only work in IE6, but it will not work in Firefox or Opera. |
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
p {text-indent:50px}
p
{
letter-spacing: 12px
}
p
{
letter-spacing: -0.5px
}
Width and Height of an Element
Important: When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.
The total width of the element in the example below is 300px:
| width:250px; padding:10px; border:5px solid gray; margin:10px; |
Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Imagine that you only had 250px of space. Let's make an element with a total width of 250px:
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
Browsers Compatibility Issue
If you tested the previous example in Internet Explorer, you saw that the total width was not exactly 250px.
IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.
To fix this problem, just add a DOCTYPE to the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
테이블 없이 div만으로 레이아웃 구성예
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
</html>
1. 브라우저 별로 CSS를 다르게 하려면 CSS핵을 이용해야 합니다만,단순히 웹폰트를 가리기 위해서라면
@font {font-family : 웹폰트, 웹폰트가 적용되지 않는 곳에서 쓸 폰트 }
이런 식으로 사용하시면 됩니다.
font-family는 앞에서부터 적용하여 맨 앞의 폰트가 없을 경우 두번째, 두번째도 없을 경우 세번째..
식으로 넘어가며 적용시키게 됩니다.
'#Works > 스크립트,CSS,HTML' 카테고리의 다른 글
| float clear하는 4가지 방법 (0) | 2009.06.17 |
|---|---|
| 리스트스타일 이미지 (0) | 2009.03.31 |
| movieclip 경로문제 (0) | 2007.10.23 |
| 플래쉬 exe로 만들때 loadmovie 문제.. (0) | 2007.10.23 |
| 플래쉬 액션스크립트 모음집 (0) | 2007.02.05 |