11주차 - jsp&css (15) 절대 위치, 고정 위치
2022. 9. 14. 17:04ㆍjsp/css
이번의 목표
01. 절대 위치와 고정위치에 대해 알아보자.
지난 시간에는 정적 위치와 상대 위치를 알아봤습니다.
position 을 이용하는 두 가지 방법을 더 알아 볼 것입니다.
절대 위치란 사용자의 페이지를 기준으로 고정된 좌표에 위치합니다.
단, 조상이 되는 요소에 position이 사용되었다면 해당 요소를 기준으로 좌표에 위치합니다.
고정 위치는 사용자의 화면을 기준으로 항상 같은 위치에 있습니다.
네이버 홈페이지에서 하단에 위치하는 다크모드 설정과 최상단으로 가는 버튼이 그 예시입니다.
position : fixed 는 고정 위치 / position:absoulte 는 절대 위치 입니다.
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">
.ps{
position: static;
left: 30px;
top : 30px;
background-color: cyan;
width: 400px;
height: 50px;
}
.pf {
/* 사용자 화면의 우측 상단에 고정되도록 위치 시킴*/
position: fixed;
right: 40px;
top: 40px;
background-color: orange;
width: 400px;
height: 50px;
}
.pa{
/* 페이지의 우측 상단에 고정되도록 위치시킴*/
position: absolute;
right: 50px;
top : 10px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style2</h1>
<p class="ps">정적 위치 설정 적용</p>
<div class="pf">고정 위치 설정</div>
<p class="pa">절대 위치 설정 적용</p>
<p class="ps">정적 위치 설정 적용</p>
<p class="ps">정적 위치 설정 적용</p>
고정 위치 : 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음.<br>
절대 위치 : 웹 문서의 흐름과 상관 없이 전체 페이지를 기준으로 배치.<br>
</body>
</html>02. 실행 화면
①스크롤을 내렸을 때에, 절대 위치는 페이지의 우측 상단에 고정 되는 것을 확인 할 수 있습니다.
②또, 고정 위치는 사용자가 스크롤을 내림에 따라 화면의 우측 상단에 계속 위치해있는 것을 확인할 수 있습니다.
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (17) overflow (0) | 2022.09.14 |
|---|---|
| 11주차 - jsp&css (16) float, clear (0) | 2022.09.14 |
| 11주차 - jsp&css (14) 정적 위치, 상대 위치 (0) | 2022.09.14 |
| 11주차 - jsp&css (13) CSS 박스 모델 크기 지정하기 (0) | 2022.09.14 |
| 11주차 - jsp&css (12) CSS 박스 모델 여백 넣기 (0) | 2022.09.14 |