1. position 속성

: position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.

• static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
• absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
• relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
• fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
• inherit: 부모 태그의 속성값을 상속받습니다.

좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.

position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.

relative

: relative는 별도의 프로퍼티를 지정하지 않는다면 static과 다르지 않은 결과를 보여준다. static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값입니다. 해당 요소가 기본적으로 표시된 위치에서 top, right, bottom, left를 지정하면 이에 상대적으로 위치가 조정이 된다.

/* css */
.main {
	position: relative; 
	width: 350px;
  	height: 100px;
	border: 5px solid red;
}
.main div{
	padding: 10px;
	border: 3px solid blue;
	background-color: Lightgray;
}
.relative {
	position: relative; 
    top: 20px; left: 30px;
}

<!-- html -->
<div class="main">
	<div class="relative">relative 박스</div>
</div>

출력결과 :

relative 박스

absolute

: absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값입니다.

/* css */
.absolute {
	position: absolute; 
	top: 20px; left: 30px;
}

fixed

: fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다.

2. display 속성

: display 속성은 요소를 어떻게 보여줄지를 결정합니다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.

• none : 보이지 않음
• block : 블록 박스
• inline : 인라인 박스
• inline-block : block과 inline의 중간 형태

inline

: span 태그, b 태그, i 태그, a 태그 등이 이에 해당됩니다.

다른 요소들과 같은 줄에 배치되고, 콘텐츠의 너비만큼의 영역을 차지한다. 따라서 CSS에서 width, height, margin-top, margin-bottom의 속성값이 적용되지 않는다.

inline-block

: inline과 block의 특징을 모두 갖고 있다. inline 요소처럼 한줄에 배치될 수 있지만, 콘텐츠의 너비가 아닌 부여된 스타일값 만큼의 너비와 높이를 가질 수 있다.

block

: div 태그, p 태그, h 태그#, li 태그 등이 이에 해당됩니다.

기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다.

width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.

3. float 속성

: 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.

• inherit: 부모 요소에서 상속
• left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
• right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
• none : 요소를 부유시키지 않음

가운데 배치하고 싶다면 { margin: o auto; } 를 부여하면 된다.

{ margin : 0 auto; }

clear

: float 되지 않는 요소는 clear: both 속성을 이용하여 float을 해제할 수 있다.

{ clear: both; }