1. Float

💻1) Float

• Float를 사용하는 이유?
  -> 가로 배치를 하기 위해

💻2) Float를 사용하게 되면

1. 부모는 그 자식을 집 나간 자식으로 여김. 부모도, 형제들도 그 넘을 알 길이 없어진다.😬
2. Inline, Inline-block 요소 모두 Block으로 신분 상승
3. Block은 되지만 길막을 못함🤪.
   • 자기가 가진 컨텐츠 크기만큼만 자리 차지함.
   • width 선언한 경우 남은 공간 자동으로 margin 채우는 것도 🙅‍♀️🙅‍♂️
   • margin을 줄 수는 있음. but 자동으로 채우는 걸 못함
   • 모든 자식이 집을 나가면 부모의 height는 0이 됨. 즉, 공간을 1도 차지하지 않음. 즉, Layout의 붕괴가 일어남😨😱
4. 나만 볼 수 있는 Float (Inline)👻
   • Inline 요소들은 집 나간 Float를 볼 수 있음

• 이런 점들 때문에 요즘은 잘 사용하지 않는다..😇

💻3) How to fix

1. Honeyful Trick: overflow: hidden;
   • overflow: hidden;을 사용하면 부모가 집 나간 자식놈을 찾아올 수 있음
   • 그치만 왜 이렇게 쓰는지는 알 수 없다..🤔
2. FM: Clearfix - clear
   • Float로 인해 망가진 Layout을 고치기 위해 생긴 Property
     
   • clear를 사용하여 올바르게 전체 자식의 세로 영역을 파악할 수 있음
   • clear는 display가 block인 요소들에만 사용 가능함
3. Clear 종류: left | right | both
   • left: float: left;가 앞에 있다면 그 위치를 파악해서 영향을 받지 않겠다는 뜻
   • right: float: right;
   • both: 둘 다
4. clear 사용 방법
   • 부모한테 clear를 주어도 되지만, 범용화 및 재사용성을 위해 clearfix라는 클래스를 사용해도 좋음

.클래스명::after {
  content: "";
  display: block;
  clear: left | right | both;
}

💻4) Pseudo-Element (가상 유도)

• Float를 위해 HTML에 임의의 요소를 추가하는 것은 그닥 좋은 방도가 아님
• Pseudo-Element를 사용해보자
• CSS로 Fake 요소를 만들어서 clear 주기
  • 각 요소 당 2개 씩 만들 수 있음
  • ::before, ::after
• Pesudo-Element란?
  • 선택자에 추가하는 키워드로, 선택한 요소의 지정된 부분에 스타일을 입힐 수 있음
  • 사용 시 반드시 content property 작성해야 함

💻5) 참고사항

• 같은 태그의 내용을 한번에 수정하고 싶을 때에는 태그를 클릭하고 ctrl+shift+L을 눌러주자.
• CSS에서 그냥 태그 이름을 쓰지 말고, class를 선언해서 쓰도록 하자.
• padding과 margin 구분 잘 하기.
• padding이나 margin이 먹히지 않으면 inline 박스인지 확인해보자.
• 피그마 보면서 마크업하는 연습을 해야겠다. 놓친 부분 꽤 되는듯. 꼼꼼히 하기.
• margin 사용 시 top, bottom 혼용하는 것보다 하나만 정해서 사용하는 것이 좋음.
• strong 태그는 inline임. margin 안 먹으니까 block이나 inline-block으로 변경해주기

2. Position

💻1) Position

• position을 사용하는 이유?
  -> 요소를 원하는 위치에 자유롭게 이동시키기 위해
• position 종류
  • static, relative, absolute, fixed, sticky
  • sticky는 아직 지원하는 브라우저가 많이 없음
• top or bottom / left or right: 하나씩만 사용하는 것이 좋음.

💻2) Position을 사용할 때는

• type -> 기준점

1. 어떤 종류의 Position을 사용하는지
2. 사용하는 Position은 무엇을 기준에 두고 사용하는지 유의해야 한다.

💻3) Position 종류

1. static
   • 모든 요소의 기본 포지션 값
   • 가장 일반적인 상태
2. relative
   • 기준점: 자기 자신이 원래 있던 자리
   • ex) top: 20px; -> 자신의 top을 기준으로 20px 이동
   • float와 마찬가지로 부모를 떠나서 붕 뜸.
   • but, Layout이 붕괴되거나 다른 요소에 영향을 주지 않음. 부모, 형제가 자신의 위치를 기억하고 있음.
