1. Position

HTML에서는 static 포지션이 기본값이다. 이는 HTML이 작성된 순서대로 나열이 되어있는 형태를 의미한다. 원하는 위치에 요소들을 배치하기 위해서는 relative, absolute, fixed와 같은 position 속성을 부여해주어야 한다.

relative

relative는 별도의 프로퍼티를 지정하지 않는다면 static과 다르지 않은 결과를 보여준다. 해당 요소가 기본적으로 표시된 위치에서 top, right, bottom, left를 지정하면 이에 상대적으로 위치가 조정이 된다고 생각하면 된다.

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

absolute

absolute는 기본적으로 표시된 위치에서 상대적으로 위치가 지정되는 것이 아니라, 가장 가까운 부모 엘리먼트에 상대적으로 위치가 지정된다고 생각하면 된다. 일반적으로 부모 엘리먼트는 relative 속성값을 부여한다. 기준으로 삼을 수 있는 부모 델리먼트가 없다면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다는 점에서 fixed와 비슷하게 동작한다. "위치가 지정된" 엘리먼트는 position이 static으로 지정되지 않은 엘리먼트이다.

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

fixed

fixed 뷰포트에 상대적으로 위치가 지정된다. 페이지가 스크롤되더라도 늘 같은 곳에 위치하는데, 일반적인 웹페이지의 top ↑ 버튼이나 챗봇 버튼을 생각하면 쉽다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

2. Display

inline

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

li { display: inline; }

inline-block

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

li { display: inline-block; }

block

요소가 한줄 전체를 차지하게 된다. 즉 화면 크기의 전체 가로폭을 차지한다는 특성이 있다. width, height 속성을 부여해주면 그 너비만큼의 영역을 차지한다.

span { display: block; }

3. Float

이름에서 알 수 있듯이 block 요소를 이미지와 함께 배치하여 띄우기 위해 사용된다. 기본적으로 HTML 페이지 레이아웃은 수직 흐름(vertical flow)이다. 이를 수평 흐름으로 바꿔주기 위해 사용한다고 생각하면 된다.

inherit : 부모 요소에서 상속한다.
left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.
none : 요소를 부유시키지 않음

• left와 right를 통해 부유속성을 지정시 display는 무시된다. (none은 제외)
• 가운데 배치하고 싶다면 margin: o auto; 를 부여하면 된다.

clear

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

.wraper {
  width: 400px;
}

.navigation {
  float: left;
  width: 100px;
  background-color: aliceblue;
}

.content {
  float: right;
  width: 300px;
  background-color: white;
}

.footer {
  clear: both;
  background-color: gray;
  color: white;
}