CSS | Layout(position, display, float)

position

position은 태그들의 위치를 결정한다.

static

• static 모든 태그들의 기본값(default)이다.
• 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

relative

• relative는 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작한다.
• top, right, bottom, left를 지정하면 기존 static이었을 때의 위치를 기준으로 이동한다.
• relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동한다. 바깥쪽으로 이동하게 하고 싶으면 음수(-)를 주면 된다.
• 페이지 레이아웃에서 요소가 차지하는 공간은 static일때와 같고, 다른 요소에는 영향을 주지 않는다.

absolute

• absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.

fixed

• 스크롤되더라도 특정 위치에 해당 엘리먼트를 고정하고 싶을 때 사용한다.
• relative와 마찬가지로 top, right, bottom, left 프로퍼티가 사용된다.

참고사이트 :
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
https://velog.io/@woohyun_park/position

---

display

태그마다 default로 지정되어있는 속성이 다르며, default가 block이여도 inline으로 변경 가능하다.

inline

• inline은 태그를 줄바꿈 되지 않게 지정해준다. inline인 요소 뒤에 나오는 태그 또한 줄바꿈이 되지 않고 나오게 되며 width와 height을 지정할 수 없다. span과 a 엘리먼트가 대표적인 인라인 엘리먼트이다.

block

• 블록 레벨 엘리먼트는 새 줄에서 시작하고 좌우로 최대로 늘어난다. div, p, form은 블록 레벨 엘리먼트이고, HTML5에서 header와 footer, section이 추가되었다.

inline-block

• inline-block은 inline과 block의 중간에 있는 형태로, 요소는 inline인데 내부는 block처럼 표시한다. button과 select가 대표적인 인라인 블록 엔리먼트이다.

참고사이트 :
https://velog.io/@jun17114/Position-Display
https://ko.learnlayout.com/
http://www.danielledeveloper.com/inline-vs-block-vs-inline-block-css/

---

float

float도 정렬 방법 중의 하나로 이름 그대로 떠있다는 의미이다. 위에서 아래로, 왼쪽에서 오른쪽으로 태그들이 순서대로 배치되다가 그 중에 한 태그가 공중에 붕 뜨는 것이다. 그리고 그 뒤의 태그들은 그 자리를 메우려한다. 따라서 float을 주면 더는 width가 100%가 아니다.

float로 왼쪽, 오른쪽 배치하기

• float 속성에는 left, right, none(기본값) 가운데 하나를 값으로 줄 수 있다.

float 해제하기

• float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 내용이 부모를 벗어날 경우가 있다. 이 경우 다음과 같은 방법으로 해결할 수 있다.

  방법 1. float가 적용된 태그 뒤에 새로운 태그(아무거나 상관없다)를 만들어 clear 속성을 적용한다. left, right, both 프로퍼티가 있다.

  방법 2. 바깥쪽 태그에 overflow: hidden;을 준다.

  방법 3. 바깥쪽 태그를 float 시킨다. 그러면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 된다. 하지만 float가 되어버려 block 요소의 성질이 없어지게 된다. 이러면 width를 100% 추가하거나 해야한다.

참고사이트 :
https://www.zerocho.com/category/CSS/post/5881edef636a7f0b8e8507d8
https://ko.learnlayout.com/clear.html
https://velog.io/@ryuwisdom0_o/float