🔑 Float를 배우는 이유는 가로배치를 하기 위해서이다.
📌 Float를 사용함으로써 일어나게 되는 🐶개판난 경우들!
▷ 자식 요소가 float 되어버리면 부모는 자식을 더 이상 찾을 수 없다.
▶ 요소가 float 되어버리면 Display 타입이 Block으로 변한다.
▷ float로 인해 타입이 Block이 된 친구들은 더 이상 길막을 할 수 없다.
즉 블록의 특징? 단점?이 사라지게 된다.
▶ Inline 타입의 요소는 float 된 것을 인지한다(그래서 피해다닌다).
🔑 Float를 사용함으로써 일어나는 🐶개판 해결방안
overfloaw : hidden; - 이걸 사용하면 부모는 집나간 자식 요소를 찾을 수 있다.
정석적인 해결방안 - clear fix(오로지 float로 인해서 망가진 레이아웃을 고치기위해 탄생한 속성)
▷ clear는 총 3가지 (left, right, both) 값을 가질 수 있다.
▶ clear 속성은 display가 block인 경우에만 사용이 가능하다.
▷ pseudo element(html에는 존재하지 않는 가상요소)
▶ content : 가상요소를 만들기 위해서 무조건 있어야 한다.
▼ float로 인해 나타나는 문제를 해결하는 정석적인 방법
.parent :: after{
content : " ";
display : block;
clear : both;
🔑 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%);
}
🔑 Flexbox를 쓰기위한 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;
🔑 정렬 방법(가운데 정렬? 양 옆으로 정렬?? 등등)
main axis를 기준으로 정렬 하고 싶을 때는 justify-content라는 css property를 사용해서 정렬을 하면된다.
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 이다.