CSS 기초 개념
SOURCE.HTML
<html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
/*
미국 HTML 한국css, 일본java script(HTML에서 영역을 지정해주었다. 각각의 css,java script영역에선 HTML이 사용가능하지 않다.)
css : 디자인을 위한언어
css <head>태그사이에선언</head>
*/
p{
color:orange;
}
</style>
</head>
<body>
<!--Ex01_css.htm-->
<div><font color="green">안녕하세요.</font></div>
<div><font color="blue">안녕하세요.</font></div>
<div><font color="blue">안녕하세요.</font></div>
<hr />
<p>안녕히 가세요.</p>
<p>안녕히 가세요.</p>
<p>안녕히 가세요.</p>
</body>
</html>
결과
SOURCE.HTML
<html>
<head>
<title></title>
<style type="text/css">
/* CSS 주석*/
/* CSS 구문만 해석 가능한 영역 */
/*div 선택 { color 속성 : Blue 값;}*/
div { color:yellow;}
p
{
color:blue;
font-size:30pt;
}
span
{
color:Lime
font-size:18pt;
}
</style>
<link rel="Stylesheet" href="./Ex01.css" />
</head>
<body>
<!--<font color="red">속성은 xhtml로 넘어오면서 거의 사라지는 추세이다.-->
<div><font color="red">텍스트입니다.</font></div>
<div>1</div>
<div>2</div>
<div>3</div>
<!--inline Style 태그안에 포함되는 스타일-->
<div style="color:Red;">1</div>
<div style="color:Blue;">2</div>
<div style="color:Gray;">3</div>
<!--2. 내장 <head> 안에 스타일을 지정한것 -->
<p>문단입니다.</p>
<p>문단입니다.</p>
<p>문단입니다.</p>
<!--외장 스타일 시트 별도의 파일로 보관-->
<h3>제목입니다.</h3>
<h3>제목입니다.</h3>
<h3>제목입니다.</h3>
<!--Ex02.htm-->
<p>p 태그 영역입니다.</p>
<p>p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.p 태그 영역입니다.</p>
<p>p 태그 영역입니다.</p>
<div>div 태그 영역입니다.</div>
<div>div 태그 영역입니다.</div>
<div>div 태그 영역입니다.</div>
<!--하나<br />
둘<br />
셋-->
<!--Panel-->
<div>하나</div>
<div>둘</div>
<div>셋</div>
<div>안녕하세요. <span>홍길동</span>입니다.</div>
<hr />
홍길동<br />
20<br />
서울시
<hr />
<!--
데이터의 의미 부여 : Sementic Web
: HTML태그에 의미를 부여하자!!!
-->
<!--<div id="객체명" class="그룹명">홍길동</div>-->
<div id="name" class="member"><span class="familyName">홍</span>길동</div>
<div id="age" class="memeber">20</div>
<div id="address" class="member">서울시</div>
<div>안녕하세요. <span id="name2">홍길동</span>입니다.</div>
<!--<div id="Div1" class="그룹명">아무게</div>
<div id="age">20</div>
<div id="address">서울시</div>-->
</body>
</html>
결과
SOURCE.HTML
<html>
<head>
<title>Css2</title>
<style type="text/css">
h3
{text-decoration:underline;}
p{ font-size:10pt;}
div { font-style:italic; }
.memberInfo
{
color:Blue;
font-size:10pt;
}
#bigo
{
color:Red;
}
/* 2개이상의 선택자가 동일한 속성&값 가질때.. 코드줄일수 있는 방법 */
h3, p, div
{ color:Blue;}
li{ font-size:10pt;}
h3{ text-decoration:underline;}
.list1{ color:red; }
.list2{ color:blue; }
.java{ color:Black;}
.blink{ font-weight:bold; }
#java{ color:Black;}
li { font-size:11px; }
h3 { text-decoration:underline; }
.list1 { color:Red; }
.list2 { color:Blue; }
.list3 { font-weight:bold; }
#title { font-style:italic; }
#item { text-decoration:line-through; }
h2, h3 { font-family:궁서체; }
</style>
</head>
<body>
<!--Css 그룹-->
<h3>제목임</h3>
<p>문단임</p>
<div>div임ㅋ</div>
<!--Selector-->
<h3>신상정보</h3>
<div class="memberInfo">이름 : 홍길동</div>
<div class="memberInfo">나이 : 20살</div>
<div class="memberInfo">주소 : 서울시</div>
<div id="bigo">[비고]위의 사항을 어쩌구 저쩌구...입니다.</div>
<h2>내가 할 수 있는 언어</h2>
<h3 class="list1">프로그래밍 언어</h3>
<!--li태그에는 안줘도 되는것이 부모에게 주면 자식한테도 부모태그를 적용한다.-->
<ul class="list1">
<li>Visual C#.NET</li>
<li>Visual Basic.NET</li>
<li id="java">Java</li>
<li class="blink">Visual C++.NET</li>
</ul>
<h3 class="list2">외국어</h3>
<ul class="list2">
<li>영어</li>
<li>일본어</li>
<li class="blink">중국어</li>
<li>프랑스어</li>
</ul>
</body>
</html>
결과
SOURCE.HTML
<html>
<head>
<title>Css Selector</title>
<style type="text/css">
/*W3C에서는 id, class를 사용해도 되지만 부모 자식간으로 접근하는 것을 권장한다.*/
p, div
{
font-size:11px;
}
span
{
font-size:20px;
}
p span
{
color:Red;
}
/*div > span : 조상이 아니라 친부모 라는 뜻이며 좀더 세밀하게 표현할수 있는 기법이다.*/
div > span
{
color:Blue;
}
</style>
</head>
<body>
<p><span>p태그</span>는 문단을 표현하는 태그입니다.</p>
<div><span>div태그</span>는 영역을 표현하는 태그입니다.</div>
</body>
</html>
결과
SOURCE.HTML
<html>
<head>
<title>우선순위</title>
<style type="text/css">
div { color:Red; text-decoration:underline; }
.class1 { font-size:20pt; color:Blue;}
#id1 { color:Yellow;}
#fontsize
{
font-size:12px;
color:#223322;
font-family:돋움;
font-weight:bold;
font-style:italic;
text-decoration:overline;
}
</style>
</head>
<body>
<div id="id1" class="class1"> 대상입니다.</div>
<div id="fontsize">
문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.문자열입니다.
</div>
<a href="Ex01.htm">링크입니다.</a>
</body>
</html>
결과
