[inflearn] html, CSS : position 속성과 relative

1. inline-block

• display 속성을 따로 지정하지 않을 경우, 기본값은 block이다.

<style>
div {
  	width: 200px;
  	height: 200px;
}
.a { background: red; }
.b { background: green; }
.c { background: blue; }
</style>

• 위의 코드를 화면에 띄우면 다음과 같이 블록들이 쌓이게 된다.

  

• display: inline-block; 을 추가해보자.

<style>
div {
  	display: inline-block;
  	width: 200px;
  	height: 200px;
}
.a { background: red; }
.b { background: green; }
.c { background: blue; }
</style>

• 다음과 같이 블록이 div 위치를 따라 정렬된다.

2. relative

• position 속성을 통해 위치를 지정할 수 있다.
• position의 기본값은 static이다.
• position 속성을 relative로 지정해줄 경우, left, top 등 다른 속성에 지정해준 수치만큼 움직인다.
• 이때, 기준이 되는 값은 static에서 원래 위치해있던 영역이다.

.b {
	position: relative;
	left: -20px;
	top: 10px;
	background: green;
}

➡️ left의 의미

• 좌측을 기준으로 오른쪽으로 이동하게 되는 속성이다.
• 위 코드에서는 .b가 원래 위치에서 좌측으로 20만큼 움직인다.
• 기준이 되는 위치 == 'left'
  • 양수 값을 줄 경우 기준에서 이동하는 방향은 오른쪽이다. (left의 반대 방향인 우측)
  • 음수 px값을 줄 경우에는 px값만큼 기준에서 좌측으로 이동하게 된다.

⬇️ top의 의미

• 위에서 아래 방향으로 이동하게 된다.
• 양수 px값 만큼 아래로 이동하게 되는 속성이다.

3. margin

margin-left

• 지정하는 수치만큼, 좌측에 margin을 추가하게 된다.
• 지정되어 있던 position:relative; 속성을 유지시킨 상태로 적용된다.