11주차 - jsp&css (13) CSS 박스 모델 크기 지정하기
2022. 9. 14. 16:48ㆍjsp/css
이번의 목표
01. CSS 박스 모델의 크기를 설정해보자
박스 모델의 크기를 조절하는 방법에는 크게 픽셀(px), 퍼센트(%), 센티미터(cm)가 있습니다.
종류는 좀더 다양하게 있지만 주로 사용되는 것은 위의 세가지 입니다.
일반적으로 가장 많이 사용되는 것은 픽셀(px)이며 퍼센트는 주로 반응형 웹페이지에서 사용됩니다.
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>ex13</title>
<style type="text/css">
p {
background-color: yellow; color: red;font-weight: bold;font-size: 16px;
}
p.c1{width: 300px;height: 80px;color: green;}
p.c2{width: 50%;height: 50%;color: purple;}
p.c3{width: 10cm;height: 3cm; color: blue;}
div{width: 50%; background-color: red; }
</style>
</head>
<body>
<p>박스 모델의 내용 영역 크기 지정</p>
<p class="c1">(1) : c1 : 박스 모델의 크기를 픽셀(px) 단위로 지정</p>
<p class="c2">(2) : c2 : 박스 모델의 크기를 퍼센트(%) 단위로 지정</p>
<p class="c3">(3) : c3 : 박스 모델의 크기를 센티미터(cm) 단위로 지정</p>
<div>
<p class="c2">(2) : c2 : 박스 모델의 크기를 퍼센트(%) 단위로 지정</p>
</div>
</body>
</html>02. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (15) 절대 위치, 고정 위치 (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (14) 정적 위치, 상대 위치 (0) | 2022.09.14 |
| 11주차 - jsp&css (12) CSS 박스 모델 여백 넣기 (0) | 2022.09.14 |
| 11주차 - jsp&css (11) CSS 박스 모델 (0) | 2022.09.14 |
| 11주차 - jsp&css (10) 스타일을 그룹으로 적용해보자. (0) | 2022.09.14 |