사용자 도구

추적: • css

목차

CSS

Cascading Style Sheets의 약자로 웹 문서의 스타일을 저장해 둔 스타일시트

예제

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>
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;
}

부모, 자식, 형제

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

Selector

기본

/** type 선택자
 * 특정 태그명을 가진 엘리먼트 전체에 효과를 준다
 */
div{
    color: red;
}
 
/** class 선택자
 * 특정 class 속성을 가진 엘리먼트 전체에 효과를 준다
 */
.left {
    border: 1px dashed #00aa00;
}
 
/** id 선택자
 * 특정 id 속성을 가진 엘리먼트에 효과를 준다
 */
#header {
    backgound-color: red;
}
 
/** * 선택자
 * 모든 엘리먼트에 효과를 준다
 */
* {
    border: 2px solid black;
}

Multiple Selector

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

<div>
    <div>
        <ul>
            <li><p>I like tacos!</p></li>
            <li><p>I like pizza!</p></li>
        </ul>
div div p {
    /*CSS stuff!*/
}

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

div > p {
    /*CSS stuff!*/
}

Pseudo Selector

기본 형식은 다음과 같다. 

selector:pseudo-class_selector {
    property: value;
}

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

a:link {
    text-decoration: none;
    color: #008b45;
}
 
a:hover {
    color: #00FF00;
}
 
a:visited {
    color: #EE9A00;
}

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

/* p 태그가 어떤 태그의 첫 번째 자식인 경우 */
p:first-child {
    font-family: cursive;
}
 
/* p 태그가 어떤 태그의 두 번째 자식인 경우 */
p:nth-child(2){
    font-family: Tahoma;
}
 
/* p 태그가 어떤 태그의 세 번째 자식인 경우 */
p:nth-child(3){
    color: #cc0000;
}

박스 모델

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

box를 이루고 있는 요소

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

종류

블록 레벨 엘리먼트(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

참고

문서 도구

OBG WiKi

사이트 도구