Float 1

🔑 Float를 배우는 이유는 가로배치를 하기 위해서이다.

📌 Float를 사용함으로써 일어나게 되는 🐶개판난 경우들!

▷ 자식 요소가 float 되어버리면 부모는 자식을 더 이상 찾을 수 없다.

▶ 요소가 float 되어버리면 Display 타입이 Block으로 변한다.

▷ float로 인해 타입이 Block이 된 친구들은 더 이상 길막을 할 수 없다.
즉 블록의 특징? 단점?이 사라지게 된다.

▶ Inline 타입의 요소는 float 된 것을 인지한다(그래서 피해다닌다).

Float 2

🔑 Float를 사용함으로써 일어나는 🐶개판 해결방안

1. overfloaw : hidden; - 이걸 사용하면 부모는 집나간 자식 요소를 찾을 수 있다.

2. 정석적인 해결방안 - clear fix(오로지 float로 인해서 망가진 레이아웃을 고치기위해 탄생한 속성)
   ▷ clear는 총 3가지 (left, right, both) 값을 가질 수 있다.
   ▶ clear 속성은 display가 block인 경우에만 사용이 가능하다.
   ▷ pseudo element(html에는 존재하지 않는 가상요소)
   ▶ content : 가상요소를 만들기 위해서 무조건 있어야 한다.

▼ float로 인해 나타나는 문제를 해결하는 정석적인 방법

.parent :: after{
    content : " ";
    display : block;
    clear : both;

Position

🔑 position : 요소를 원하는 위치에 자유롭게 이동시키기 위해 사용하는 property

🔥 종류 : static, relative, absolute, fixed, sticky
※ sticky는 지원하는 브라우저가 별로 없어서 거의 사용하지 않는다.

📌 고려해야할 사항
☆ Type(어떤 종류의 position 인지)
★ 기준점(무엇을 기준으로 요소를 위치시키는지)

🔴 static : 가장 일반적인 상태

🟠 relative : 영혼은 남겨두고 몸만 붕떠서 나감

🟡 absolute
▷ float를 했을때와 비슷한 상황이 발생한다.
▶ 부모는 자식을 더 이상 찾을수 없게 된다
▷ display 타입이 block으로 변한다
▶ 타입이 block이 된 친구들은 더이상 길막을 할 수 없다
▷ float의 상황과 유일하게 다른점은 inline요소가 인지하지 못한다는 것이다.

🔆 기준점 - position이 static이 아닌것들 중에서 기준을 잡는다. 그러므로 기준으로 잡고싶은 부모요소의 position을 주로 relative로 지정한다.

🟢 fixed
▷ viewport 사이즈를 기준으로 삼는다.
▶ absolute와 기준점 빼고는 똑같다.

⭐ 요소를 원하는 위치로 이동시키기 위해 top, right, bottom, left를 사용한다. 그런데 이때 4개를 모두 다 사용하지 말고 top, bottom 중 1개, right, left 중 1개를 기준으로 잡아 사용하여야 엉망징창되지 않는다 ⭐

🔆 Z-index : Z축을 기준으로 어느 위치에 있는지 정할때 사용한다.

📌 이미지 사이즈를 조정할때 많이 쓰이는 조합

.card - carousel img{
    width : 100%
    height : auto;
    }

📣 transform : translateY(-50%);
▷ 정가운데로 위치 시키거나 할 때 사용해야하는 속성

#next{
    position : absolute;
    top : 50%;
    transform : translateY(-50%); 
    }

Flex box 1 (정렬의 끝판왕)

🔑 Flexbox를 쓰기위한 4가지 사고과정

1. 나, 플렉스박스 쓸거임!!
2. 가로 정렬? 세로 정렬?
3. 무조건 한 줄 안에 다 정렬?? 아니면 여러줄에 걸쳐서 정렬??
4. 신나는 플렉스박스 파티 타임 🎶

🔆 플렉스박스 선언 방법

.flexbox{
    display : flex; //or display : inline-flex;
    }

🔎 이 선언을 어디에 해주어야 할까?
-> 정렬하고자 하는 요소를 감싸는 부모에게 display : flex;를 선언해주면 된다!

플렉스박스 정렬 방법(가로? 세로?)

.flexbox{
    display : flex;
    flex-direction : row;
    /* column or row-reverse or column-reverse */
    }

⭐ flex-direction : row; 일 경우 axis 생성 현황

⭐ flex-direction : column; 일 경우 axis 생성 현황

⭐ flex-direction : row-reverse; 일 경우 axis 생성 현황

⭐ flex-direction : column-reverse; 일 경우 axis 생성 현황

플렉스박스 정렬 방법(한 줄 안에 다? 나눠서?)

.flexbox{
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap; //or wrap

🤍 감싸지(wrap)않고 자식의 사이즈를 줄여서라도 한 줄로 정렬해 버리는
flex-wrap : nowrap;

🖤 한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄을 만들어 버리는
flex-wrap : wrap;

Flex box 2

🔑 정렬 방법(가운데 정렬? 양 옆으로 정렬?? 등등)

1. main axis를 기준으로 정렬 하고 싶을 때는 justify-content라는 css property를 사용해서 정렬을 하면된다.

2. cross axis를 기준으로 정렬 하고 싶을 때는 align-items or align-content라는 css property를 사용해서 정렬을 하면 된다.

.flexbox{
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap; 
    justify-content : center; //or space around, space between 등
    }

🌞 선 align-items 후 align-content를 추천한다

📣 order : 요소의 순서를 설정할 수 있는 css property 이다.