// position
- 요소의 위치를 정하는 방법을 지정하는 속성
- 좌표값 사용 > 위치 지정
- x(left), y(top)
~ left / right > x
~ top / bottom > y
- 좌표를 지정하는 방식을 여러 개 제공
- 기본 값 : static
~ static
- 정적 좌표값
- 워드 프로세스 방식 > FlowLayout 방식
> 코딩 순서대로 출력되는 방식
> 먼저 코딩하면 위에 배치, 왼쪽에 배치
> 나중에 코딩하면 아래에 배치, 오른쪽에 배치
~ absolute★
- 절대 좌표
- 문서의 좌측 상단을 기준으로 한다.(X)
> 자신의 직계 조상 중 가장 처음으로 만나는 태그 중 position이 static이 아닌 태그를 기준으로 한다.
- 원래 있던 공간이 사라진다.
~ left, top
~ relative★
- 상대 좌표값
- 자신의 위치를 기준으로 한다.
- 원래 있던 공간이 그대로 유지된다.
~ left, top
~ fixed☆
- 고정 좌표
- 브라우저 창(화면)의 좌측 상단을 기준으로 한다.
- 스크롤에 반응하지 않고 그대로 유지된다.
- 원래 있던 공간이 사라진다.
~ left, top
~ sticky☆
- 고정 좌표
- 브라우저 창(화면)의 좌측 상단을 기준으로 한다.
- 스크롤에 반응하지 않고 그대로 유지된다.
- 원래 있던 공간이 그대로 유지된다.
- 화면에 보일 때는 static처럼 동작 + 사라질 때 fixed처럼 동작
~ left, top
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.headline {
color: rgb(255, 0, 0);
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 50px;
font-weight: bold;
font-style: oblique;
position: absolute;
}
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 40px;
font-weight: 100;
white-space: normal;
letter-spacing: 1.5px;
word-spacing: 3px;
word-break:keep-all;
font-variant: small-caps;
}
.child {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
position: absolute;
}
.sibling {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
}
</style>
</head>
<body>
<br>
<h1 class="headline"> 00시 경기</h1>
<div class="parent" >
<span style="text-decoration-line: underline; text-decoration-color:rgb(255, 75, 75); text-decoration-style: wavy; display: block">Arsenal</span>
<span style="vertical-align: -5px;"> vs </span>
<span style="display: block" >Bournemouth</span><br>
<div class="child">
추가 시간의 추추가 시간에 극장골을 넣어서 아스날이 역전승했습니다. 0:2로 지다가 후반전에 3:2를 만들어서 이긴.... 온몸에 소름이 돋았습니다. 절대 포기하지 않는 그 의지에 박수를 보냅니다. 직관 가고 싶다..
</div>
<div class="sibling">
벌써 주말이 끝나갑니다. 내일부터는 자바 콘솔 프로젝트를 시작합니다.. 매우 걱정ㅠ<span style="vertical-align: -10px;">^</span>ㅠ
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.headline {
color: rgb(255, 0, 0);
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 50px;
font-weight: bold;
font-style: oblique;
position: absolute;
}
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 40px;
font-weight: 100;
white-space: normal;
letter-spacing: 1.5px;
word-spacing: 3px;
word-break:keep-all;
font-variant: small-caps;
}
.child {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
position: relative;
}
.sibling {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
}
</style>
</head>
<body>
<br>
<h1 class="headline"> 00시 경기</h1>
<div class="parent" >
<span style="text-decoration-line: underline; text-decoration-color:rgb(255, 75, 75); text-decoration-style: wavy; display: block">Arsenal</span>
<span style="vertical-align: -5px;"> vs </span>
<span style="display: block" >Bournemouth</span><br>
<div class="child">
추가 시간의 추추가 시간에 극장골을 넣어서 아스날이 역전승했습니다. 0:2로 지다가 후반전에 3:2를 만들어서 이긴.... 온몸에 소름이 돋았습니다. 절대 포기하지 않는 그 의지에 박수를 보냅니다. 직관 가고 싶다..
</div>
<div class="sibling">
벌써 주말이 끝나갑니다. 내일부터는 자바 콘솔 프로젝트를 시작합니다.. 매우 걱정ㅠ<span style="vertical-align: -10px;">^</span>ㅠ
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.headline {
color: rgb(255, 0, 0);
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 50px;
font-weight: bold;
font-style: oblique;
position: absolute;
}
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 40px;
font-weight: 100;
white-space: normal;
letter-spacing: 1.5px;
word-spacing: 3px;
word-break:keep-all;
font-variant: small-caps;
}
.child {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
position: absolute;
}
.sibling {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
}
</style>
</head>
<body>
<br>
<h1 class="headline"> 00시 경기</h1>
<div class="parent" >
<span style="text-decoration-line: underline; text-decoration-color:rgb(255, 75, 75); text-decoration-style: wavy; display: block">Arsenal</span>
<span style="vertical-align: -5px;"> vs </span>
<span style="display: block" >Bournemouth</span><br>
<div class="child" style="top: 40px; bottom: 50px; left: 30px; right: 50px;">
추가 시간의 추추가 시간에 극장골을 넣어서 아스날이 역전승했습니다. 0:2로 지다가 후반전에 3:2를 만들어서 이긴.... 온몸에 소름이 돋았습니다. 절대 포기하지 않는 그 의지에 박수를 보냅니다. 직관 가고 싶다..
</div>
<div class="sibling">
벌써 주말이 끝나갑니다. 내일부터는 자바 콘솔 프로젝트를 시작합니다.. 매우 걱정ㅠ<span style="vertical-align: -10px;">^</span>ㅠ
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.headline {
color: rgb(255, 0, 0);
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 50px;
font-weight: bold;
font-style: oblique;
position: absolute;
}
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 40px;
font-weight: 100;
white-space: normal;
letter-spacing: 1.5px;
word-spacing: 3px;
word-break:keep-all;
font-variant: small-caps;
}
.child {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
position: relative;
}
.sibling {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
}
</style>
</head>
<body>
<br>
<h1 class="headline"> 00시 경기</h1>
<div class="parent" >
<span style="text-decoration-line: underline; text-decoration-color:rgb(255, 75, 75); text-decoration-style: wavy; display: block">Arsenal</span>
<span style="vertical-align: -5px;"> vs </span>
<span style="display: block" >Bournemouth</span><br>
<div class="child" style="top: 40px; bottom: 50px; left: 30px; right: 50px;">
추가 시간의 추추가 시간에 극장골을 넣어서 아스날이 역전승했습니다. 0:2로 지다가 후반전에 3:2를 만들어서 이긴.... 온몸에 소름이 돋았습니다. 절대 포기하지 않는 그 의지에 박수를 보냅니다. 직관 가고 싶다..
</div>
<div class="sibling">
벌써 주말이 끝나갑니다. 내일부터는 자바 콘솔 프로젝트를 시작합니다.. 매우 걱정ㅠ<span style="vertical-align: -10px;">^</span>ㅠ
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>content</title>
<style>
.headline {
color: rgb(255, 0, 0);
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 50px;
font-weight: bold;
font-style: oblique;
position: absolute;
}
.parent {
font-family: 강원교육새음 Medium, sans-serif;
line-height: 1;
font-size: 40px;
font-weight: 100;
white-space: normal;
letter-spacing: 1.5px;
word-spacing: 3px;
word-break:keep-all;
font-variant: small-caps;
}
.child {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
position: static;
}
.sibling {
font-size: 30px;
letter-spacing: 1px;
text-indent: 10px;
}
</style>
</head>
<body>
<br>
<h1 class="headline"> 00시 경기</h1>
<div class="parent" >
<span style="text-decoration-line: underline; text-decoration-color:rgb(255, 75, 75); text-decoration-style: wavy; display: block">Arsenal</span>
<span style="vertical-align: -5px;"> vs </span>
<span style="display: block" >Bournemouth</span><br>
<div class="child" style="top: 40px; bottom: 50px; left: 30px; right: 50px;">
추가 시간의 추추가 시간에 극장골을 넣어서 아스날이 역전승했습니다. 0:2로 지다가 후반전에 3:2를 만들어서 이긴.... 온몸에 소름이 돋았습니다. 절대 포기하지 않는 그 의지에 박수를 보냅니다. 직관 가고 싶다..
</div>
<div class="sibling">
벌써 주말이 끝나갑니다. 내일부터는 자바 콘솔 프로젝트를 시작합니다.. 매우 걱정ㅠ<span style="vertical-align: -10px;">^</span>ㅠ
</div>
</body>
</html>- 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>Document</title>
<style>
.box {
border: 5px solid black;
width: 200px;
height: 0px;
}
#box1 { background-color: tomato; }
#box2 {
background-color: gold;
position: absolute;
left: 0px;
top:0px;
}
#box3 { background-color: cornflowerblue; }
</style>
</head>
<body>
<h1>absolute</h1>
<div id="b1">
상자1
<div id="b2">
상자2
<div id="b3">
상자3
</div>
</div>
</div>
<h1>position</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti quas ea, libero voluptatem commodi similique repellendus sint blanditiis non vero perspiciatis? Illo debitis itaque voluptatum ullam harum, laboriosam error laudantium?</p>
<p>Esse doloribus, rerum placeat nesciunt minima repudiandae dolorem aliquam quod maxime cum veniam quo. Ducimus excepturi inventore nemo cumque, unde adipisci, quasi non ipsum alias ab, quo blanditiis doloremque deserunt?</p>
<p>Perspiciatis, maiores quaerat! Possimus odio, veritatis labore ipsum maxime facilis quibusdam beatae fuga nulla minima alias unde doloribus tempore iste accusantium neque reiciendis ex. Similique maiores mollitia doloremque sunt repellat.</p>
<p>Soluta neque beatae eaque veritatis fuga nam adipisci. Excepturi, quisquam earum eum omnis enim nobis tenetur cum, similique culpa cupiditate expedita maiores dolores, molestias fugiat repellat itaque suscipit iste modi?</p>
<p>Tempore quasi sit explicabo, accusantium, libero rerum minima nulla dolorum perferendis eius repudiandae illum. Veritatis magnam recusandae cum reprehenderit labore ratione ut nemo provident doloribus pariatur. Impedit consequatur culpa cupiditate.</p>
<p>Libero, saepe. Cupiditate harum necessitatibus placeat nihil blanditiis delectus perferendis, quidem beatae asperiores, veniam eligendi aut commodi ipsum sit fugit saepe incidunt voluptates quo voluptate non illum! Consequatur, blanditiis? Ipsa!</p>
<p>Porro assumenda quo quibusdam nulla provident sapiente a dignissimos id distinctio nostrum facilis, temporibus esse consequuntur deleniti autem perspiciatis officia. Autem aperiam excepturi corrupti non, consequatur labore delectus porro similique!</p>
<p>Laborum reiciendis, exercitationem, hic qui sint doloribus laboriosam, laudantium dolor totam rem voluptates quae molestiae nulla! Itaque, excepturi facere ab vero natus commodi, quia maiores cum dignissimos possimus in rerum!</p>
<p>Dolores sunt dicta et doloribus. Odio in repellendus obcaecati sed vero delectus voluptatem nemo praesentium dicta nostrum ratione ad veritatis autem sequi culpa deserunt at explicabo, earum beatae! Praesentium, error.</p>
<p>Dolore ut, molestiae culpa nihil id in deleniti voluptatum facilis error? Placeat saepe reprehenderit, dolores delectus eligendi ipsam illum hic, voluptates reiciendis minima iste odit porro quasi dicta nemo perferendis!</p>
</body>
</html>- 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>Document</title>
<style>
.box {
border: 5px solid black;
width: 200px;
height: 200px;
}
#box1 { background-color: tomato; }
#box2 {
background-color: gold;
position:relative;
left: 200px;
top: 0px;
}
#box3 { background-color: cornflowerblue; }
</style>
</head>
<body>
<h1>absolute</h1>
<div id="b1">
상자1
<div id="b2">
상자2
<div id="b3">
상자3
</div>
</div>
</div>
<h1>position</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti quas ea, libero voluptatem commodi similique repellendus sint blanditiis non vero perspiciatis? Illo debitis itaque voluptatum ullam harum, laboriosam error laudantium?</p>
<p>Esse doloribus, rerum placeat nesciunt minima repudiandae dolorem aliquam quod maxime cum veniam quo. Ducimus excepturi inventore nemo cumque, unde adipisci, quasi non ipsum alias ab, quo blanditiis doloremque deserunt?</p>
<p>Perspiciatis, maiores quaerat! Possimus odio, veritatis labore ipsum maxime facilis quibusdam beatae fuga nulla minima alias unde doloribus tempore iste accusantium neque reiciendis ex. Similique maiores mollitia doloremque sunt repellat.</p>
<p>Soluta neque beatae eaque veritatis fuga nam adipisci. Excepturi, quisquam earum eum omnis enim nobis tenetur cum, similique culpa cupiditate expedita maiores dolores, molestias fugiat repellat itaque suscipit iste modi?</p>
<p>Tempore quasi sit explicabo, accusantium, libero rerum minima nulla dolorum perferendis eius repudiandae illum. Veritatis magnam recusandae cum reprehenderit labore ratione ut nemo provident doloribus pariatur. Impedit consequatur culpa cupiditate.</p>
<p>Libero, saepe. Cupiditate harum necessitatibus placeat nihil blanditiis delectus perferendis, quidem beatae asperiores, veniam eligendi aut commodi ipsum sit fugit saepe incidunt voluptates quo voluptate non illum! Consequatur, blanditiis? Ipsa!</p>
<p>Porro assumenda quo quibusdam nulla provident sapiente a dignissimos id distinctio nostrum facilis, temporibus esse consequuntur deleniti autem perspiciatis officia. Autem aperiam excepturi corrupti non, consequatur labore delectus porro similique!</p>
<p>Laborum reiciendis, exercitationem, hic qui sint doloribus laboriosam, laudantium dolor totam rem voluptates quae molestiae nulla! Itaque, excepturi facere ab vero natus commodi, quia maiores cum dignissimos possimus in rerum!</p>
<p>Dolores sunt dicta et doloribus. Odio in repellendus obcaecati sed vero delectus voluptatem nemo praesentium dicta nostrum ratione ad veritatis autem sequi culpa deserunt at explicabo, earum beatae! Praesentium, error.</p>
<p>Dolore ut, molestiae culpa nihil id in deleniti voluptatum facilis error? Placeat saepe reprehenderit, dolores delectus eligendi ipsam illum hic, voluptates reiciendis minima iste odit porro quasi dicta nemo perferendis!</p>
</body>
</html>
'클라이언트 > CSS' 카테고리의 다른 글
| CSS 속성 - 전환(Transition) (0) | 2023.11.06 |
|---|---|
| CSS 속성 - z-index (0) | 2023.11.06 |
| CSS 속성 - Grid (0) | 2023.11.06 |
| CSS 속성 - Float (0) | 2023.11.06 |
| CSS 속성 - Flex (0) | 2023.11.06 |
