[CSS] 너비, 높이 설정 및 정렬, 간격 그리고 반응형!

1. 너비, 높이 설정
    반응형 때문에 너비, 높이 설정시 % 와 vh, vw 를 많이 쓰는듯 하다. 

    부모격인 body 에는 절대값인 vh, vw 를 쓰는게 좋은듯 하고, body의 자식은 %로 값을 배정하는게 좋아보인다. 

     body 에 %를 주었을때 레이아웃이 해당 퍼센트로 잘 안먹히는 듯 하다. 특히 100%를 주었을때..

 

2. 정렬

     기본적으로 좌상단 정렬이다 보니 이 부분도 조금 애를 먹었다. 부모쪽에 display : grid; 와 place-items : center; 를 주니
     자식들 정렬이 원하는대로 되었다.

 

3. 간격

     자식들 간격을 두기 위해 margin 혹은 padding 을 두면 될거라 생각을 했는데 좀 꼬이는 문제가 있는듯 하다. 자식에 해당 값을
     주었는데 부모가 바뀐다든지... 해서, 내 생각엔 margin이나 padding을 지우거나 0으로 두고, 자식의 height, width 값을 %로 할당
     하는것이 나아 보인다. 

 

4. 반응형

css를 통해 쉽게 반응형으로 만들 수 있는데, 보통은 width 로 판별하여 구분한다. 이를 위해 md : , lg : ,xl : , sm : 등이 사용되며, display가 grid 인 예를 들자면

• 중간 크기 일 경우 설정 md : grid-cols-2
•  큰 스크린의 경우 설정 lg : grid-cols-3
• md, lg 처럼 특별한 것 없이 그냥 grid-cols-1 을 두게 되면, md, lg 가 아닌 경우가 적용된다.