1. Position

• position: (자리 잡고 있는) 위치, (있어야 할) 자리, 제자리
  사전적 의미 그대로 position은 태그들의 위치를 결정하는 CSS 속성이다.
• 복잡한 레이아웃을 가능하게 해주는 요소이다.
• position에서는 4가지의 값이 있다.

• Position
  • static
  • relative
  • absolute
  • fixed

1) static

• position 속성의 기본값으로 요소를 문서 흐름에 맞추어 배치하는 속성값이다.
• 각 요소들이 가진 고유의 특징, 주로 display 속성에 따라 위치가 결정되기 때문에 다른 값들에 비하여 두드러지는 특징이 없으며 거의 사용되지 않는다.

2) relative

• 요소가 원래 위치 해야 하는 지점(static 상태)를 기준으로 position을 설정하는 방식이다.
• top, right, bottom, left의 값으로 위치를 이동시킬 수 있다.

3) absolute

• 말그대로 절대적인 위치에 요소를 자리하게 하는 방식의 속성값이다.
• 문서의 흐름과 상관 없이 부모 요소에 대해 절대적인 위치를 갖는다.
• 주로 부모 요소에는 relative 값이 주어진다. 만약 이러한 특정 부모가 없다면 body를 기준으로 위치한다.
• top, right, bottom, left의 값으로 위치를 이동시킬 수 있다.

4. fixed

• absolute 속성값과 마찬가지로 문서의 흐름과는 상관없이 위치를 좌표로 결정하는 속성값이다.
• 그러나 absolute와 다르게 부모를 필요로 하지 않는다.
• 부모 요소 대신 브라우저 창이 기준이 되어 위치를 지정할 수 있다.
• 그렇기 때문에 화면을 어디로 이동 혹은 스크롤 하더라도 같은 자리게 고정되어 위치한다.

---

2. Display

• display 속성은 요소를 어떻게 표시할지를 결정하는 속성이다.

• 모든 요소들은 기본적으로 고유의 display 값을 가지고 있는데 display 속성을 통해 종류를 변환할 수가 있다. block을 inline으로, inline을 block으로.

• display는 크게 block과 inline 속성값으로 나누어진다.

1) block

• 대부분의 html 요소는 block 요소이다.
• <header>, <footer>, <p>, <li>, <table>, <div>, <h1>등이 block 요소에 해당한다.
• block 요소는 기본적으로 가로 영역을 100% 차지하기 때문에 자동으로 앞뒤 줄바꿈이 된다.
• 따라서 display: block을 입력한다면 위와 같은 특징을 가진 요소처럼 표현된다.

2) inline

• 문자 그대로 줄 속에 넣는 요소라고 생각하면 된다. inline 요소들은 해당하는 줄에서 요소에게 주어진 content 길이만큼의 영역을 차지한다. 높이 또한 폰트의 크기만큼 차지한다.
• 한 줄이 100이고 inline요소의 길이가 30이라면 70만큼의 영역이 공백이 된다.
• 그렇기 때문에 줄바꿈이 자동으로 되지 않고 inline 요소를 연달아 놓는다면 한 줄에 표현되게 된다.
• <a>, <span>, <b> 등 특정 문자열을 선택할 때 사용하는 태그가 inline 요소에 해당한다.
• width와 height를 명시하는 것이 어려우며, margin은 위아래에 적용되지 않는다.

3)inline-block

• 보이는 것처럼 inline과 block의 특징을 모두 갖춘 요소이다.
• 요소의 기본 값이 아니라 CSS를 통해 속성값을 부여해주어야 한다.
• inline-block의 특징

  • block처럼 줄바꿈이 일어나지 않는다.
  • 영역을 지정할 수가 있다.(width, height 지정 가능)
  • 그러나 영역을 지정하지 않는 경우 inline과 같이 content 길이만큼 영역을 차지한다.

  ---

3. Float

• float는 정렬하기 위해 사용되는 속성이다. 레이아웃에
  있어 중요한 속성 중 하나이다.

• 이전에는 레이아웃을 잡기 위하여 많이 사용하였으나 현재에는 flex 속성을 이용하는 경우가 많다.

• left, right, none의 값을 지정할 수 있다.

1) left, right, none

• 말그대로 왼쪽, 오른쪽 지정한 속성값에 따라 왼쪽에 띄우느냐 오른쪽에 띄우느냐가 결정된다.none은 띄우지 않는 기본 값을 의미한다.

2) 특징

• float 속성을 가진 요소의 부모는 해당 요소의 높이를 인지하지 못해서 부모를 벗어난다는 문제가 있다. 해결을 위해서는 clear, overflow: hidden; 을 주는 방법이 있다.
• 절대 위치 요소는 float 속성을 무시한다.
• left와 right를 통해 속성을 지정시 display 속성은 무시된다. 그러나 none은 제외된다.