OBG WiKi

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS ======
Cascading Style Sheets의 약자로 웹 문서의 스타일을 저장해 둔 스타일시트

===== 예제 =====

<file html index.html>
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
		<div id="header">
			<p id="name">Your Name Here</p>
			<a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a>
		</div>
		<div class="left"></div>
		<div class="right">
			<h4>Objective</h4>
			<p>To take a position as a software engineer.</p>
			<h4>Experience</h4>
			<p>Junior Developer, Software Company (2010 - Present)</p>
			<ul>
				<li>Designed and implemented end-user features for Flagship Product</li>
				<li>Wrote third-party JavaScript and Ruby libraries</li>
			</ul>
			<h4>Skills</h4>
			<p>Languages: C#, JavaScript, Python, Ruby</p>
			<p>Frameworks: .NET, Node.js, Django, Ruby on Rails</p>
			<h4>Education</h4>
			<p>BS, Economics, My University</p>
			<ul>
				<li>Award for best senior thesis</li>
				<li>GPA: 3.8</li>
			</ul>
		</div>
		<div id="footer">
			<p>123 Your Street, Anytown, State 12345-6789 | Tel: (555) 555-5555</p>
		</div>
	</body>
</html>
</file>

<file css stylesheet.css>
div {
	border-radius: 5px;
}

#header {
	z-index: 1;
	position: fixed;
	width: 97.5%;
	margin-top: -20px;
	height: 60px;
	background-color: #668284;
	margin-bottom: 10px;
}

#name {
	float:left;
	margin-left: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}

#email{
	float:right;
	margin-right: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}

h4 {
	margin-left: 5px;
	margin-bottom: 15px;
	font-family: Verdana, sans-serif;
}

.right p {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: -10px;
	font-family: Garamond, serif;
	color: #000000;
}

li {
	list-style-type: square;
}

a:hover {
	font-weight: bold;
}

.left {
	position: relative;
	float: left;
	margin-top: 50px;
	width: 10%;
	height: 400px;
	background-color: #B9D7D9;
	margin-bottom: 10px;
}

.right {
	position: relative;
	float: right;
	margin-top: 50px;
	width: 88%;
	height: 400px;
	background-color: #F4EBC3;
	margin-bottom: 10px;
}

#footer {
	position: relative;
	height: 50px;
	background-color: #668284;
	clear: both;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
}

#footer p {
	position: relative;
	padding-top: 15px;
}
</file>

===== 부모, 자식, 형제 =====

<code html>
<!DOCTYPE html>
<html> <!--트리의 몸통 !-->
	<head> <!--html의 자식, title의 부모, body의 형제-->
		<title></title> <!-- head의 직접적인 자식, head, html의 자식-->
	</head>
	<body> <!--html의 자식, p의 부모, head의 형제-->
		<p></p>
	</body>
</html>
</code>

===== Selector =====

==== 기본 ====
<code css>
/** type 선택자
 * 특정 태그명을 가진 엘리먼트 전체에 효과를 준다
 */
div{
    color: red;
}

/** class 선택자
 * 특정 class 속성을 가진 엘리먼트 전체에 효과를 준다
 */
.left {
    border: 1px dashed #00aa00;
}

/** id 선택자
 * 특정 id 속성을 가진 엘리먼트에 효과를 준다
 */
#header {
    backgound-color: red;
}

/** * 선택자
 * 모든 엘리먼트에 효과를 준다
 */
* {
    border: 2px solid black;
}

</code>

==== Multiple Selector ====
특정 태그로 둘러싸인 태그명에만 효과를 준다

<code html>
<div>
    <div>
        <ul>
            <li><p>I like tacos!</p></li>
            <li><p>I like pizza!</p></li>
        </ul>
</code>

<code css>
div div p {
    /*CSS stuff!*/
}
</code>

정확히 말하면 p의 부모가 div이고 그 div의 부모가 또 div일 때 위 효과를 준다는 의미이다. 여기서 말하는 부모는 조부모가 될 수도 있고 증조부모가 될 수도 있다. 만약 직접적인 부모 관계인 경우에만 효과를 주려면 다음과 같이 한다.

<code css>
div > p {
    /*CSS stuff!*/
}
</code>

==== Pseudo Selector ====
기본 형식은 다음과 같다.

<code css>
selector:pseudo-class_selector {
    property: value;
}
</code>

보통은 a 태그에 효과를 줄 때 많이 쓴다.

<code css>
a:link {
    text-decoration: none;
    color: #008b45;
}

a:hover {
    color: #00FF00;
}

a:visited {
    color: #EE9A00;
}
</code>

특정 자식 태그에만 효과를 줄 때에도 쓴다.

<code css>
/* p 태그가 어떤 태그의 첫 번째 자식인 경우 */
p:first-child {
    font-family: cursive;
}

/* p 태그가 어떤 태그의 두 번째 자식인 경우 */
p:nth-child(2){
    font-family: Tahoma;
}

/* p 태그가 어떤 태그의 세 번째 자식인 경우 */
p:nth-child(3){
    color: #cc0000;
}
</code>

===== 박스 모델 =====
박스 모델은 컨텐츠의 넓이, 컨텐츠의 높이, 패딩, 테두리, 마진으로 이루어져 있다.  아래 이미지는 컨텐츠 영역과 마진, 테두리, 패딩이 어떻게 연된되어 있는지 보여준다.

**box를 이루고 있는 요소**

  * content : 요소가 담고 있는 내용
  * padding : content와 border사이의 간격
  * border : 테두리 선
  * margin : border와 다른 요소 사이의 간격

{{https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/module/441/1245.gif}}

==== 종류 ====

**블록 레벨 엘리먼트(block-level element)**
  * 한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트
  * 다른 인라인 엘리먼트 뿐 아니라 블록 레벨 엘리먼트도 컨텐츠로 포함할 수 있다.
  * DIV, H1~H6, P, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등
 
**인라인 엘리먼트(inline element)**
  * 한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트
  * 인라인 엘리먼트만 포함 할 수 있고, 블록레벨 엘리먼트의 자식이어야 한다.
  * a, img, em, strong등
 
display 속성을 이용해서 블록레벨 엘리먼트를 인라인 엘리먼트로 바꿀 수 있고, 반대경우도 가능하다.
 
display 속성의 값을 none으로 하면 엘리먼트를 화면에서 보이지 않게 할 수 있다.

===== Positioning =====

==== Margin, Padding ====

==== float ====

==== Positioning ====

=== absollute ===

=== relative ===

=== fixed ===


===== 참고 =====
  * [[http://opentutorials.org/course/718/3798|생활코딩 CSS 사전]]
  * [[http://jsfiddle.net/|JSFiddle]]
사용자 도구

문서 도구

OBG WiKi

사이트 도구