3. absolute
   • float 사용할 때와 비슷함!
   • 부모가 absolute 사용하는 자식을 집 나간 자식 취급함
   • diplay가 block으로 신분 상승
   • 그러나 길막을 하지 못하는 block..
   • 기준점: 자신이 기준으로 삼고 싶은 기준점을 새로 정할 수 있음
   • position: static이 아닌 요소를 기준으로 잡을 수 있음
   • postion: relative인 요소를 기준으로 잡는 것이 좋다
4. fixed
   • absolute를 사용했을 때 동일한 현상이 일어남
   • 다른 점: 기준점이 명확함 => viewport
   • viewport: 브라우저 창의 전체 크기

💻4) z-index

• postion 된 요소들의 수직 방향으로서의 레벨을 알려주는 property
  

💻5) 참고사항

• img 태그는 display: inline이지만 width, height 사용이 가능하다.
  파일 자체가 가지고 있는 사이즈가 있기 때문에!
  따라서 이미지 사이즈를 변경할 때, display: block으로 바꾸어주면 더 깔끔하게 마크업할 수 있다✨
• img 사이즈를 부모 요소에 맞출 때, 아래와 같이 해주면 좋다.

img {
  display: block;
  width: 100%;
  height: auto;
}

• 반복적으로 쓰이는 요소는 묶어서 쓰고, 다른 부분만 태그를 따로 써주기
• transform: 어떤 요소의 모양을 변화시킬 때 사용하는 프로퍼티
  • ratate()(회전), scale()(배율), translate();(위치 이동)
  • translate는 자기 자신이 기준
  • 정 가운데에 위치시킬 때 필요한 프로퍼티임

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

• position: fixed;를 사용하면 컨텐츠 크기만큼만 width를 가지게 된다.

3. Flexbox

💻1) Flexbox 사용 방법

.flexbox {
  display: flex | inline-flex;
  flex-direction: row | row-reverse | column | column-reverse
  flex-wrap: nowrap | wrap;
}

1. 나 플렉스박스 쓸거임
   • flex는 block과 비슷하지만 block은 할 수 없고 요소를 쉽게 정렬할 수 있음
   • inline-flex: inline-block과 비슷하지만 위와 동일
   • 선언은 누구한테? 정렬하고자하는 요소를 지니고 있는 부모에게😜
2. 가로 정렬? 세로 정렬?
   • 방향 정해줘야 함
   • flex를 하게 되면 우리 눈에 보이지 않는 2개의 Axis(축) 생김
   • Main axis(flex-direction 방향대로 생김), Cross axis(Main axis와 수직)
   • row를 주면 main: 왼->오 | cross: 위->아래
   • row-reverse를 주면 main: 오->왼 | cross: 위->아래
   • column-reverse를 주면 main: 아래->위 | main: 왼->오
3. 무조건 한 줄 안에 다 정렬?
   • flex-wrap: nowrap: 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄로 정렬해버림
   • flex-wrap: wrap: 한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄로 만들어버림
4. 씬나는 플렉스박스 party time!🤸‍♀️🤸‍♂️
   • 원하는 대로 정렬하기

💻2) Main axis & Cross axis

• Main axis를 기준으로 정렬하고 싶을 때는 justify-content 사용
  • justify-content: flex-start -> 왼쪽에서부터 정렬 시작
  • justify-content: center -> 가운데 정렬
  • justify-content: space-between -> 요소 사이의 간격을 같게 해줌
• Cross axis는 aline-items나 align-content 사용
  • aline-items: center -> 세로축 가운데 정렬
  • aline-items는 하나의 flexline을 흐르는 cross axis 기준으로 정렬
  • align-content는 flex-wrap: wrap이어야 함
  • flex-wrap: wrap을 하게 되면 flexline이 여러 개가 생길 수 있음
  • align-content는 전체 큰 축을 기준으로 정렬
  • align-content: space-between 사용 가능
  • 사용 시엔 선 aline-items 후 align-content 해보기🤣

💻3) order

• flexbox를 쓰게 되면 사용 순서를 정리할 수 있음😇👍
• order: 1;

💻4) 참고사항

• flex를 쓰게 되면 원하지 않는데 자식 요소의 width 간격이 좁아질 수 있다.
  -> width: 100%; 사용하면 원래대로 됨

📝 짧은 후기

• 프로젝트를 진행하면서 justify-content: center나, aline-items를 의미도 모르고 사용한 적이 굉장히 많은데 (그러면서 안 먹혀서 당황한 적도 한 두번이 아니다..ㅎㅎ) 명료하게 알 수 있었다. 이 강의.. 넘 맘에 들어👍👍
• 아직 명확하게 float, position, flex를 안다고 자부할 수는 없을 거 같다. 다른 예제들을 마크업하면서 내 걸로 만드는 연습을 해봐야 할 것 같다. flex 위주로!