<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)file:///C:/Users/TJ/Desktop/EX.html -->
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>-</title>
<meta name="robots" content="noindex, nofollow">
<meta name="keywords" content="-">
<meta name="description" content="-">
<meta name="author" content="-">
<!-- 주석: crtl + / -->
<!-- 복사 붙여넣기 : ctrl + D -->
<!-- 원하는 영역만 주석: ctrl + shifte + / -->
<style type="text/css">
/*박스 border*/
/*border라는 클래스 안에 있는 모든 div*/
.border div{width:300px; height: 50px; background-color: #f1f1f1}
/*순서 바뀌는건 상관 없으나 반드시 (공백) 한칸 띄워야함 : 선두께(width), 선모양(style), 선색깔(color)*/
.border .box1{border-top:3px solid #f00}
.border .box2{border-right:1px dotted #f00}/*점선* /
.border .box3{border-bottom:2px dashed #f00}/*긴 점선*/
.border .box4{border-left:3px double #f00}/*두줄 선: 3px만큼 확장 됨*/
.border .box5{border:1px #000 solid}
/*밑에 따로 따로 주는건 쓰지 않음.일일이 잡아서 작업하지 않음*/
.border .box6{border-width: 10px; border-style: dashed; border-color:red}/* 선 두께 */
.border .box7{border-style: dotted}
.border .box8{border-color: aqua}
/*padding*/
.padding div{width: 100px;
border:2px solid #333}
.padding .box1{padding-top: 50px;}
.padding .box2{padding-right: 50px;} /* >>100+4+50=154로 확장됨. so width:46px로 변경하여 총100px로 맞춰줘야함. 즉, ie7은 다 개별 계산해주야댱. but ie8이상은 boder 자동으로 계산해쥼 */
.padding .box3{padding-bottom:50px;}
.padding .box4{padding-left:50px}
.padding .box5{padding:50px}
.padding .box6{padding: 50px 40px 30px 20px} /*값 순서(시계방향): top right bottom left: */
.padding .box7{padding: 50px 10px 30px}/*값 순서: top left/right bottom*/
.padding .box8{padding: 50px 10px 10px;}/*값 순서: top/bottom left/right*/
/*margin: "더블 마진" 중간에 겹치는 부분이 있을 경우, 마진과 마진이 겹쳐서 표현될 때는 하나의 값만 표현됨*/
.margin div{width:100px;
border:5px solid blue}
.margin .box1{margin:50px; } /*상하좌우 여백 50*/
.margin .box2{margin-top:50px; } /*위로 여백 50*/
/*리스트 점 없애기(필수):난중에 디자인요소 넣기*/
.list{list-style:none} /*list-style-position, list-style-image: 안씀돠*/
/*백그라운 이미지*/
/*배경 이미지 삽입*/
.bgimg{width: 500px; height:300px; border:2px solid #333;
background-image: url(login_btn1.gif)} /*기본값: 반복해서 채움*/
/*배경이미지 반복 설정*/
.bgrepeat div{width: 500px; height:300px; border:5px solid #076;
background-image: url(jongno_logo.gif);
margin-bottom: 20px}
.bgrepeat .repeat{background-repeat:repeat}
.bgrepeat .repeat-x{background-repeat:repeat-x}
.bgrepeat .repeat-y{background-repeat:repeat-y}
.bgrepeat .no-repeat{background-repeat:no-repeat}
</style>
</head>
<body>
<!--박스-->
<h3>border</h3>
<div class="border">
<div class="box1">위로 선 표현</div>
<div class="box2">오른쪽 선 표현</div>
<div class="box3">아래 선 표현</div>
<div class="box4">왼쪽 선 표현</div>
<div class="box5">선 표현</div>
<div class="box6">선의 두께</div>
<div class="box7">선의 종류</div>
<div class="box8">선의 색상</div>
</div>
<h3>padding</h3>
<div class="padding">
<div class="box1">위로 여백 50</div>
<div class="box2">오른쪽 여백 50</div>
<div class="box3">왼쪽 여백 50</div>
<div class="box4">상하좌우 여백 50</div>
<div class="box5">상하 여백50 & 좌우 여백 10</div>
<div class="box6">상 50 우40 하30 좌20</div>
<div class="box7">상 50 좌우10 하30</div>
<div class="box8">상하 50 좌우10</div>
</div>
<!--padding과 모두 값음. 다른 것만 체크-->
<h3>margin</h3>
<div class="margin">
<div class="box1">여백50</div>
<div class="box2">위로여백50</div>
</div>
<!--리스트 스타일: 점 없애고 다른 것으로 대체하는 방법 코딩-->
<!--리스트 앞에 점 없애기-->
<h3>list-style</h3>
<ul class="list">
<li>365민원</li>
<li>분야별 정보</li>
<li>소통과 참여</li>
</ul>
<!--background 이미지-->
<!--백그라운드 이미지 적용&반복 설정, 기본값은 반복임-->
<h3>background-image</h3>
<div class="bgimg">
배경이미지(기본값)
</div>
<!--반복설정-->
<h3>background-repeat</h3>
<div class="bgrepeat">
<div class="repeat">반복</div>
<div class="repeat-x">가로 반복</div>
<div class="repeat-y">세로 반복</div>
<div class="no-repeat">반복하지 않음</div>
</div>
<!--백그라운드 이미지 위치 설정-->
<h3>background-position</h3>
<!--백그라운드 이미지 고정 or 스크롤 따라 이동-->
<h3>background-attachment</h3>
<h3>background</h3>
<br/><br/><br/><br/>
</body>
</html>
Html&CSS/html4&css