20230224 TIL

grid 레이아웃

Grid 속성

display: grid; 적용시 요소의 구조 변화

grid-container : grid 레이아웃이 적용된 요소

grid-item : 자식요소

grid-line : grid item 사이의 경계

grid-number : 몇번째 grid-line 인지 구분

grid-template

grid의 행&열의 개수 및 크기 지정

ex. grid-template-rows : 1fr 2fr 200px (행)

  grid-template-columns : 1fr 2fr 200px (열)

단위 : fr

fraction(분수) : grid-template의 비율 단위

repeat()

grid-template : repeat() -반복함수 적용 가능

repeat(a,b) → b규격의 grid-t를 a개 생성;

ex. grid-template-columns: repeat(4, 1fr);

 = grid-t-c : 1 fr 1 fr 1 fr 1 fr;

   g-t-r : 3fr repeat(2, 1fr 200px)

= : 3fr 1fr 200px 1fr 200px

grid-column & grid-row

gird-item에 줄 수 있는 속성

각 grid item이 열, 행 방향으로 얼마나 영역차지할지 정의

값 = 시작점이 되는 grid number, 종료지점 g-n

[예시]

grid-template-columns: 200px repeat(3, 1fr);

grid-template-rows: 1fr 2fr

FLEX vs Grid

flex : 1차원적인 구조 ; row, column중 택1, 배치방향 결정

     비교적 **작은 단위 레이아웃 구성**에 적합

     작업 유동성 높아 디자인, 기획 변경 가능성 높은 경우에 적합

grid: 2차원적인 구조,

     row, column 방향의 **배치방식 동시설정 가능**

     **큰 규모 레이아웃 구성**에 적합

     반응형 디자인의 효율적인 구성

     상대적으로 최신 기술 → 모든 브라우저에서 지원x

     (cf. [caniuse.com](http://caniuse.com) )

반응형 웹

기기의 Viewport 규격에 반응해 레이아웃 자동변경

스마트폰용 웹, 데스크탑용 웹 따로 만들기 : 구식

동일한 url로 접속해도 규격에 따라 달라짐.

미디어 쿼리

뷰포트의 너비에 따라 사이트의 스타일시트를 수정할 수 있게 해주는 CSS의 기능 (너비, 단말기 종류, 해상도 등을 기준으로도 설정O)

미디어 쿼리의 기본 형태

@media screen and (max-width: 500px){

/ 스크린의 너비가 500px 이하일 때 적용할 스타일 시트 /

}

• @ media : 미디어 쿼리 기능 활성화

• screen : 디지털 화면(screen)에 노출시 중괄호 안 속성 적용

• max-width: px : 뷰포트너비 < 500px 일시 적용

• and : 조건 연결 ( 연결한 조건 모두 만족시 )

BreakPoint

반응형 웹페이지의 작업 기준이 되는 중단점

pc, tablet, mobile 의 기준이 되는 규격 분기

• 가장 일반적인 규격, 더 자세하게 나누기도 가능

  ex. 모바일도 크기 다양, 태블릿도 다양(패드미니,프로)

반응형 웹에 자주 쓰이는 속성

max-width; 가로 규격 한정 / max-height:

min-width / min-height

max() ; 괄호안 입력값 중 최댓값을 속성값으로 출력/ min()

height : max(320px, 20%, 20vh)