CSS 에서 포지션에 대한 이해와 사용은 중요합니다.
CSS에서 포지션(position)이란?
HTML에서 요소(엘리먼트)를 화면상에 어떻게 배치할 지를 지정하는 속성입니다.
즉 포지션 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치하고
어떤 방식으로 사용할지를 결정할 수 있습니다.
포지션 속성을 지정하는 값은 5가지가 있습니다.
static, relative, absolute, fixed, sticky
1) static position
- static 포지션은 기본 포지션입니다.
- 즉, 명시적으로 기술하지 않으면, static 이라고 보면 됩니다.
- 포지션은 내부적으로 top, bottom, left, right 속성들이 있지만 static 포지션인 경우는 위치상으로
아무런 변화가 없습니다.
<div style="position: static; top: 100px;">
2) relative position
- relative 포지션은 상대적인 위치를 지정할 수 있는 속성입니다.
- 즉, top, bottom, left, right를 지정하면 해당 위치에 배치가 됩니다.
- relative 포지션도 별도의 위치를 지정 않으면 기본 위치에 배치 됩니다.
<div style=" position:relative;top:100px; ">hello world</div>
3) absolute position
- absolute 포지션은 가장 가까운 조상 엘리먼트를 기준으로 상대적인 위치에 배치 됩니다.
(조상 엘리먼트는 static 을 제외)
- 페이지 스크롤에 따라 같이 움직인다
- 조상 엘리먼트가 없으면 body를 기준으로 한다.
- 온라인 쇼핑몰에서 상품이미지에서 좌우 화살표에 따라 이미지 변경 가능.
- 통상 relative 포지션 요소와 자주 사용 된다.
<div style="border: 1px solid black; position: relative; width: 100px; top: 100px;">
first div
<div style="border: 1px solid red; width: 100px;">
second div
<div style="position: absolute; top: 100px;">
absolute div
</div>
</div>
</div>
4) fixed position
- fixed 포지션은 말그대로 특정 위치(뷰포트, viewport)에 배치됩니다. (* 뷰포트 : 페이지에서 사용자에게 보여지는 영역)
- 페이지 스크롤 되어도 움직이지 않는 고정된(fixed) 자리를 갖습니다.
- 선택박스 같이 스크롤을 내려도 따라다니는 기능처럼 만들 수 있습니다. (예시 : 라이브채팅, 라이브영상 등)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 300px;
margin: auto;
}
.fixed {
height: 70px;
background: coral;
position: fixed;
top: 0;
text-align: center;
font-size: 2rem;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem aspernatur porro ab sapiente distinctio ad, dolorem dicta soluta placeat doloribus ipsam exercitationem sint beatae molestias saepe expedita, eos voluptatibus? Mollitia, magni harum! Neque nostrum adipisci libero qui cupiditate id, reprehenderit minus quisquam debitis vitae quam ipsam tempora, ab in aspernatur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem aspernatur porro ab sapiente distinctio ad, dolorem dicta soluta placeat doloribus ipsam exercitationem sint beatae molestias saepe expedita, eos voluptatibus? Mollitia, magni harum! Neque nostrum adipisci libero qui cupiditate id, reprehenderit minus quisquam debitis vitae quam ipsam tempora, ab in aspernatur?</p>
<div class="fixed">
fixed div
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia doloribus, dolor eum perspiciatis ut quaerat enim, consequatur dolore inventore eius deserunt molestias porro ipsum quas, expedita reprehenderit dolorum illo? Alias.
Fuga sed cum assumenda adipisci asperiores quas nisi nihil dolorem, sunt ex deleniti eligendi temporibus nam doloremque dolore ipsam recusandae at? Aut numquam ipsum maiores cum, nisi error dolores eligendi?
Modi ea nihil eum suscipit dignissimos quos sit repellendus, dicta ab blanditiis. At eum quasi nemo distinctio cupiditate et quos aut aperiam, eius blanditiis delectus itaque? Inventore tempore mollitia consequuntur.
Architecto nihil unde nobis, laborum dolorum aut ad laudantium iusto debitis sit eos ipsam, quasi possimus ullam! Fugit laboriosam praesentium natus, recusandae veniam nostrum id, sequi saepe earum eum exercitationem.
Quasi enim debitis, ea ipsa tempore eum neque totam eaque commodi sequi aperiam reiciendis voluptatem a nihil deserunt consequuntur quibusdam inventore velit doloremque! Pariatur eos sunt, quaerat illum magnam rerum.
Expedita iure dolorum eligendi voluptatum minima dignissimos et sunt reprehenderit sit est maiores quaerat aut voluptatibus corporis, corrupti animi adipisci doloremque fugit! Eligendi veritatis minus voluptates ullam corrupti mollitia quia.
Doloremque perferendis nisi neque, atque odio distinctio iure cum, rerum excepturi quae saepe est incidunt earum ab dolor modi! Sit laboriosam ad, magnam voluptatem dolorum animi delectus quidem tempora maiores.
Harum facilis eos perspiciatis, sed esse sequi numquam doloremque quos quasi. Explicabo adipisci perferendis quia ullam rem eveniet, laudantium nesciunt aperiam. Quos molestias a corporis in praesentium, ad maiores distinctio.
Assumenda numquam quos provident aperiam at sapiente aut, beatae maiores vero, placeat facilis quam velit pariatur. Unde in, voluptas facere consectetur laborum quasi id eos eum! Officiis eveniet accusantium laboriosam.
Cumque vel voluptatum ab rerum atque iste nisi vitae quo, recusandae voluptatibus quasi, soluta eligendi sint commodi quibusdam possimus nam facilis! Minima in repudiandae obcaecati nemo eum neque impedit reprehenderit.</p>
</body>
</html>
5) sticky position
- fixed 포지션과 유사하지만 특정 뷰포트가 아닌 해당 엘리먼트를 포함하는 컨테이닝 블록(containing block)에 대한 상대적(relative) 위치에 배치됩니다. (예시 : html, body, div 등)
- 특정 엘리먼트와 겹칠 위험이 없습니다.
- 스크롤의 위치에 따라 포지션이 relative와 fixed처럼 전환됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 300px;
margin: auto;
}
.sticky {
height: 70px;
background: coral;
position: sticky;
top: 0;
text-align: center;
font-size: 2rem;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem aspernatur porro ab sapiente distinctio ad, dolorem dicta soluta placeat doloribus ipsam exercitationem sint beatae molestias saepe expedita, eos voluptatibus? Mollitia, magni harum! Neque nostrum adipisci libero qui cupiditate id, reprehenderit minus quisquam debitis vitae quam ipsam tempora, ab in aspernatur?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem aspernatur porro ab sapiente distinctio ad, dolorem dicta soluta placeat doloribus ipsam exercitationem sint beatae molestias saepe expedita, eos voluptatibus? Mollitia, magni harum! Neque nostrum adipisci libero qui cupiditate id, reprehenderit minus quisquam debitis vitae quam ipsam tempora, ab in aspernatur?</p>
<div class="sticky">
sticky div
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia doloribus, dolor eum perspiciatis ut quaerat enim, consequatur dolore inventore eius deserunt molestias porro ipsum quas, expedita reprehenderit dolorum illo? Alias.
Fuga sed cum assumenda adipisci asperiores quas nisi nihil dolorem, sunt ex deleniti eligendi temporibus nam doloremque dolore ipsam recusandae at? Aut numquam ipsum maiores cum, nisi error dolores eligendi?
Modi ea nihil eum suscipit dignissimos quos sit repellendus, dicta ab blanditiis. At eum quasi nemo distinctio cupiditate et quos aut aperiam, eius blanditiis delectus itaque? Inventore tempore mollitia consequuntur.
Architecto nihil unde nobis, laborum dolorum aut ad laudantium iusto debitis sit eos ipsam, quasi possimus ullam! Fugit laboriosam praesentium natus, recusandae veniam nostrum id, sequi saepe earum eum exercitationem.
Quasi enim debitis, ea ipsa tempore eum neque totam eaque commodi sequi aperiam reiciendis voluptatem a nihil deserunt consequuntur quibusdam inventore velit doloremque! Pariatur eos sunt, quaerat illum magnam rerum.
Expedita iure dolorum eligendi voluptatum minima dignissimos et sunt reprehenderit sit est maiores quaerat aut voluptatibus corporis, corrupti animi adipisci doloremque fugit! Eligendi veritatis minus voluptates ullam corrupti mollitia quia.
Doloremque perferendis nisi neque, atque odio distinctio iure cum, rerum excepturi quae saepe est incidunt earum ab dolor modi! Sit laboriosam ad, magnam voluptatem dolorum animi delectus quidem tempora maiores.
Harum facilis eos perspiciatis, sed esse sequi numquam doloremque quos quasi. Explicabo adipisci perferendis quia ullam rem eveniet, laudantium nesciunt aperiam. Quos molestias a corporis in praesentium, ad maiores distinctio.
Assumenda numquam quos provident aperiam at sapiente aut, beatae maiores vero, placeat facilis quam velit pariatur. Unde in, voluptas facere consectetur laborum quasi id eos eum! Officiis eveniet accusantium laboriosam.
Cumque vel voluptatum ab rerum atque iste nisi vitae quo, recusandae voluptatibus quasi, soluta eligendi sint commodi quibusdam possimus nam facilis! Minima in repudiandae obcaecati nemo eum neque impedit reprehenderit.</p>
</body>
</html>
sticky 포지션은 스크롤 전에는 위의 그림처럼 relative 포지션으로 본문의 영역을 침범하지 않고 본문과 같이 움직이다가
스크롤위에 해당 sticky 포지션이 올라오면 fixed 포지션처럼 움직이지 않고 고정됩니다.
(비교) fixed 포지션 블록과 sticky 포지션 블록을 동시에 사용하면 비교할 수 있는 페이지를 공유합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 800px;
height: 1000px;
border: black solid 5px;
margin: 30px;
display: inline-block;
color: black;
}
.scroll {
overflow:visible;
display: block;
}
.static {
width: 150px;
height: 100px;
border: none;
background: gray;
text-align: center;
line-height: 100px;
font-size: 2rem;
}
.sticky {
width: 150px;
height: 100px;
border: none;
background: coral;
text-align: center;
line-height: 100px;
position: sticky;
top: 50px;
font-size: 2rem;
}
.fixed {
width: 150px;
height: 100px;
border: none;
background: green;
text-align: center;
line-height: 100px;
position: fixed;
bottom: 150px;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="scroll">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia doloribus, dolor eum perspiciatis ut quaerat enim, consequatur dolore inventore eius deserunt molestias porro ipsum quas, expedita reprehenderit dolorum illo? Alias.
Fuga sed cum assumenda adipisci asperiores quas nisi nihil dolorem, sunt ex deleniti eligendi temporibus nam doloremque dolore ipsam recusandae at? Aut numquam ipsum maiores cum, nisi error dolores eligendi?
Modi ea nihil eum suscipit dignissimos quos sit repellendus, dicta ab blanditiis. At eum quasi nemo distinctio cupiditate et quos aut aperiam, eius blanditiis delectus itaque? Inventore tempore mollitia consequuntur.
Architecto nihil unde nobis, laborum dolorum aut ad laudantium iusto debitis sit eos ipsam, quasi possimus ullam! Fugit laboriosam praesentium natus, recusandae veniam nostrum id, sequi saepe earum eum exercitationem.
Quasi enim debitis, ea ipsa tempore eum neque totam eaque commodi sequi aperiam reiciendis voluptatem a nihil deserunt consequuntur quibusdam inventore velit doloremque! Pariatur eos sunt, quaerat illum magnam rerum.
Expedita iure dolorum eligendi voluptatum minima dignissimos et sunt reprehenderit sit est maiores quaerat aut voluptatibus corporis, corrupti animi adipisci doloremque fugit! Eligendi veritatis minus voluptates ullam corrupti mollitia quia.
Doloremque perferendis nisi neque, atque odio distinctio iure cum, rerum excepturi quae saepe est incidunt earum ab dolor modi! Sit laboriosam ad, magnam voluptatem dolorum animi delectus quidem tempora maiores.
Harum facilis eos perspiciatis, sed esse sequi numquam doloremque quos quasi. Explicabo adipisci perferendis quia ullam rem eveniet, laudantium nesciunt aperiam. Quos molestias a corporis in praesentium, ad maiores distinctio.
Assumenda numquam quos provident aperiam at sapiente aut, beatae maiores vero, placeat facilis quam velit pariatur. Unde in, voluptas facere consectetur laborum quasi id eos eum! Officiis eveniet accusantium laboriosam.
Cumque vel voluptatum ab rerum atque iste nisi vitae quo, recusandae voluptatibus quasi, soluta eligendi sint commodi quibusdam possimus nam facilis! Minima in repudiandae obcaecati nemo eum neque impedit reprehenderit.</p>
<div class="static">
static div
</div>
<div class="sticky">
sticky div
</div>
<div class="fixed">
fixed div
</div>
</div>
<div class="scroll">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia doloribus, dolor eum perspiciatis ut quaerat enim, consequatur dolore inventore eius deserunt molestias porro ipsum quas, expedita reprehenderit dolorum illo? Alias.
Fuga sed cum assumenda adipisci asperiores quas nisi nihil dolorem, sunt ex deleniti eligendi temporibus nam doloremque dolore ipsam recusandae at? Aut numquam ipsum maiores cum, nisi error dolores eligendi?
Modi ea nihil eum suscipit dignissimos quos sit repellendus, dicta ab blanditiis. At eum quasi nemo distinctio cupiditate et quos aut aperiam, eius blanditiis delectus itaque? Inventore tempore mollitia consequuntur.
Architecto nihil unde nobis, laborum dolorum aut ad laudantium iusto debitis sit eos ipsam, quasi possimus ullam! Fugit laboriosam praesentium natus, recusandae veniam nostrum id, sequi saepe earum eum exercitationem.
Quasi enim debitis, ea ipsa tempore eum neque totam eaque commodi sequi aperiam reiciendis voluptatem a nihil deserunt consequuntur quibusdam inventore velit doloremque! Pariatur eos sunt, quaerat illum magnam rerum.
Expedita iure dolorum eligendi voluptatum minima dignissimos et sunt reprehenderit sit est maiores quaerat aut voluptatibus corporis, corrupti animi adipisci doloremque fugit! Eligendi veritatis minus voluptates ullam corrupti mollitia quia.
Doloremque perferendis nisi neque, atque odio distinctio iure cum, rerum excepturi quae saepe est incidunt earum ab dolor modi! Sit laboriosam ad, magnam voluptatem dolorum animi delectus quidem tempora maiores.
Harum facilis eos perspiciatis, sed esse sequi numquam doloremque quos quasi. Explicabo adipisci perferendis quia ullam rem eveniet, laudantium nesciunt aperiam. Quos molestias a corporis in praesentium, ad maiores distinctio.
Assumenda numquam quos provident aperiam at sapiente aut, beatae maiores vero, placeat facilis quam velit pariatur. Unde in, voluptas facere consectetur laborum quasi id eos eum! Officiis eveniet accusantium laboriosam.
Cumque vel voluptatum ab rerum atque iste nisi vitae quo, recusandae voluptatibus quasi, soluta eligendi sint commodi quibusdam possimus nam facilis! Minima in repudiandae obcaecati nemo eum neque impedit reprehenderit.</p>
<div class="static">
static div
</div>
<div class="sticky">
sticky div
</div>
</div>
<div class="scroll">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia doloribus, dolor eum perspiciatis ut quaerat enim, consequatur dolore inventore eius deserunt molestias porro ipsum quas, expedita reprehenderit dolorum illo? Alias.
Fuga sed cum assumenda adipisci asperiores quas nisi nihil dolorem, sunt ex deleniti eligendi temporibus nam doloremque dolore ipsam recusandae at? Aut numquam ipsum maiores cum, nisi error dolores eligendi?
Modi ea nihil eum suscipit dignissimos quos sit repellendus, dicta ab blanditiis. At eum quasi nemo distinctio cupiditate et quos aut aperiam, eius blanditiis delectus itaque? Inventore tempore mollitia consequuntur.
Architecto nihil unde nobis, laborum dolorum aut ad laudantium iusto debitis sit eos ipsam, quasi possimus ullam! Fugit laboriosam praesentium natus, recusandae veniam nostrum id, sequi saepe earum eum exercitationem.
Quasi enim debitis, ea ipsa tempore eum neque totam eaque commodi sequi aperiam reiciendis voluptatem a nihil deserunt consequuntur quibusdam inventore velit doloremque! Pariatur eos sunt, quaerat illum magnam rerum.
Expedita iure dolorum eligendi voluptatum minima dignissimos et sunt reprehenderit sit est maiores quaerat aut voluptatibus corporis, corrupti animi adipisci doloremque fugit! Eligendi veritatis minus voluptates ullam corrupti mollitia quia.
Doloremque perferendis nisi neque, atque odio distinctio iure cum, rerum excepturi quae saepe est incidunt earum ab dolor modi! Sit laboriosam ad, magnam voluptatem dolorum animi delectus quidem tempora maiores.
Harum facilis eos perspiciatis, sed esse sequi numquam doloremque quos quasi. Explicabo adipisci perferendis quia ullam rem eveniet, laudantium nesciunt aperiam. Quos molestias a corporis in praesentium, ad maiores distinctio.
Assumenda numquam quos provident aperiam at sapiente aut, beatae maiores vero, placeat facilis quam velit pariatur. Unde in, voluptas facere consectetur laborum quasi id eos eum! Officiis eveniet accusantium laboriosam.
Cumque vel voluptatum ab rerum atque iste nisi vitae quo, recusandae voluptatibus quasi, soluta eligendi sint commodi quibusdam possimus nam facilis! Minima in repudiandae obcaecati nemo eum neque impedit reprehenderit.</p>
<div class="static">
static div
</div>
<div class="sticky">
sticky div
</div>
</div>
</body>
</html>
(정리)
해당 내용을 동영상으로도 설명을 들어보세요
'테크노트 > css' 카테고리의 다른 글
| CSS 반응형 웹(Mobile Responsiveness)의 기초 (0) | 2022.05.25 |
|---|---|
| CSS 디스플레이 타입 (display types) (0) | 2022.04.29 |
| CSS에서 사용하는 크기조정(Pixels, rem, em) (0) | 2022.04.06 |
| 초보개발자가 알아야 하는 CSS 기초 (0) | 2022.01.07 |
| CSS의 확장, 부트스트랩(bootstrap) (0) | 2021.11.05 |
댓글