[CSS] position, flexbox

position

• position을 사용할 때는 어떤 종류의 포지션을 사용하는지, 무엇을 기준으로 위치해 있는지 확인해야함.
• static : 모든 요소의 기본 position.
• relative : 원래 위치를 기억하고 있다. 기존 위치를 기준으로 이동가능. 다른 위치로 이동되더라도 다른 요소들의 위치에 영향을 주지 않음.
• absolute : display를 block으로 바꿔준다. 다른 요소에 영향을 주는게 아니라 붕 떠있음. 영향을 안받는 절대적인 위치에 존재.
  • position이 static이 아닌 부모요소를 기준으로 위치한다.
  • 요소에 position: abosolute를 속성으로 추가하기 위해서는 부모요소에 position : relative 를 속성으로 넣으면 쉽다.
• fixed : absolute와 유사하다. absolute와의 차이점은 viewport가 기준점이라는 것이다.
  • position: fixed; bottom: 0 ;으로 설정하면 스크롤을 내려도 화면 바닥에 붙어있다.
• sticky : 과거에는 지원하는 브라우저가 거의 없었다. Can i use sticky 검색 결과하지만 최신 브라우저에는 적용이되어가고있다.
  • 노마드코더 position sticky 관련 영상, MDN position sticky 공식문서 관련 설명을 보면 하단으로 스크롤을 내려도 화면 상단에 보여야하는 배너나 게시물 목록, bread crumb을 만들 때 유용하게 사용되는듯 하다.

z-index : 요소의 높이

• a 요소와 b요소가 겹치는데 a요소가 위에 있는 것을 원할 경우 b의 z-index보다 높게 설정하면 된다.

  a {
    z-index: 2;
  }
  b {
    z-index: 1;
  }
  

flexbox

• 정렬하고자하는 요소의 부모요소에 속성을 추가한다. display : flex; 또는 display: inline-flex;

• 어느방향으로 정렬할지 설정 flex-direction : row; row, row-reverse, column, column-reverse

  • 가로축 정렬방향에 따라 요소를 정렬하고 싶을 때 justify-content MDN justify-content 관련 문서 center, flex-start, flex-end, space-between, space-around

  • 세로축 정렬방향에 맞게 요소를 정렬하고 싶을 때 align-items, align-content MDN align-items 관련 문서MDN align-content 관련 문서center, flex-start, flex-end

  • align-items : 각 라인의 수직축을 기준으로 정렬된다.align-items : start;라면 각 라인별 상단으로 정렬,align-items : center;라면 라인별 중앙에 위치한다.

  • align-content : flex-wrap : wrap; 라서 요소들이 여러 라인으로 배치될 경우 사용된다. align-items와 달리 라인별로 정렬하는게 아니라 부모 요소 전체의 수직축에 따라 정렬된다. align-content: start;라면 모든 flexbox가 화면의 상단으로 정렬된다.

  • align-items 와 align-content 를 설정하려는 요소들이 라인 하나에 모두 배치될 경우 두 property 모두 같은 기능을 한다. 하지만 라인이 두개 이상일 경우 라인별 배치를 고려한다면 align-items를 사용해야하고 라인이 아닌 부모 요소의 전체 영역상 배치를 고려한다면 align-content를 사용해야한다.

• 한줄안에 모두 정렬할 것인지 설정 flex-wrap : nowrap; wrap, nowrap

  • nowrap : 자식요소의 width, heigth를 줄여서 한줄로 정렬한다.
  • wrap : 부모요소의 width, heigth 크기가 충분하지 않으면 여러 줄로 만들어서 display한다.
• flex-basis : auto 가 기본값. 항목의 크기가 flex-basis의 크기이다.

• flex-grow : flexbox의 요소가 남는 공간을 자식요소들끼리 나눌때 분배 비율

• flex-shrink : flexbox의 요소가 다른 요소와의 사이즈 경쟁에서 밀릴때 얼마나 줄어들어야하는지를 정하는 숫자.

  • flex-shrink : 0; : 난 절대 안 줄이겠다. 내 사이즈에 맞게 다른 요소들 크기를 줄여라
  • flex-shrink 의 값이 1 이상이면 flex-basis에 지정된 사이즈보다 작아진다.MDN flexbox flex-shrink 💡간혹 space-between 을 설정했을때 빈 공간이 많아도 요소들이 딱붙어있는 경우가 있는데 그럴때는 width : 100%;를 적어주면 width를 100% 사용해서 여유롭게 display 된다.
• float를 사용했던 코드

.tab-menu {
  ...;
}

.tab-menu::after {
  content: "";
  display: block;
  clear: both;
}

.tab-menu-item {
  float: left;
  ...;
}

• flex로 변경한 코드

.tab-menu {
  display: flex;
  /*flex-direction: row;*/
  /*flex-wrap: nowrap;*/
  /*justify-content: flex-start;*/
  align-items: center;
  ...;
}
//기본값은 생략해도 된다.

이렇게 쉬울 수가 역시 float 사용하려면 너무 복잡해서 안 쓰는게 편하겠다고 생각 했는데 아주 쉬운 방법이 있었다. flex!!!