11주차 - jsp&css (12) CSS 박스 모델 여백 넣기
2022. 9. 14. 14:54ㆍjsp/css
이번의 목표
01. 박스 모델에 여백을 넣어보자
지난 시간에는 CSS 박스 모델에 대해 알아보았습니다.
이번에는 박스 모델의 padding, margin 을 통해 여백을 넣는 방법을 알아보겠습니다.
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>ex12</title>
<style type="text/css">
.mp1 { background-color: aqua; color: red; margin-bottom: 100px; padding-left: 50px; } /* 개별 위치 지정*/
.mp2 { background-color: silver; color: green; margin: 20px; padding: 10px 20px; } /* 값 2개 입력 */
.mp3 { background-color: gray; color: purple; margin: 50px 15px 20px; padding: 20px; } /* 값 3개 입력 */
</style>
</head>
<body style="background-color: lightyellow;">
<p>박스 모델의 네 방향 여백 지정</p>
<p class="mp1">mp1</p>
<p class="mp2">mp2</p>
<p class="mp3">mp3</p>
기본 값(4개일 경우) : top, right, bottom, left<br>
기본 값(3개일 경우) : top, right&left, bottom <br>
기본 값(2개일 경우) : top&bottom, right&left<br>
기본 값(1개일 경우) : top&right&left&bottom<br>
개별 위치 지정 : margin-top, bottom, right, left
</body>
</html>02. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (14) 정적 위치, 상대 위치 (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (13) CSS 박스 모델 크기 지정하기 (0) | 2022.09.14 |
| 11주차 - jsp&css (11) CSS 박스 모델 (0) | 2022.09.14 |
| 11주차 - jsp&css (10) 스타일을 그룹으로 적용해보자. (0) | 2022.09.14 |
| 11주차 - jsp&css (9) overflow (0) | 2022.09.13 |