728x90
반응형
<!-- src/main/webapp/7/box.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
border: solid 3px yellow;
width : 100px;
height : 100px;
}
/* .m1 : 테두리 점선, 간격(margin) : 20px, 배경색(background) : 파랑색 */
.m1 {
border-style: dotted;
margin: 20px;
background: blue;
}
/* .m2 : 테두리 실선, 위간격 : 10px, 오른쪽간격 : 100px, 바닥간격 : 100px, 왼쪽간격 : 50px, 배경색 : 빨강색 */
.m2 {
border-style: solid;
margin : 10px 100px 100px 50px;
/*
margin-top: 10px;
margin-right: 100px;
margin-bottom: 100px;
margin-left: 50px;
*/
background: red;
}
/* .m3 : 테두리 댓쉬선, 위간격 : 100px, 오른쪽간격 : 100px, 바닥간격 : 50px, 왼쪽간격 : 10px, 배경색 : 초록색 */
.m3 {
border-style: dashed;
margin: 100px 100px 50px 10px;
background: green;
}
</style>
</head>
<body>
<div class="m1">박스1</div> <!-- div, span : 영역을 지정하는 태그 -->
<div class="m2">박스2</div>
<div class="m3">박스3</div>
<hr>
<span class="m1">박스1</span> <!-- div, span : 영역을 지정하는 태그 -->
<span class="m2">박스2</span>
<span class="m3">박스3</span>
</body>
</html>728x90
반응형
'study > Html' 카테고리의 다른 글
| [Html] 7. htmlcss (반응 선택자: <:hover>, <:active>, <:link>, <:visited>) (0) | 2022.04.04 |
|---|---|
| [Html] 7. htmlcss (메뉴만들기 : <nav>, <list-sytle-type>, <display>, <text-decoration>) (0) | 2022.04.04 |
| [Html] 7. htmlcss (박스모델 : <border>) (0) | 2022.04.04 |
| [Html] 6. CSS 선택자 (선택자 : ID'#', class'.') (0) | 2022.04.04 |
| [Html] 5. CSS (목록 스타일 지정하기 : <list-style-type>) (0) | 2022.04.04 |