티스토리 뷰
1. 정적 위치 지정방식
- static position (기본값)
- HTML 요소의 위치를 결정하는 기본적인 방식
- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식
2. 상대 위치 지정방식
- relative position
- HTML 요소의 기본 위치 (정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
- top, left, right, bottom 속성값을 사용하여 재설정함
<html lang="en">
<head>
<title>상대 위치 지정방식</title>
<style>
div {width: 200px; padding: 20px;}
.relative1 {background-color: lightblue;}
.relative2 {
background-color: lightcoral;
position: relative;
left: 200px; /* 왼쪽으로부터 200px 떨어뜨리기 */
top: 100px; /* 위쪽으로부터 100px 떨어뜨리기 */
}
.relative3 {
background-color: gold;
position: relative;
right: 100px;
bottom: 50px;
}
</style>
</head>
<body>
<h2>상대 위치 지정방식</h2>
<div class="relative1">상대 위치 지정방식1</div>
<div class="relative2">상대 위치 지정방식2</div>
<div class="relative3">상대 위치 지정방식3</div>
</body>
</html>
3. 고정 위치 지정방식
- fixed position
- 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
- 뷰포트를 기준으로 위치를 설정하는 방식
- top, left, right, bottom 속성값을 사용하여 재설정함
<html lang="en">
<head>
<title>고정 위치 지정방식</title>
<style>
#fx {
position: fixed;
width: 100px;
height: 200px;
background-color: gold;
right: 10px; /* 브라우저 창 오른쪽으로부터 10px 떨어뜨리기 */
bottom: 10px; /* 브라우저 창 아래로부터 10px 떨어뜨리기 */
}
</style>
</head>
<body>
<h2>고정 위치 지정방식</h2>
<div id="fx"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa non perspiciatis in temporibus iste alias odit numquam commodi sequi ipsam modi nemo ad corrupti, dolore ex dicta cupiditate harum dignissimos.</p>
</div>
</body>
</html>
4. 부모태그를 이용한 고정 위치 지정방식 (스티키 위치)
- 스티키 위치는 요소가 스크롤될 때 처음에는 정적 위치에 있지만, 특정 스크롤 지점에 도달하면 고정 위치로 변하는 특성
- 상단 메뉴나 사이드바와 같은 항목을 화면에 고정하는 데 유용하게 사용
<html lang="en">
<head>
<title>스티키 지정방식</title>
<style>
html, body {margin: 0; padding: 0;}
.header {height: 80px; background-color: lightcyan;}
.container {
display: flex;
flex-flow: row nowrap;
}
.content {
width: 80%;
height: 800px;
background-color: lightsalmon;
}
.sidebar{
position: sticky;
top: 30px; /* 부모로부터 얼마나 떨어질 것인지 */
width: 20%;
background-color: lightgreen;
height: 400px;
}
.footer {
background-color: brown;
height: 100px;
}
</style>
</head>
<body>
<h2>스티키 지정방식</h2>
<header class="header">헤더</header>
<main class="container">
<section class="content">메인 컨텐츠</section>
<aside class="sidebar">Sticky 적용하기</aside>
</main>
<footer class="footer">푸터</footer>
</body>
</html>
5. 절대 위치 지정방식
- absolute position
- 뷰포트를 기준으로 위치를 설정하는 방식
- 조상요소를 기준으로 위치를 설정할 수 있음
- 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 설정
- 조상요소를 기준으로 위치를 설정하려면 조상요소가 반드시 정적 위치 지정방식이 아니여야 함
<html lang="en">
<head>
<title>절대 위치 지정방식</title>
<style>
#wrap {
width: 500px;
height: 500px;
border: 3px solid red;
position: relative; /* 부모요소가 정적방식이 아니어야 함 */
}
.box {
position: absolute;
width: 50px;
height: 50px;
background-color: darkgreen;
}
#ab1 {top: 0; right: 0; background-color: blue;} /* 부모요소의 상단,오른쪽으로부터 0px 떨어뜨림 */
#ab2 {bottom: 0; left: 0; background-color: red;}
#ab3 {bottom: 0; right: 0; background-color: yellow;}
#ab4 {top: 100px; left: 150px; background-color: green;}
#ab5 {background-color: black;}
</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>
'Web' 카테고리의 다른 글
| 11. Html Css 미디어 쿼리 (0) | 2024.04.12 |
|---|---|
| 10. Html Css 레이아웃 (z-index, float, clear, n단 레이아웃) (1) | 2024.04.12 |
| 8. Html Css 폼 꾸미기 (패딩, 테두리, 마진, 박스사이징, 디스플레이) (1) | 2024.04.11 |
| 7. Html Css 배경 (0) | 2024.04.11 |
| 6. Html Css 텍스트 (1) | 2024.04.11 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 줄 간격
- 로또번호생성
- __call__
- EPL정보프로그램
- 솔로의식탁
- 파이썬SQL연동
- 박스사이징
- Enclosing
- CSS
- 변수
- 상대위치
- JavaScript
- 셋
- 고정위치
- 클래스문
- HTML
- 닷홈
- trasform
- animation적용
- 출력
- FOR
- DB프로그램만들기
- DB단어장
- Python
- MySQL
- html이론
- 폼
- 리스트
- MySQLdb
- 절대위치
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
글 보관함