안녕하세요. 필자입니다. 지금은 레이어 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 에서 해주세요.
아래의 손가락버튼을 눌러주시면 블로그에 큰 힘이 됩니다.
'Program > 오래된 PHP 게시판' 카테고리의 다른 글
| [HTML/JAVASCRIPT]자바스크립트로 계산하기 더하기 (evel내장함수 이용) (0) | 2013.03.18 |
|---|---|
| [HTML/JAVASCRIPT]자바스크립트로 숫자 판별하기 (0) | 2013.03.18 |
| [jQuery]특정 레이어(div)를 클릭할경우 레이어 숨기기 (0) | 2013.03.10 |
| [HTML]H1~H5태그로 글씨 강조하기 (0) | 2013.03.04 |
| [PHP]현재시간표시함수 time 사용법 (0) | 2013.02.25 |
댓글