[CSS] 배치관련 속성

대표적인 속성 2가지

1. float 속성

2. position 속성

 

float

정렬하기 위한 속성으로, 보통의 흐름(normal flow)를 벗어나 텍스트 및 인라인 요소가 그 주위를감싸는 자기 컨테이너(부모 요소)의 좌우측을 따라 배치되는 것을 지정합니다. 예를 들어 left나 rigth를 주게되면 해당 요소는 부모 요소의 왼쪽 또는 오른쪽에 배치되게 됩니다. 이처럼 float는 다른 요소의 배치에 영향을 주는 속성값입니다. 

 

float는 화면에 떠있는 블록이기 때문에 블록이 지정되어 있는 넓이와 높이가 반드시 지정되어 있어야 합니다. 이 중 하나의 속성이 빠져도 float 속성을 사용할 수 없습니다.

 

inherit	부모 요소에서 상속함
left	요소가 자신의 포함(containing) 블록의 좌측에 float해야 함
right	요소가 자신의 포함 블록의 우측에 float해야 함
initial	기본값으로 설정함
none	요소가 float하지 않아야 함

절대 위치 요소는 float 속성을 무시한다.

float는 position 속성값이 static(기본값)이거나 relative일 때 동작한다.

 

특징

1. 무조건 블록 상태이다

2. 텍스트가 있으면 둘이 있을 때 겹쳐지지 않는다 👉🏻 텍스트를 밀어내기 때문

3. float는 옆으로 바로 붙는게 아닌 박스가 가용할 수 있는 길이로 붙는 것이다

4. 주변 배치에 영향을 준다

5. 높이, 너비 설계가 중요하고 float 속성을 주었지만 크기로 인해 붙지못했을 때 생기는 죽은 공간은 사용하지 못한다

float는 바닥에 딱 붙어 있는 값을 말 그대로 띄워서 가상의 마진값에서 자유롭게 하는 것이다. 

 

문제점

float속성을 사용했을 때 나타나는 문제점들이다.

 

1. 밀려내려감(Pushdown) 

요소가 밀려내려가는 현상은 float된 객체가 영역보다 클 때 생긴다. 이런 경우는 overflow:hidden을 사용해 처리가 가능하다.

 

2. 더블마진버그(Double Margin Bug)

IE6에서 inline-level element가 같은 방향으로 float된 경우 일어난다. 이럴경우는 해당 요소를 display:inline을 써서 inline-level요소로 만들어 주면된다.

 

3. 3픽셀 밀림 버그(3px Jog) 
IE 6에서 CSS 먹일때 Float + Margin or Padding 값을 동시에 먹이면. Margin,Padding 값이 두배가 되는
버그가 있는데 이상하게도 float된 요소의 다음에 오는 텍스트에 오는 버그로 이럴경우 text의 width와 height값을 주면 해결된다.

 

4. IE7의 Bottom Margin 버그

float된 부모객체 안의 자식객체에 나타나는 버그로 부모객체에 의해 자식객체의 bottom-margin을 무시하게 되는 버그로써 부모객체에 bottom padding을 줘서 해결해야 한다. 

 

float로 인해 자주 발생하는 현상 해결

disaplay : flow-root

float가 적용되면, 왼쪽이든 오른쪽이든 컨텐츠가 붙어야하니까 contents 크기만큼 크기가 줄어버린다. 자식이 float가 되면, 부모 요소는 해당 요소의 height를 알지 못하게 됩니다. float 요소는 공중에 뜨게 되긴 때문입니다.

하지만 float된 요소의 height값은 body가 인지하고 있습니다. 따라서 flow-root는 요소에 블록 컨테이너를 생성해서 float가 적용된 자식 요소를 인식시키는 것입니다.

부모 {
  display: flow-root;
  /* overflow: hidden과 관련되어 있음 */
  /* 부모요소에 clearfix를 주는 방법을 많이 사용 */
}

자식 {
  float: left;
}

clear

clear 속성은 float 속성의 선언으로 요소의 배치 위치에 영향을 받았을 경우 이를 해제하고자 할 때 사용하는 속성이다. 서로 크기가 다르거나 position 속성에 의하여 간섭이 일어날 경우가 있다. 만약 float:left로 지정된 요소로 인해 배치 위치에 영향을 받은 요소의 흐름을 해제할 경우에는 "left" 속성 값을, float:right로 지정된 요소로 인해 배치 위치에 영향을 받은 요소의 흐름을 해제 할 경우에는 "right" 속성 값을 사용할 수 있으며, "both"를 지정했을 경우에는 float 방향과 상관없이 해제된다.

 

