css 정리
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
/*display:inline; 기존의 블록화된 부분 div를 inline화 한다*/
display:inline;
}
span
{
/*display:block; 기존의 인라인을 블록화 한다. 아래에서 span*/
display:block;
}
/*다음의 뜻은 "친부모가 아이디명 list1인 li에 서식(block->inline화)을 적용하라"라는 뜻*/
#list1 > li
{
display:inline;
}
</style>
</head>
<body>
<div>영역</div>
<div>영역</div>
<div>영역</div>
<p>인라인태그 <span>span</span>입니다.</p>
<h3>외국어</h3>
<ul id="list1">
<li>영어</li>
<li>중국어</li>
<li>일본어</li>
</ul>
<h3>외국어</h3>
<ul>
<li>영어</li>
<li>중국어</li>
<li>일본어</li>
</ul>
</body>
</html>
결과
examl.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:200px;
}
#btn1
{
width:300px;
height:50px;
}
</style>
</head>
<body>
<div id="div1">영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.</div>
<input type="button" id="btn1" />
</body>
</html>
결과
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
border-style:dotted;/*점선*/
border-color:#55FF00;
border-width:5px;
}
#txt1
{
width:300px;
height:100px;
/*
border-style:solid;
border-color:Black;
border-width:1px;
*/
/*위의 3개를 줄여서 할 수 있다 => 속성 그룹화*/
border:1px solid black;
}
a > img
{
/*이미지 걸린 링크는 아래와 같이 테두리를 없애는 작업을 해주어야 시각적으로 보기에 좋다.*/
/*border-style:none; 로 해도 됨*/
border-width:0px;
}
</style>
</head>
<body>
<div id="div1">영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.영역입니다.</div>
<textarea id="txt1"></textarea>
<br />
<a href="Ex01.htm"><img src="images/adore.png" alt="이미지" /></a>
</body>
</html>
결과
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#table1
{
border:1px solid gray;
width:500px;
/*테두리 병합*/
border-collapse:collapse;
}
/*각각 th, td를 찾아서 적용*/
#table1 th, #table1 td
{
font-size:12px;
border:1px solid gray;
padding:5px;
}
#table1 th
{
background-color:Yellow;
}
/*너비는 해더에만 주면 자동으로 다음줄의 너비들이 따라감, 따라서 해드에만 ID를 추가해서 여기서 정의함*/
#col1 { width:80px }
#col2 { width:100px }
#col3 { width:80px }
#col4 { width:240px }
/*정렬은 클래스로 만들어야함: 이유는 다음줄부터 모두 같은 컬럼은 같은 정렬방식을 이용해야 함으로*/
.td1 { text-align:center; }
.td3 { text-align:right; }
#txt1
{
width:200px; height:100px;
border:1px solid black;
/*padding-top:20px;
padding-left:10px;*/
padding:20px; /*상하좌우 모두 padding*/
}
</style>
</head>
<body>
<textarea id="txt1"></textarea>
<br /><br />
<table id="table1">
<tr>
<th id="col1">번호</th><!--해더;td와 비슷하고 해더의 용도로 씀: 기본으로 가운데 정렬되고, 굵게 나옴-->
<th id="col2">이름</th>
<th id="col3">나이</th>
<th id="col4">주소</th>
</tr>
<tr>
<td class="td1">1</td>
<td>홍길동</td>
<td class="td3">20</td>
<td>서울시 영등포구 여의도동</td>
</tr>
<tr>
<td class="td1">1</td>
<td>길동홍</td>
<td class="td3">20</td>
<td>서울시 영등포구 여의도동</td>
</tr>
</table>
</body>
</html>
결과
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
border:1px solid black;
width:100px;
height:50px;
}
#box
{
/*margin:10px;*/
/*
margin-top:10px;
margin-bottom:10px;
*/
/*margin:10px 20px 50px 5px;*/
/*아래는 위아래, 좌우 의 여백*/
margin:10px 50px;
}
</style>
</head>
<body>
<div>영역1</div>
<div id="box">영역2</div>
<div>영역3</div>
</body>
</html>
결과
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
border:1px solid black;
width:100px;
height:100px;
}
#box
{
/*
position:relative;
left:5px;
top:5px;
*/
/*position:absolute;
left:0px;
top:0px;*/
/*fixed로 하면 스크롤을 움직여도 화면에 고정 됨*/
position:fixed;
left:0px;
top:0px;
}
</style>
</head>
<body>
<div>영역1</div>
<!-- 아래에서 position을 정의 하지 않으면 기본으로static가 되어서 자신의 부모가 아닌 body를 따르게 된다. -->
<div style="margin:30px;position:relative">
<div id="box">영역2</div>
</div>
<div>영역3</div>
</body>
</html>
결과
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div1
{
width:200px;
height:200px;
border:1px solid black;
/*background-color:Fuchsia;*/
background-image:url(images/angry.png);
/*배경이미지를 x축으로만 반복시켜라*/
/*background-repeat:repeat-x;*/
background-repeat:no-repeat;
/*위의 배경이미지가 반복이 없을때만 아래와 같이 위치를 지정할 수 있다*/
background-position:center center;
/*직접 위치 지정*/
background-position:0px 50px;
}
body
{
background-image:url(images/cry.png);
background-repeat:no-repeat;
background-position:right bottom;
/*이미지가 화면에 고정 됨.*/
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="div1">영역</div>
<p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>
</body>
</html>
결과
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
border:1px solid black;
width:100px; height:100px;
}
#box
{
/*visibility:hidden;*/
/*위의 visibility와는 다르게 아래의 display:none; 는 영역자체까지 사라짐(absolute와 비슷)*/
display:none;
}
</style>
</head>
<body>
<div>영역1</div>
<div id="box">영역2</div>
<div>영역3</div>
</body>
</html>
결과
exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { line-height:140px; }
a
{
font-size:12px;
text-decoration:none;
color:Black;
/*a 태그는 인라인 태그라서 아래와 같이 마진이 적용 되지 않음. 따라서 body태그에 line-height 에서 구현해라*/
/*margin-bottom:10px;*/
}
/* 태그명 : 가상클래스명*/
a:hover
{
color:Red;
text-decoration:underline;
}
</style>
</head>
<body>
<a href="http://www.aaa.com" title="네이버">aaa로 이동합니다.</a><br />
<a href="http://www.naver.com" title="네이버">네이버로 이동합니다.</a><br />
<a href="http://www.naver.com" title="네이버">네이버로 이동합니다.</a><br />
</body>
</html>
결과
