11주차 - jsp&css (14) 정적 위치, 상대 위치
2022. 9. 14. 16:52ㆍjsp/css
이번의 목표
01. 정적 위치와 상대 위치에 대해 알아보자.
객체의 위치를 설정하는 방법에는 정적 위치와 상대 위치가 있습니다.
정적 위치를 사용하게 되면 객체의 순서에 의해 나열이 됩니다. 위치를 조정해도 적용이 되지 않습니다.
반면, 상대 위치는 현재 블록을 기준으로 위치를 이동시킬 수 있습니다.
방법을 정할 때에는 position 을 사용하면 됩니다.
position : static 은 정적 위치 / position : relative 는 상대 위치 입니다.
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>ex14</title>
<style type="text/css">
.ps {
position: static;
left: 30px;
top: 30px;
background-color: cyan;
width: 400px;
height: 50px;
}
.pr1 {
position: relative;
left: 40px;
top: 40px;
background-color: orange;
width: 400px;
height: 50px;
}
.pr2 {
position: relative;
left: 50px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style</h1>
<p class="ps">정적 위치 설정 적용</p>
<div class="pr1">상대 위치 설정 적용</div>
<p class="pr2">상대 위치 설정 적용</p>
정적 위치 : 순서에 따라 나열되는 방식. 위치 조정을 해도 적용되지 않는다
<br> 상대 위치 : 현재 블록을 기준으로 위치를 선정하게 된다.
</body>
</html>02. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (16) float, clear (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (15) 절대 위치, 고정 위치 (0) | 2022.09.14 |
| 11주차 - jsp&css (13) CSS 박스 모델 크기 지정하기 (0) | 2022.09.14 |
| 11주차 - jsp&css (12) CSS 박스 모델 여백 넣기 (0) | 2022.09.14 |
| 11주차 - jsp&css (11) CSS 박스 모델 (0) | 2022.09.14 |