-
position프로그래밍/HTML&CSS 2022. 9. 10. 16:36728x90
position 속성은 웹 문서 내에서 요소들의 위치를 결정하는 방식을 설정하는 속성으로 속성을 잘 사용하면 원하는 지점에 요소의 위치를 배치하는 것이 가능해진다.
left, right, top, bottom 속성은 position 속성으로 기준위치를 정하면 기준 위치로부터 얼마나 떨어질 것인지 지정하는 속성이다. 속성 값으로 떨어져있는 정도를 표기하며 보통 px 단위를 사용한다.
종류 설명 left 기준 위치에서부터 요소를 왼쪽으로 얼마나 떨어뜨릴 값 지정 right 기준 위치에서부터 요소를 오른쪽으로 얼마나 떨어뜨릴 값 지정 top 기준 위치에서부터 요소를 위쪽으로 얼마나 떨어뜨릴 값 지정 bottom 기준 위치에서부터 요소를 아래쪽으로 얼마나 떨어뜨릴 값 지정 position 속성 값의 종류는 4가지로 static(기본값), relative(상대위치), fixed(고정위치), absolute(절대위치) 결정 방식이 있다.
종류 설명 static 기본값으로 HTML 요소의 위치를 결정하는 기본적인 방식으로 top, left, right, botton 속성값을 사용하지 않고 단순히 웹 페이지 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식이다. relative HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식으로 top, left, right, botton 속성값을 사용하여 위치를 지정한다. fixed 뷰 포트를 기준으로 위치를 설정하는 방식으로 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치한다. absolute 뷰 포트를 기준으로 위치를 결정하는 방식으로조상요소를 기준으로 위치를 결정하게 된다. 위치가 설정된 조상요소를 가지지 않으면 body 요소를 기준으로 위치가 결정된다. 뷰 포트는 사용자에게 보여지는 영역을 의미하며, 브라우저의 크기를 바꿔서 뷰포트의 크기를 변화시킬 수 있다.
relative
<!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>상대위치 지정방식</title> <style> .relative1{ width: 200px; background-color: deeppink; margin-left: 50px; padding: 20px; } .relative2{ position: relative; width: 400px; top: 50px; left: 100px; background-color: deepskyblue; padding: 20px; } </style> </head> <body> <h2>상대위치 지정방식</h2> <div class="relative1">상대위치 지정방식1</div> <div class="relative2">상대위치 지정방식2</div> </body> </html>
상대위치 지정방식2 박스는 relative 속성이 적용되어 기본 위치에서 위로부터 50px, 왼쪽으로부터 100px 만큼 떨어지도록 표현된다.
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>고정취치지정방식</title> <style> #fx{ position: fixed; top: 10px; right: 10px; width: 100px; height: 100px; background-color: gold; } #content{ width: 800px; } p{ line-height: 30px; } </style> </head> <body> <h2>고정위치지정방식</h2> <div id="fx"></div> <div id="content"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, iure? Ipsam dolore accusamus rerum voluptatibus blanditiis eum quae maiores dolor. Vel magnam doloremque consectetur, fuga distinctio id quasi dolorum nisi?</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, iure? Ipsam dolore accusamus rerum voluptatibus blanditiis eum quae maiores dolor. Vel magnam doloremque consectetur, fuga distinctio id quasi dolorum nisi?</p> ... <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, iure? Ipsam dolore accusamus rerum voluptatibus blanditiis eum quae maiores dolor. Vel magnam doloremque consectetur, fuga distinctio id quasi dolorum nisi?</p> </div> </body> </html>
fx 아이디 박스의 위치가 디스플레이 화면상의 표시 영역을 기준으로 우측 상단에서 위쪽으로 10px, 오른쪽으로 10px 만큼 떨어져있다.
absolute
<!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>절대위치 지정방식</title> <style> #wrap{ position: relative; width: 500px; height: 500px; border: 3px solid red; } .box{ position: absolute; width: 50px; height: 50px; background-color: rgba(255, 20, 145, 0.336); } #ab1{ top: 0; right: 0; } #ab2{ bottom: 0; right: 0; } #ab3{ bottom: 0; left: 0; } #ab4{ top: 200px; left: 200px; } </style> </head> <body> <h2>절대위치 지정방식</h2> <div id="wrap"> <div class="box" id="ab1"></div> <div class="box" id="ab2"></div> <div class="box" id="ab3"></div> <div class="box" id="ab4"></div> <div class="box" id="ab5"></div> </div> </body> </html>
각 박스 요소는 상위요소을 기준으로 위치를 정할 수 있다.
728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
2단 레이아웃 (0) 2022.09.12 z-index (0) 2022.09.11 float (0) 2022.09.09 디스플레이(display) (0) 2022.09.08 박스 사이징(box-sizing) (0) 2022.09.07