[HTML/CSS]div(레이어) 여백지정하기 (inside)

Program/오래된 PHP 게시판

안녕하세요. 필자입니다. 지금은 레이어 DIV를 이용해서 안쪽여백을 지정하려고합니다.


시작해보겠습니다.


<!DOCTYPE HTML>

<html> 

<head>

<title>  </title>

<meta charset="utf-8">

</head> 


<body>

</body>

</html>


html5 웹표준을 준수하는 html소스를 작성합니다.


<!DOCTYPE HTML>

<html> 

<head>

<title> CSS테스트 페이지입니다. </title>

<meta charset="utf-8">

</head> 


<body>

내용 작성준비중..!

</body>

</html>


타이틀과 바디안의 내용을 생각합니다.


CSS를 작성합니다.


<!DOCTYPE HTML>

<html> 

<head>

<title> CSS테스트 페이지입니다. </title>

<meta charset="utf-8">

<style type="text/css"> /*CSS시작*/

body{margin:0;}

#div{padding-top:100px; /*위쪽여백 지정*/ padding-bottom:15px; /*아래쪽 여백 지정*/ 

padding-left:5px; /*왼쪽여백 지정*/ padding-right:2px; /*오른쪽 여백지정*/ 

background-color:black;/*배경색 지정*/ color:white;/*글자색 지정*/ 

font-weight:bold;/*폰트 굵기 조정*/}

</style> <!-- CSS종료 -->

</head> 


<body>

내용 작성준비중..!

</body>

</html>

이제 div를 작성합니다.

<!DOCTYPE HTML>

<html> 

<head>

<title> CSS테스트 페이지입니다. </title>

<meta charset="utf-8">

<style type="text/css"> /*CSS시작*/

body{margin:0;}

#div{padding-top:100px; /*위쪽여백 지정*/ padding-bottom:15px; /*아래쪽 여백 지정*/ 

padding-left:5px; /*왼쪽여백 지정*/ padding-right:2px; /*오른쪽 여백지정*/ 

background-color:black;/*배경색 지정*/ color:white;/*글자색 지정*/ 

font-weight:bold;/*폰트 굵기 조정*/}

</style> <!-- CSS종료 -->

</head> 


<body>

<div id="div">이동마이의 컴퓨터 하루 테스트용입니다.</div> <!-- div css실행 -->

</body>

</html>


모든것에 주석을 집어넣은겁니다.


<!DOCTYPE HTML> <!-- HTML5 웹표준 -->
<html> <!-- html시작 -->
<head> <!-- 머리부분 시작 -->
<title> CSS테스트 페이지입니다. </title><!-- 페이지 타이틀지정 -->
<meta charset="utf-8"> <!-- 문자셋 지정 -->
<style type="text/css"> /*CSS시작*/
body{margin:0;}
#div{padding-top:100px; /*위쪽여백 지정*/ padding-bottom:15px; /*아래쪽 여백 지정*/
padding-left:5px; /*왼쪽여백 지정*/ padding-right:2px; /*오른쪽 여백지정*/
background-color:black;/*배경색 지정*/ color:white;/*글자색 지정*/
font-weight:bold;/*폰트 굵기 조정*/}
</style> <!-- CSS종료 -->
</head> <!-- 머리부분 종료 -->

<body> <!-- 몸통부분 시작 -->
<div id="div">이동마이의 컴퓨터 하루 테스트용입니다.</div> <!-- div css실행 -->
<br><a href='view-source:http://promasion.dothome.co.kr/html/index.php?act=css1'>소스보기(크롬기반 브라우저 작동) </a>
</body><!-- 몸통부분 종료 -->
</html> <!-- 끝 -->



테스트는


http://promasion.dothome.co.kr/html/index.php?act=css1 에서 해주세요.





   


아래의 손가락버튼을 눌러주시면 블로그에 큰 힘이 됩니다.







Name(이름)
Password(비밀번호)
Homepage(홈페이지)
Secret(비밀글)