html & css/개념
HTML 요소의 위치 정의
by Doo Hee
2023. 11. 18.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.relative {
position: relative;
left: 30px;
/* top: 80px; */
border: solid red 3px;
}
</style>
</head>
<body>
<!-- position : html 요소의 위치를 정의 -->
<!-- static, relative, absolute, fixed, sticky -->
<!-- position:static; html 모든 요소는 기본값으로 ststic, 일반적으로 문서의 흐름에 따라서 요소의 위치가 정해짐 -->
<!-- postion:relative; -->
<!-- 일반적인 문서의 흐름에 따라서 요소의 위치가 정해짐 -->
<!-- top, right, bottom, left 4가지 속성을 같이 사용해서 오프셋(offset -원래 문서의 흐름상 있어야 될 위치에서 띄워지는 것)을 적용 -->
<!-- 원래 문서 흐름상 태그가 위치해야 될 위치에서 top, right, bottom, left 4가지 속성을 사용해서 원하는 기준으로 지정한 너비만큼 offset 시킬 수 있게끔 한다. -->
<h2>position:relative;</h2>
<div class="relative">
원래 자기 자신이 있어야 하는 위치에서 left:30px 만큼 오프셋 됩니다.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.fixed {
position: fixed;
bottom: 20px;
right: 10px;
border: solid pink 3px;
border-radius: 20px;
width: 40px;
height: 40px;
font-size: 25px;
color: pink;
}
</style>
</head>
<body>
<!-- position:fixed; 지정된 위치에 html 요소를 고정 -->
<!-- top, right, bottom, left 속성을 이용해서 위치를 지정 -->
<!-- 특정 위치에 고정시키는 것 -->
<h2>position:fixed;</h2>
<button class="fixed">^</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.relative {
position: relative;
width: 400px;
height: 130px;
left: 30px;
border: 3px solid green;
}
.absolute {
position: absolute;
top: 80px;
left: 40px;
width: 240px;
border: 3px solid red;
/* relative를 기준으로 값이 이동(relative 위치가 기준, 0이 된다.) */
}
.general {
width: 350px;
border: 3px solid blue;
}
</style>
</head>
<body>
<!-- position:absolute; -->
<!-- 현재(position:absolute; 가 적용된) html 요소의 부모 요소 중에서 -->
<!-- position:relative;가 설정된 가장 가까운 부모 요소에 대한 상대적인 위치 -->
<h2>positon:absolute;</h2>
<div class="relative">
position:relative로 설정된 부모 요소
<div class="general">
일반(position:static) 요소
<div class="absolute">position:absolute로 설정된 요소</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: greenyellow;
border: solid 2px green;
}
</style>
</head>
<body>
<!-- position:sicky; -->
<!-- 스크롤이 되기 전에는 원래 요소가 있어야 할 위치에 있다가 -->
<!-- 스크롤이 되면 지정된 위치에 고정 -->
<h2>
position:sticky가 적용된 요소는 마우스 스크롤시 정의된 위치에
고정해줍니다.
</h2>
<nav class="sticky">
<!-- <nav> - 다른 페이지 또는 현제 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의
집합을 정의할 때 사용한다. -->
<a href="">메뉴1</a>
<a href="">메뉴2</a>
<a href="">메뉴3</a>
<a href="">메뉴4</a>
<a href="">메뉴5</a>
</nav>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
</body>
</html>
