[CSS]grid 레이아웃, 반응형 웹

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard

[코드캠프] 강력한 CSS 강의 - 인프런

---

 

🔎grid 레이아웃

float>flex>grid

float: 현재 거의 사용되지 않음!

flex, grid: 상황에 따라 혼용

flex는 1차원적 구조→row 혹은 column

 

✔️grid-template-rows

grid의 행의 개수 및 크기를 지정할 수 있다.

grid-template-rows: 1fr 2fr 200px

 

✔️ grid-template-columns

grid의 열의 개수 및 크기를 지정할 수 있다.

 

✔️ fr

fraction(분수)의 약자, grid-template에서 사용할 수 있는 비율 단위

grid-template-columns: 1fr 2ft 200px;

 

✔️ repeat(a,b)

grid-template에서 사용할 수 있는 반복 함수 b 규격의 grid-template를 a개 생성한다.

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

 

✔️ grid-column/gird-row

grid-item이 얼마만큼의 영역을 차지할지 정의한다.

grid-column: 1/3;

 

🔎flex와 grid의 차이점

✔flex

• 비교적 작은 단위의 레이아웃 구성에 적합
• 작업 유동성이 높기 때문에, 디자인이나 기획이 확실하게 잡히지 않아 변경 가능성이 있는 경우에 적합

✔grid

• 큰 규모의 레이아웃 구성에 적합
• 레이아웃 구조가 확실하게 잡혀있는 경우, 효율적으로 반응형 디자인을 구현할 수 있음
• 단, grid는 상대적으로 최신 기술이기 때문에 모든 브라우저에서 지원하지 않는다!

 

📖반응형 웹

오늘날 사람들은 스마트폰, 태블릿 PC, 데스크탑 PC등 굉장히 많은 디바이스를 통해 웹 사이트에 접속한다.

 

✔️ 해결방법

1. 스마트폰과 접속시에, 데스트탑으로 접속시에 다른 url로 연결되도록 한다.⇒약간 옛날 방식!
2. url은 동일하되, 디바이스에 반응해서 적절한 화면이 그려지도록 하는 것!

 

🔎미디어 쿼리

✔️미디어 쿼리란?

뷰포트의 너비에 따라 웹 사이트의 스타일 시트를 수정할 수 있다.

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

: 스크린의 viewport 너비가 500px이하일 경우 적용시킬 스타일 시트

 

🔎breakPoint

✔️breakPoint란?

반응형 웹사이트 작업의 기준이 되는 중단점을 말한다.

• Mobile: 0~767px
• Tablet: 768~1023px
• PC: 1024px~1439px
• PC Large: 1440px~

 

🔎반응형 웹에서 자주 사용되는 속성

✔️ max-width & max-height

해당 요소의 최대 너비 or 최대 높이를 설정한다.

max-width: 1240px

 

✔️ max()

소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력하는 함수

height: max(320px, 20%)

 

✔️ min()

소괄호 안에 입력된 값 중 제일 낮은 값을 속성값으로 출력하는 함수