11주차 - jsp&css (11) CSS 박스 모델
2022. 9. 14. 14:50ㆍjsp/css
이번의 목표
01. CSS3 박스 모델에 대해 알아보자.
01. jsp 코드
02. 실행 화면
01. jsp코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex11</title>
<style type="text/css">
body {margin:0; padding:0;}
div {
background-color: yellow;
width: 300px;
padding: 25px;
border: 15px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<p>CSS3 박스 모델은 content, padding, border, margin으로 구성되어 있다.</p>
<div>
박스 모델의 padding, border, margin 속성의 기본 값은 0이며,
상하좌우 네 가지 방향을 top, bottom, left, right를 이용하여 지정할 수 있다.
</div>
</body>
</html>02. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (13) CSS 박스 모델 크기 지정하기 (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (12) CSS 박스 모델 여백 넣기 (0) | 2022.09.14 |
| 11주차 - jsp&css (10) 스타일을 그룹으로 적용해보자. (0) | 2022.09.14 |
| 11주차 - jsp&css (9) overflow (0) | 2022.09.13 |
| 11주차 - jsp&css (8) 가상 클래스 (0) | 2022.09.13 |