CSS float / Position / Flexbox

한 줄 정리

float : 문서의 일반적인 흐름에서 제외

none (기본값), left, right

 

clear: float 요소의 영향을 받지 않도록 해줌

none (기본값), left, right, both

 

position : 문서상에 요소를 배치하는 방법을 정의

top, bottom, right, left

static : 기본값

relative : 브라우저 기준으로 움직인다

absolute : 최근에 만든 객체를 기준으로 움직인다

fixed : 쇼핑몰에서 자주 볼 수 있는데 스크롤바를 내려도 고정이 된다

sticky :  지정한 위치에서 고정되게 하는 것

top, bottom

 

flexbox : 여러 객체를 그룹으로 묶어 한번에 움직이게 하는 것

display: flex;로 사용 (기본 주축인 가로방향, 행방향으로 움직인다)

flex-direction : 배치할 때 사용할 방향을 지정

row(기본값 →방향), row-reverse(← 방향), column(↓ 방향), column-reverse(↑ 방향)

 

주축/교차축 배치

justify-content : 가로 축을 기준으로 좌우에 대한 정렬을 담당

center, start, end, space-around, space-between

 

algin-items : 교차축 배치, 세로 축을 기준으로 정렬

center, start, end

algin-self : 교차축에서 개별로 배치

flex-start, flex-end

 

flex-wrap : 줄바꿈 여부 (각 요소들이 합이 컨테이너보다 클 경우 줄바꿈을 해줄 수 있다)

wrap, wrap-reverse

 

 

 

 

---

 

 

## float

-float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 
 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.
-문서의 흐름이란 우리가 여러개의 요소를 만들게되면 먼저 작성한 것부터 순서대로 브라우저에 표시된다.
 이 순서를 문서의 흐름이라고 한다.
-문서의 흐름에서는 제외되지만 필요한 만큼의 공간만 차지한다.

=====================================================
|    단위 | 의미 |
=====================================================
|  none | 기본값 |
-----------------------------------------------------------------------------------------
|  left | 자신을 포함하고 있는 박스의 왼편에 떠있어야 한다. |
-----------------------------------------------------------------------------------------
|  right | 자신을 포함하고 있는 박스의 오른편에 떠있어야 한다.  |
=====================================================

 

#a{
    width: 100px;
    height: 50px;
    background-color: orange;
    float: right;
}

#b{
    width: 100px;
    height: 100px;
    background-color: dodgerblue;
}

 

-a는 문서의 흐름에서 제외된다.

 

#a{
    width: 100px;
    height: 50px;
    background-color: orange;
    float: right;
}

#b{
    width: 100px;
    height: 100px;
    background-color: dodgerblue;
    float: left;
}

 

-b 또한 float을 지정해주어 문서의 흐름에서 제외가 되었다.

 

 

 

---

 

 

 

## Clear

-clear속성은 flot 요소 이후에 표시되는 요소가 float요소의 영향을 받지않도록(float속성 해제) 해주는 속성값이다.

=====================================================
|    단위 | 의미 |
=====================================================
|     none | 기본값이며 아래로 이동되지 않음을 나타내는 키워드 |
------------------------------------------------------------------------------------------
|     left | float이 left인 요소의 아래로 내려가겠다는 키워드 |
------------------------------------------------------------------------------------------
|     right | float이 right인 요소의 아래로 내려가겠다는 키워드  |

p{
    clear: right;
}

------------------------------------------------------------------------------------------
|     both | float이 left와 right인 요소의 아래로 내려가겠다는 키워드  |

p{
    clear: both;
}

 

 

 

---

 

 

 

 

##　Position

-position 속성은 문서상에 요소를 배치하는 방법을 정의한다.
-position이 요소의 배치 방법을 결정하면 top, bottom, right, left가 최종 위치를 결정하는 방식이다.

