[TIL - day3] CSS (Box 모델, Grid)
오늘 배운 내용
📍 레이아웃 속성 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: float 속성관련 포스팅 <= 📚 전날TIL 기록한것 복습!
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모델 (부피)를 고려하여 기입하자!
Author And Source
이 문제에 관하여([TIL - day3] CSS (Box 모델, Grid)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jiynn_12/TIL-CSS-Grid-Responsive-애니메이션
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- display: float 속성관련 포스팅 <= 📚 전날TIL 기록한것 복습!
display: grid
grid-template-colums : 1rf 1rf 1rf
> 수평으로 정렬- 1:1:1 의 비율로 가로 정렬하겠다 (원한다면 1:2:1 등 다양하게.. 100px 로도 표기가능)
.container {
display: grid;
grid-template-columns: 1fr 200px 1fr;
}
Author And Source
이 문제에 관하여([TIL - day3] CSS (Box 모델, Grid)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiynn_12/TIL-CSS-Grid-Responsive-애니메이션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)