-
캐스케이딩 스타일 시트(Cascading Style Sheets)
폰트나 레이아웃 관련 코드
노드 트리 안에 있는 요소들은 그들 부모의 스타일 속성을 그대로 전달받는다
body.style
클래스(class)와 아이디(id) 속성
어떤 문제가 발생했다면 동일한 효과를 내는 다른 방법을 시도
특정 브라우저를 더이상 지원하지 않기로 한 경우
주석
/* .. */
일반 흐름(normal flow) 방식
position: static
Relative positioning
position: relative
절대 위치(absolute positionaing) 방식
position: absolute
가장 가까운 곳에 위치한 "위치가 지정된"(position이 static으로 지정되지 않은) 조상 엘리먼트에 상대적으로 위치가 지정된다
기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다
c.f. 고정 위치(fixed positioning)
position: fixed
뷰포트(viewport; 디스플레이?)에 상대적으로 위치가 지정
플로트(float) 방식
float: {left|right}
기본 문서 흐름내에서 자리를 차지하지 않는다
float된 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다
플로트를 해제(clear?)하면 플로트를 지정한 엘리먼트를 둘러싸고 있는 엘리먼트에 공간이 생긴다
블록 레벨 엘리먼트(block-level element)
마진 겹침 현상(margin collapsing)
일반적인 문서 흐름 상태(인라인 레벨이나 플로팅, 절대 위치 제외)에서 블록 레벨 박스에 지정된 세로 방향의 마진에서만 적용된다
인라인 엘리먼트(inline element)
수직 방향으로 지정된 패딩값, 테두리선, 마진값은 인라인 박스의 높이에 아무런 영향을 주지 않는다.
* 엘리먼트의 선택(?)
타입 선택자(type selector)
p { .. }
전체 선택자(*)
* {
padding: 0;
margin: 0;
}
클래스 선택자
.datePosted { .. }
유사 클래스 선택자
a:ink { .. }
ID 선택자
#intro { .. }
하위 선택자(decendant selector)
#mainContent h1 { .. }
자식 선택자(child selector)
#nav > li { .. }
인접 형제 선택자(adjacent sibling selector)
h1 + p { .. }
속성 선택자(attribute selector)
abbr[title]:hover { .. }
a[rel="nofollow"] { .. }
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
element.className+= " ";
element.className+= value;
}
}
<style type="text/css"><![CDATA[
a:link { .. }
a:visited { .. }
a:hover { .. }
]]>
</style>
*
- {element}.style
.textTransform
{uppercase}
.textDecorationall elements{underline|none}.letterSpacing
자간
all elements
e.g. -2px
.lineHeight
행간
all elements
e.g. 1.5em;14px
.textAlign
block containers
{justify|center}
.textIndent
e.g. 3em
.color
sets the foreground color of an element's text content, and its decorationsall elements; inherited{white|black|red|blue|yellow|gray}e.g. #369.fontall elements; inherited.fontStyle{normal|italic}.fontWeight{normal|bold|bolder|lighter|}.fontFamilye.g. Georgia, Times, serif; "Gulim", san-serif.fontSizee.g. small; 400%; 10pt; 1.2em; 24px.fontVariant{small-caps}.verticalAligninline-level and table-cell elements{top|middle|}.width
the content area of an element. The content area is inside the padding, border, and margin of the element
all elements but non-replaced inline elements, table rows, and row groups
e.g. 30%; 300px
.height
e.g. 200px
.backgroundall elementse.g. url(img/li_bull.gif) no-repeat 0 50%; #ccc.backgroundClip.backgroundColor.backgroundImage.backgroundOrigin.backgroundPosition[ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ].backgroundRepeat{no-repeat|repeat-x}.backgroundSize.backgroundAttachment.paddingall elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-columne.g. 0 0 20px 10px.paddingTop.paddingRight.paddingBottom.paddingLefte.g. 17px.borderall elements.borderLeft.borderRight.borderTop.borderWidth.borderStyle{none|solid|dotted}.borderColor.borderBottome.g. 1px solid #696.borderBottomColor.borderBottomStyle.borderBottomWidth.overflownon-replaced block-level elements and non-replaced inline-block elements{hidden|auto}.overflow-y.marginall elements except elements with table display types other than table-caption, table and inline-tablee.g. 0.marginTop.marginRighte.g. 34%.marginBottom.marginLeft.display{none|block|inline|inline-block}.background{none}.float{right}.clear{right|both}.position{absolute}.top.bottom.left.right.zIndex// CSS Level 3.wordBreak{normal|break-all|keep-all|initial|inherit}-.listStylelist items; Inheritedlist-style: list-style-type(항목 모양 종류) list-style-position(위치) list-style-image(이미지)e.g. ul { list-style: disc outside none; }.listStyleImage{none}.listStylePosition.listStyleType-.borderCollapsetable and inline-table elements{collapse}- {element}.className<head><link rel="stylesheet" type="text/css" href="style.css" />@import url("reset.css")@import url("layout.css")@import url("fonts.css")@import url("colors.css")<!--or<link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen" />--><style type="text/css"><![CDATA[@import "style.css";
]]>
</style>
<style type="text/css">
<![CDATA[
A {text-decoration: none; color:black}
A:hover {text-decoration: underline; color:orange}]]>
</style>
/*
or
<style type="text/css">
<--
..
-->
</style>
*/
</head>
<font size="2" face="돋움" color="#ffffff">..</font>
<strong>..</strong>
<big>..</big>
table
.style
e.g. "border: 1px dashed rgb(192,192,192)"
tr
td
.bgcolor
<a href="write.htm"><img src="images/write_new.gif" align="middle" border="0" WIDTH="31" HEIGHT="30"></a>
<form name="myform" method="POST" action="write_ok.asp">
<input type="text" name="name" size="20" style="border: 1 dashed">
<input type="text" name="homepage" size="30" style="border: 1 dashed" value="http://">
<input type="text" name="title" size="30" style="border-left: 1px dashed; border-right: 1 dashed; border-top: 1 dashed; border-bottom: 1 dashed">
<textarea wrap="hard" rows="10" name="content" cols="55" style="border: 1 dashed"></textarea>
<input type="password" name="pwd" size="8" style="border: 1 dashed">
<input type="button" value="글을 다 썼어요" name="write" OnClick="sendit()" style="background-color: rgb(0,57,115); color: rgb(255,255,255); font-weight: bolder">
<input type="reset" value="글 다시 쓸래요" name="reset" style="background-color: rgb(0,54,108); color: rgb(255,255,255); font-weight: bolder">
</form>
참조 사이트:
http://naradesign.net/wp/2008/05/27/144/
http://complexspiral.com/publications/containing-floats/
http://www.positioniseverything.net/easyclearing.html
http://tranbot.net/ALA/css-floats-101/
http://www.mezzoblue.com/archives/2005/03/03/clearance/
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
http://www.w3schools.com/cssref/default.asp
http://msdn.microsoft.com/ko-kr/library/ee371223(v=expression.40).aspx
reset.css