CSS - 높이값 설정, 가운데 정렬, 기타

여태까지는 높이값을 하나하나 다 줬었고,
가운데 정렬을 하기 위해 주로 flex 기법만을 이용해왔지만 최근에서야 다른 방식들도 쓰게 되어 기록해 놓는다.(scss)

form/Table (등..)을 스타일할 때

높이값을 따로 주지 않는다

• 자동으로 auto가 된다.

• min-height를 준다.

-> 이유는 다른 인풋이나 버튼과 같은 기타 UI 컴포넌트, 혹은 패딩값이 추가될 수도 있기 때문이다.

가운데 정렬

ex) 테이블 - 기본

// 테이블의 맨 위 가로 - 분류제목 부분

.부모{
  
   display: flex;
   width: 100%; // 부모에게 상속했을 경우
   
  1.  height: 50px; 
  // 이 경우 글자수가 부모 높이 이상일 경우 부모칸 밑으로 빠져나온다.

  2.  line-height: 50px;
   // 글자수가 많을 경우 50px 만큼 칸이 확장된다.(줄 간격이 너무 크기 때문에 보기 안좋다.)

  3. min-height: 50px; 
  // line-height를 따로 줘서 줄 간격 조정해도 되고, 부모의 칸도 자연스럽게 늘어난다.

  .자식{
    
/* display: block, inline-block */    
  display: block (inline-block)
  text-align: center;
  
  1. margin: auto;
  // 수직으로 가운데 정렬 가능하다.
    
  2. padding: 14px;
  // 전체 높이에서 위아래 여백주면 글자가 늘어나더라도 일정한 여백 유지하고 텍스트들이 align-items: flex-start된 효과   
 
  
    
/* display: flex */        
/* 
    display: flex;
	align-items: flex-start;
    justify-content: center;
    word-break: break-all; // 단어가 테두리 밖으로 넘어가지 않게 
	
    padding: 14px;

*/    
    
  	 &:nth-child(1){
          width: 237px;
        }
        &:nth-child(2){
          width: 276px;
        }
        &:nth-child(3){
          width: 234px;
        }
        &:nth-child(4){
          width: 173px;
        }
  }
}

  .다른 리스트{
      display: grid;
      grid-template-columns: 237px  276px 234px 173px;
    // 자식들 width값 주기 위해 그리드로 만들어도 됨
      min-height: 58px;

      자식{
        display: flex;
        padding: 14px;
        word-break: break-all;
      }
    }