728x90
더보기
Day37. 230621
CSS박스모델
- 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다.
- 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다.
- 테두리(border) : 내용와 패딩 주변을 감싸는 테두리.
- 마진(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
'개발 수업 > WEB' 카테고리의 다른 글
| [HTML,CSS] 목록을 만드는 태그, 목록 스타일 (0) | 2023.06.22 |
|---|---|
| 이클립스 jsp파일 오류(The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path) (0) | 2023.06.22 |
| [CSS] background (0) | 2023.06.21 |
| [CSS] 텍스트 관련 스타일 (0) | 2023.06.21 |
| [CSS] 주요 선택자 (0) | 2023.06.21 |
