개발 수업/WEB

[CSS] CSS박스모델

오늘 하루s 2023. 6. 21. 20:55
728x90
더보기

Day37. 230621

CSS박스모델

  1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다.
  2. 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다.
  3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리.
  4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않는다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테두리</title>
<style>
	div {border-style:solid;
  		 border-width:10px;
  		 margin:20px; }
</style>
</head>
<body>
	<div style="border-color:red; padding:50px">border-color:red;</div>
	<div style="border-color:red  green; padding:50px 100px">border-color:red  green;</div>
	<div style="border-color:red  green  blue; padding:50px 100px 150px">border-color:red  green blue</div>
	<div style="border-color:red  green blue  violet; padding:50px 100px 150px 200px">border-color:red  green blue  violet;</div>
</body>
</html>

728x90