================================================================================
|    단위 | 의미 |
================================================================================
| static | 기본값이며 요소를 문서의 흐름에 따라 배치한다. (원래의 문서상의 흐름대로 지정한다.) |
---------------------------------------------------------------------------------------------------------------------------------------
| relative | 일반적인 흐름에 따라 배치하되 상하좌우 위치 값에따라 오프셋을 적용한다. |
---------------------------------------------------------------------------------------------------------------------------------------
| absolute | 일반적인 흐름에서 제거하고 가장 가까운 position 지정요소에대해 상대적으로 오프셋을 적용  |
---------------------------------------------------------------------------------------------------------------------------------------
| fixed | 일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정한다.  |
---------------------------------------------------------------------------------------------------------------------------------------
| sticky | 일반적인 문서 흐름에따라 배치하고, 스크롤되는 가장 가까운 상위 요소에 대해 오프셋을 적용 |
================================================================================

top : 윗면에서 떨어뜨릴 값을 정의
bottom : 아랫면에서 떨어뜨릴 값을 정의
right : 오른쪽면에서 떨어뜨릴 값을 정의
left : 왼쪽면에서 떨어뜨릴 값을 정의

 

 

 

 

============================================================================================

 

 

# relative (브라우저 기준으로 움직인다)
-요소를 일반적인 흐름에 따라 배치하되 상하좌우 위치 값에따라 오프셋을 적용한다.
-원래 있어야할 위치에서 개발자가 지정한 곳까지 이동한다.
-오프셋이란 위치를 얼마간 이동시키는 것을 의미한다.

    <body>
        <div></div>
        <p>이것은 p태그</p>
    </body>

div{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: relative;
    top: 100px;
    left: 100px;
}

 

============================================================================================

 

 

 

# absolute (최근 만드러진 객체를 기준으로 움직인다)
-일반적인 흐름에서 제거하고 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다.
-position 지정 요소란 position속성에 속성값이 정의되어있는 요소

div{
    width: 200px;
    height: 200px;
    background-color: orange;
    position: relative;
    border: 1px solid black;
}

#absol{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 100px; left: 100px;;
}

 

 

-position 속성 기준이 없다면, (기준 객체가 있지 않다면) 브라우저를 기준으로 배치가 된다.



============================================================================================

 

 

 

# position fiexd (쇼핑몰에서 자주 보던 흐름)
-일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정한다.
-개발자가 위치를 지정하고난 후 스크롤바를 움직이면 다른 요소들은 스크롤바에 따라
 이동하지만 position fixed로 지정한 해당 요소는 움직이지 않는다.

#fix{
    width: 150px;
    height: 150px;
    background-color: coral;
    position: fixed;
    top: 50px;
    left: 50px;
}

 

 

-스크롤을 내려도 div 태그가 고정되어 있다.

============================================================================================

 

 

 

# position sticky (지정한 위치에서는 고정되게 하는 것)
-요소를 일반적인 문서 흐름에따라 배치하고, 스크롤되는 가장 가까운 상위 요소에 대해 오프셋을 적용한다.

#fix{
    width: 300px;
    height: 150px;
    background-image: url(image/pug.jpg);
    background-size: cover;
    position: sticky;
    top: 0px;
}

 

 

-아무리 내려도 top: 0px 부분에서 고정이 되어 같이 내려간다.

 

 

---

 

 

## Flexbox

-flexbox란 박스 내 요소 공간의 공간을 배분과 정렬 기능을 제공하기위한 1차원 레이아웃 모델이다.
-flexbox를 1차원 모델이라 부르는 이유는 레이아웃을 다룰 때 한번에 하나의 차원(행, 열)만을 다루기 때문이다.
-flexbox를 flex 컨테이너라고도 한다. (요소들을 포함하기 때문이다.)
-flexbox를 만들기 위해서는 컨테이너에 display: flex; 를 적용해야 한다.
-flex 컨테이너는 기본적으로 요소들을 행 방향(가로)으로 정렬한다. (추가속성들을 사용하여 다양하게 적용할 수 있다.)

