CSS 레이아웃

position 속성

position이란 웹 문서 안의 요소들을 어떻게 배치할 것인지 정해주는 속성이다. static, relative, absolute, fixed, sticky 5가지 속성을 이용하여 텍스트나 이미지를 원하는 위치에 배치할 수 있다. position 속성은 상속되지 않는다.

relative

.a영역 {
	background: blue;
	position: static;

}

.b영역 {
	background: pink;
	position: relative;
	top: 0px;
	left: 100px;
}

.c영역 {
	background: green;
	position: relative;
	top: 0px;
	left: 200px;
}

↑ position: relative 속성은 static의 원래 위치부터 계산한다. top, bottom, left, right의 위치를 같이 설정할 수도 있다.
예시코드의 결과는 아래 그림과 같이 b영역은 원래 위치에서 위 0px, 왼쪽 100px 로 위치시켰고, c 영역은 원래 위치에서 위 0px, 왼쪽 200px 로 위치시켰다.

absolute

.a 영역 {
	background: blue;
	position: static;
}

.b영역 {
	background: pink;
	position: absolute;
	top: 0px;
	left: 100px;
}

.c영역 {
	background: green;
	position: absolute;
	top: 0px;
	left: 200px;
}

↑ position: absolute 속성은 static이나 relative 와 다르게 바깥 쪽에 공간이 생기지 않는다. 여기서 absolute는 상위 요소인 static 위치를 기준으로 위치가 결정 된다.

fixed

.a 영역 {
	width: 300px;
	height: 300px;
	background: blue;
	position: relative;
	top: 100px;
	left: 100px;
}

.b영역 {
	background: pink;
	position: absolute;
	top: 0px;
  	left: 100px;
}

.c영역 {
  	background: green;
  	position: fixed;
	top: 0px;
	left: 200px;
}

↑ position: fixed 속성은 브라우저 화면의 상대 위치이다. 따라서 화면이 바뀌어도 고정된 위치를 설정 할 수 있고, 상위 요소에 영향을 받지 않는다.

display 속성

display란 요소들을 어떻게 보여줄 것인지 정해주는 속성이다. none, block, inline, inline-block 네가지 속성을 사용하는데, 태그마다 기본값이 다르다.

inline

span태그, b태그, i태그, a태그 등이 해당된다. 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없다.

<style>
.inline1{
	background: #09c;
}
.inline2{
	width: 200px; /* 적용되지 않는다. */
	border: 3px solid #999;
}
</style>

<p>
	Lorem ipsum dolor sit amet, <span class="inline1">consectetur adipiscing elit</span>,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in <span class="inline2">reprehenderit</span>
	in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	Excepteur sint occaecat cupidatat non proident,
	sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

↓ 예제코드 결과

inline-block

block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다.

<style>
.inline-block1{
	display: inline-block;
	background: #09c;
	height: 45px;
}
.inline-block2{
	display: inline-block;
	width: 200px; /* 이제 적용된다. */
	border: 3px solid #999;
}
</style>

<p>
	Lorem ipsum dolor sit amet, <span class="inline-block1">consectetur adipiscing elit</span>,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in <span class="inline-block2">reprehenderit</span>
	in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	Excepteur sint occaecat cupidatat non proident,
	sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

↓ 예제코드 결과

block

div태그, p태그, h태그, li태그 등이 해당된다. 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된다. width, height 속성을 지정 할 수 있다.

<style>
.block1{ width: 300px; border: 3px solid #333 }
.block2{ width: 200px; border: 3px solid #999 }
</style>

<div class="block1">1</div>
<div class="block2">2</div>
hello

↓ 예제코드 결과