left	지정된 요소의 왼쪽이 다른 요소와 간섭을 일으키지 않습니다
right	지정된 요소의오른쪽이 다른 요소와 간섭을 일으키지 않습니다
both	지정된 요소의 왼쪽과 오른쪽이 다른 요소와 간섭을 일으키지 않습니다
none	지정된 요소들끼리서로 간섭을 일으킬 수 있습니다

 

[예제]

/* HTML */

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

/* CSS */
.box1 {
        background-color: orange;
        width: 100px;
        height: 100px;
        float: left;
      }
      .box2 {
        background-color: skyblue;
        width: 100px;
        height: 100px;
        float: left;
      }
      .box3 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
      .box4 {
        width: 100px;
        height: 100px;
        background-color: purple;
      }

[결과]

위와 같이 box가 4개일때 각 box는 동일한 크기에 다른 배경 색상을 가지고 있을 때 box3과 box4에 float속성을 주지 않으면 다음과 같은 결과가 나오게 된다.

 

노란색......어디갔어?

노란색은 사라진 것이 아니라 주황색 박스 뒤에 숨어 있습니다. 노란색 박스의 높이를 150px로 변경하면

이와 같이 노란색 박스가 주황색 박스 뒤에 숨어 있는 것을 확인할 수 있습니다.

 

이 문제를 해결할 수 있는 방법은 크게 세가지가 있습니다.

 

1. 빈div 태그에 직접 clear 속성 넣기

<div style = "clear:both"></div>

를 이용하는 것으로 <br />과 같은 효과를 준다. 하지만 구조적인 마크업에 흐름을 깨게 되는 경우가 생기므로 좋지 않은 방법이다.

 

2. overflow 사용

부모 객체에 overflow속성을 넣는 방법으로 float 되는 객체의 부모 객체의 넓이를 조장해 흐름을 제어하는방식이다. 하지만 이는 원하지 않는 스크롤바가 생기거나 콘텐츠가 안보일 수 있다.

 

3. clear 속성 사용

가상선택자 ::after를 이용하여 float를 clear할 수 있다.

 

노란색 박스는 float 속성이 지정되어 있지 않아 float 속성을 가지고 있는 주황색, 하늘색 박스를 인식하지 못하기 때문입니다. 따라서 이렇게 겹치는 상황이 올 때 clear속성을 사용해 겹치는 현상을 해결할 수 있습니다

 

/* box3에 clear:both속성 추가*/
.box3 {
width: 100px;
height: 150px;
background-color: yellow;
clear: both;
}

 

position

요소 박스의 배치 방식을 지정할 수 있는 속성이다. 총 4가지 방식으로 위치를 지정한다.

 

1. 정적 위치(static position) 지정 방식

2. 상대 위치(relative position) 지정 방식

3. 고정 위치(fixed position) 지정 방식

4. 절대 위치(absolute position) 지정 방식

 

정적 위치(static position) 지정 방식

div { 
 position: static; 
}

HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식입니다.

position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다.

정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다.

모든 HTML 요소의 position 속성의 기본 설정값은 static입니다.

 

 

상대 위치(relative position) 지정 방식

 div{ 
 position: relative; 
 }

상대 위치(relative position) 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식입니다.

HTML 요소의 기본 위치란 해당 요소가 정적 위치(static position) 지정 방식일 때 결정되는 위치를 의미합니다.

 

요소에게 절대 위치를 지정하고 싶으면 부모 요소에게 상대위치 속성을 주면 됩니다.

 

고정 위치(fixed position) 지정 방식

고정 위치(fixed position) 지정 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식입니다. 즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다.

예제

div { 
    position: fixed; 
}

 

절대 위치(absolute position) 지정 방식

절대 위치(absolute position) 지정 방식은 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작합니다.

단지 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정하게 됩니다. 하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 됩니다.

 

예제

div { 
    position: absolute; 
}

 

 

 

 

 

 

 

https://techbug.tistory.com/181

CSS Float속성의 모든것 (All About Floats)

http://www.tcpschool.com/css/css_position_position

코딩교육 티씨피스쿨