CSS 2 - Float, Position, Flexbox

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를 선언해서 쓰도록 하자.
  • paddingmargin 구분 잘 하기.
  • 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-itemsalign-content 사용
    • aline-items: center -> 세로축 가운데 정렬
    • aline-items는 하나의 flexline을 흐르는 cross axis 기준으로 정렬
    • align-contentflex-wrap: wrap이어야 함
    • flex-wrap: wrap을 하게 되면 flexline이 여러 개가 생길 수 있음
    • align-content는 전체 큰 축을 기준으로 정렬
    • align-content: space-between 사용 가능
    • 사용 시엔 선 aline-itemsalign-content 해보기🤣

💻3) order

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

💻4) 참고사항

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

📝 짧은 후기

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

좋은 웹페이지 즐겨찾기