[수업기록] Web : Reponsive Web

240822

 

1. bootstrap grid system

1) 개념 :

-웹 페이지의 레이아웃을 조정하는데 사용되는 12개의 컬럼으로 구성된 시스템

-왜 12개일까? 

(1) 약수가 많은 숫자다 

(2) 적당히 큰 수이다

 

 

2) 그리드 시스템 목적

- 반응형 디자인을 하기 위해

- 모바일, 태블릿, 데스크탑 등 다양한 기기에서 적절하게 표시할 수 있게

- 디바이스 종류나 화면 크기 상관없이 일관되게

 

3) 예시 : 구글 뉴스 

 

4) grid system 기본 요소 

(1) container 선언 : column들 담고 있는 공간

(2) column : 실제 콘텐츠 포함 부분 

(3) gutter : 컬럼과 컬럼 사이의 여백 영역(x축은 padding, y축은 margin으로 여백 생성,  gutter의 control 기준은 행)

(4) 1개의 row 안에 12개의 column 영역이 구성(각 요소는 12개 중 몇개 차지할지 지정)

기본 구조

- 실습 예제 

 

작업시 알아두면 좋은 vs code 단축키

ctrl+a + 아래 화살표 : 여러줄에 한번에 같은 내용 반영
ctrl_l : 해당 라인 하이라이트
alt + shift+ 방향키 : 한꺼번에 (내가 드래그로 선택한) 여러줄 복사
alt + 방향키 : (내가 드래그로 선택한) 뭉탱이 한꺼번에 이동

 

---

2. Grid system breakpoints

1) 개념 

-웹 페이지를 동적으로, 다양한 화면 크기에서 적절하게 배치하기 위한 분기점

-화면 너비에 따라 6개의 분기점 제공(xs, sm, md, lg, xl ,xxl - 화면 크기)

-gutter, offest, container, margin.. 등 breakpoint와 혼합되는 클래스가 많음(다양하게 쓸 수 있다)

각 breakpoints마다 설정된 최대 너비값 이상>=,<=으로 화면이 커지면, grid system 동작이 변경됨

 

3. Grid cards

1) 개념 : 위 방법이 어렵다면 아래처럼 아주 쉽게 나타낼 수 있다