7. 여백처리
페이지 정보
작성자 관리자 댓글 0건 조회 527회 작성일 22-01-06 21:49본문
7. 여백처리
실습 : margin.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>여백 처리</title>
</head>
<body>
<header>
<h1>스타일시트 연습</h1>
</header>
<div>
</div>
<p>
문장입니다..
</p>
</body>
</html>
스타일을 추가한다.
<style type="text/css">
div{
width:200px;
height:200px;
border: 1px solid red;
}
p{
border:5px solid blue;
}
</style>
스타일을 수정한다.
<style type="text/css">
div{
width:200px;
height:200px;
border: 1px solid red;
margin:100px 50px; /* top/bottom, left/right */
}
p{
border:5px solid blue;
padding:20px 10px; /* top/bottom, left/right */
}
</style>
선을 별도로 설정할 있다.
border-width:2px; /* border 두께 */
border-color:red;
border-style:solid; /* 선 */
border-width: thin thin thick thick;
border-width: 20px 10px 30px 40px;
border-top-width;20px; /* border 위 부분만 두께 조절 */
border-style: solid; /* double/inset/outset/ridge/groove */
스타일을 바꿔가면서 확인해보기 바랍니다.
댓글목록
등록된 댓글이 없습니다.