CSS Positioning에 본격적으로 들어가기 앞서 기억해야 할 점은,
CSS를 적용하지 않는다고 하더라도
HTML의 기본값이 이미 존재한다는 사실이다.
이 사실을 잊어서는 안된다.
HTML Positioning Rules
따라서 먼저 HTML에서 화면을 보여주는 규칙을 간략하게 살펴보자.
규칙 1
Content is everything!!
들어가는 내용, content가 중요하다.
앞서 살펴봤던 display 속성 중 inline 같은 경우에는,
들어가는 content의 width, height 만큼 상자가 만들어진다.
display 속성 중 block 역시,
비록 width는 화면 전체를 차지한다고 하더라도,
height 만큼은 font에 의해서 결정된다.
규칙2
Order comes from Code
HTML 코드를 적는 순서대로 화면에 출력된다.
<h1>순서대로</h1>
<img src="ann.jpg" alt="anne">
<p>적읍시다.</p>
규칙3
Childeren sit on parents
위계가 있다.
<div>
<h1>A <span>Berorong</span> Snap</h1>
</div>div {
background-color: red;
height:300px;
width:300px;
}
span {
text-decoration: underline;
}포함관계를 설명할 때, 부모와 자식의 표현을 자주 사용한다.
부모는 parents, 자식은 children이다.
div와 h1 중 더 큰 개념인 div가 parents가 되고,
h1이 children이 된다.
또 부모 위에 자식이 앉아 있는 모습이 일반적인 것처럼
위의 코드에서도 div 위에 h1이 얹어져 있다.
h1 위에 span이 얹어져 있다.
만약 3D로 옆으로 바라볼 수 있다면
div가 가장 바닥에, 그 위를 h1이, 가장 꼭대기에는 span이 있다고 할 수 있겠다.
CSS Positioning Rules
그러면 지금부터 CSS Positioning에 대해 알아보자.
1) Static Position 정적 포지션
기본값이다.
만약 적용되는 CSS가 없을 시에 보여지는 그대로의 값이다.
2) Relative Position 상대 포지션
- 좌표coordinates
Top, Bottom, Left, Right이다.
- 의미
from '~로부터'
- 특징
relative position은 다른 요소에 영향을 주지 않고, 독립적으로 움직인다.
<h1>순서대로</h1>
<p>적읍시다.</p>
<img src="ann.jpg" alt="anne">img {
position: relative;
left: 30px;
}
예시를 확인해봅시다.
원본입니다.
left:30px는 from left의 의미이다.
기준인 왼쪽으로부터 30px 만큼 이동한다.
또 다른 예시를 보자.
html code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
</body>
</html>css code
.red {
width: 200px;
height: 200px;
background-color: red;
}
.blue {
width: 200px;
height: 200px;
background-color: blue;
}.yellow {
width: 200px;
height: 200px;
background-color: yellow;
}
.red {
width: 200px;
height: 200px;
background-color: red;
position: relative;
display: inline-block;
}
.blue {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
display: inline-block;
}
.yellow {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
display: inline-block;
}
.red {
width: 200px;
height: 200px;
background-color: red;
position: relative;
display: inline-block;
left: 200px;
top:200px;
}
.blue {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
display: inline-block;
right:200px;
}
.yellow {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
display: inline-block;
top:400px;
}