04 Understanding the Box model and layout_3. position, float attribute

 ● Position property: A way to adjust the position of an element, understand how it is used with values ​​such as static, relative, absolute, fixed, etc. and how it affects layout.

 1) static:
static 값은 요소를 일반적인 문서 흐름에 따라 배치합니다. 즉, 위치를 별도로 지정하지 않고 요소를 기본 위치에 배치합니다. 이는 Position 속성의 기본값입니다.

.container {
  position: static;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 static 위치로 배치하고 있습니다.

 2) relative:
relative 값은 요소를 자기 자신의 원래 위치를 기준으로 이동시킵니다. 다른 요소들과의 상대적인 위치를 설정할 수 있으며, top, right, bottom, left 속성과 함께 사용하여 원하는 위치로 이동시킬 수 있습니다.

.container {
  position: relative;
  top: 20px;
  left: 30px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 현재 위치에서 위로 20px, 왼쪽으로 30px 이동시키고 있습니다.

 3) absolute:
absolute 값은 요소를 가장 가까운 상위(relative, absolute, fixed, sticky) 위치 요소를 기준으로 위치를 조정합니다. 이동하려는 부모 요소 중에 position이 static이 아닌 요소를 찾아 상대적으로 위치를 조정합니다.

.container {
  position: absolute;
  top: 50px;
  left: 100px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 문서의 왼쪽 상단으로부터 50px 아래, 100px 오른쪽으로 위치시키고 있습니다.

 4) fixed:
fixed 값은 요소를 뷰포트(브라우저 창)를 기준으로 고정 위치에 배치합니다. 스크롤을 내려도 요소가 움직이지 않고 항상 같은 위치에 고정됩니다.

.container {
  position: fixed;
  top: 10px;
  right: 10px;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 뷰포트의 오른쪽 상단으로부터 10px 아래, 10px 왼쪽으로 위치시키고 있습니다.

Position 속성을 적절하게 활용하여 요소들의 위치를 조정하면 원하는 레이아웃과 디자인을 구현할 수 있습니다. 요소의 Position 속성을 설정하면 다른 요소들과의 상대적인 위치를 조정하거나 고정 위치에 배치할 수 있습니다. 이를 통해 웹 페이지의 레이아웃을 유연하게 조정하고, 다양한 디자인 요구사항을 충족시킬 수 있습니다.

 

 ● Float Attribute: Learn how to float an element to the left or right so that text or other elements wrap around it.

 1) 왼쪽 띄우기:
왼쪽에 있는 요소를 띄우기 위해서는 float 속성에 "left" 값을 지정합니다.

.container {
  float: left;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 왼쪽으로 띄우고 있습니다.

 2) 오른쪽 띄우기:
오른쪽에 있는 요소를 띄우기 위해서는 float 속성에 "right" 값을 지정합니다.

.container {
  float: right;
}

위의 예제 코드에서는 "container"라는 클래스를 가진 요소를 오른쪽으로 띄우고 있습니다.

 3) 주의할 점:
  - 띄워진 요소는 주변 텍스트와 인라인 요소들이 그 주위를 감싸도록 배치됩니다.
  - 띄워진 요소는 주위 요소와의 상호작용이 변경될 수 있으므로, 레이아웃이 예상과 다를 수 있습니다.
  - 띄워진 요소의 부모 요소는 해당 요소의 높이를 인식하지 못하게 되므로, clearfix 기법을 사용하여 부모 요소의 높이를 조정해야 할 수도 있습니다.

 

Float 속성을 사용하여 요소를 띄워서 텍스트나 다른 요소들이 감싸도록 만들 수 있습니다. 이를 통해 이미지와 텍스트의 조합, 다단 레이아웃 등 다양한 디자인 요구사항을 구현할 수 있습니다. Float 속성을 사용할 때는 주변 요소와의 상호작용을 고려하고, 필요에 따라 clearfix를 적용하여 레이아웃을 조정해야 합니다.