[TIL - day3] CSS (Box 모델, Grid)

2945 단어 CSSTILCSS

오늘 배운 내용
📍 레이아웃 속성 grid 에 대해 알게되었다 (float, flex 만 사용해봐서 생소했다)
📍 반응형 웹을 위한 맛보기 (미디어 쿼리 활용하기)
📍 박스모델, 여백, 중앙정렬 등 -> 개인적으로 여백관련은 레이아웃 다음으로 골치아프다

1️⃣ BOX 모델 (+가운데 정렬)

  • margin > border > padding > contents
  • display 따라 사용하는 영역이 다르다.
    • inline : contents 의 크기만큼 (작게) 사용
    • block : 화면 전체를 사용 (자세히는 가로축, 세로축은 contents 크기만큼)
  • margin , text-align 을 활용하여 블록요소를 가운데 정렬할 수 있다.
/* 요소가 inline (혹은 inline-block) 일때*/
.inline {
	text-align : center;
}

/* 요소가 block 태그일때 */
/* 방법1. margin 을 활용한다. */
.block {
	margin:auto;
}
/* 방법2. display로 inline으로 변경 후 정렬한다. */
.block {
	display: inline;
    text-align: center;
}

2️⃣ Grid 속성

  • css 레이아웃 속성중 하나 ( display : float, flex..)
  • display: grid
  • grid-template-colums : 1rf 1rf 1rf > 수평으로 정렬
    • 1:1:1 의 비율로 가로 정렬하겠다 (원한다면 1:2:1 등 다양하게.. 100px 로도 표기가능)
 .container {
      display: grid;
      grid-template-columns: 1fr 200px 1fr;
 }
  • px을 사용할때는 고정값이기 때문에 요소의 box모델 (부피)를 고려하여 기입하자!

좋은 웹페이지 즐겨찾기