<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>레이아웃 태그</title>
<style>
div{
width: 100px; height:100px; /*width,height 글자를 감싸는 영역의 크기를 지정*/
background: rgba(255,0,0,1);
border: 10px; /*border 테두리의 두께를 지정*/
border-style: dashed; /*solid는 실선 dashed는 점선*/
border-color: blue;
padding: 20px; /*padding 테두리와 글자 사이의 간격을 지정*/
margin: 10px; /*margin 테두리와 다른 태그와의 간격을 지정*/
}
</style>
</head>
<body>
<div>나쁜놈들</div>
<div>착한놈들</div>
</body>
</html>
width,height: 영역의 넓이를 조절한다.
border: 테두리의 두께를 지정
border-style: 선의 스타일을 지정 -> solid는 실선 dashed는 점선
border-color: 선의 색상을 지정
rgba: red 빨강 green 초록 blue 파랑 a->투명도
padding: 테두리와 글자 사이의 간격을 지정
margin: 테두리와 다른 태그와의 간격을 지정