(위의 요소들은 하나씩 배치했지만, Flexbox는 여러개의 요소를 한 번에 묶어서 배치가 가능하다.)

 

-그냥 한 마디로 여러개 객체를 그룹으로 묶어서 한꺼번에 움직이게 하는 것




============================================================================================

# 주축(main-axis)과 교차축(cross-axis)

-flexbox에는 주축(main-axis)과 교차축(cross-axis)이 있다.
-flexbox는 기본적으로 주축(행방향, 가로방향)방향이다.
-flexbox의 교차축은(열방향, 세로방향)방향이된다.
-주축과 교차축을 서로 바꿔가며 레이아웃을 변경할 수있다.
 만약 세로 방향을 주축을 사용하게되면 당연히 가로방향이 교차축이된다.
 주축이 어떤것이냐에 따라 레이아웃에 많은 변화가 생긴다.

 

    <body>
        <div id="containner">
            <div class="box">box1</div>
            <div class="box">box2</div>
            <div class="box">box3</div>
        </div>
    </body>

 

#containner{
    display: flex;
    position: relative;
    top: 100px;
    left: 68px;
}

.box{
    width: 100px;
    height: 100px;
    background-color: orange;
    border: 2px solid black;
}

 

 

-display: inline-block; 과의 차이는 inline-block은 기본 마진이 들어가있고, display: flex는 기본 마진이 없다.

display: inline-block

---

# felx-direction

 

-flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

============================================================
|    속성값 | 의미 |
-----------------------------------------------------------------------------------------------------
| row | 기본값이며 주축은 행이고 방향은 콘텐츠의 방향과 동일 | → 방향

-----------------------------------------------------------------------------------------------------
| row-reverse | 주축은 행이고 방향은 콘텐츠의 방향과 반대 | ← 방향

-----------------------------------------------------------------------------------------------------
| column | 주축은 열이고 방향은 콘텐츠의 방향과 동일 | ↓ 방향

-----------------------------------------------------------------------------------------------------
| column-reverse | 주축은 열이고 방향은 콘텐츠의 방향과 반대 | ↑ 방향

 

---

 

# 주축/교차축 배치

-flexbox를 다루기위해서는 다음과 같은 속성들을 사용할 수 있다.
 # 주축 배치 방법 : justify-content (가로 축을 기준으로 좌우에 대한 정렬을 관장 합니다.)
 # 교차축 배치 방법 : algin-items (세로 축을 기준으로 정렬을 하게 됩니다.)
 # 교차축 개별요소 배치방법 : algin-self (algin-items은 모든 요소를 정렬하지만 algin-self는 하나의 요소만 정렬)
 # 줄바꿈 여부 : flex-wrap (각 요소들의 합이 컨테이너보다 클 경우 줄바꿈해줄 수 있다.)

 

 # 주축 배치 방법 : justify-content (가로 축을 기준으로 좌우에 대한 정렬을 관장 합니다.)

#containner{
    display: flex;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    justify-content: center;
}

 

-center

 

-start

 

-end

 

-space-around

 

-space-between

 

 

 # 교차축 배치 방법 : algin-items (세로 축을 기준으로 정렬을 하게 됩니다.)

align-items: center; // 중앙
align-items: start; // 시작점
align-items: end; // 끝점

align-items: center

 

 # 교차축 개별요소 배치방법 : algin-self (algin-items은 모든 요소를 정렬하지만 algin-self는 하나의 요소만 정렬)

<div class="box self">box2</div>

.self{
    align-self: flex-start; // 시작점
    align-self: flex-start; // 끝점
}

 

 

 # 줄바꿈 여부 : flex-wrap (각 요소들의 합이 컨테이너보다 클 경우 줄바꿈해줄 수 있다.)

 

-120px이 총 3개 이므로, 360px이 되는데 300px을 초과해버리면 (부모) 100px로 균등하게 조정이 된다.

#containner{
    display: flex;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; // 얘가 추가됨
}

flex-wrap: wrap-reverse; // 반대로 줄바꿈