1) 반응형 웹이란 

기기나 브라우저의 크기에 맞게 구성 및 크기를 변경해가며 반응하는 것

'가변성'

viewport - 현재 화면에 보여지고 있는 영역

기본 문서 코드 - vscode 에서 ! 로 자동완성 가능 

2) 상대 길이 단위 

px(절대 길이 단위) - 가변성 없음 

1.em - 부모 요소의 글꼴 단위 *margin,padding 정할때는 자기 자신의 글자 크기를 기준으로 함

2.rem - 루트(=html) 요소의 글꼴 단위 *기본값 16px

┗> 가변성을 지니지만 기기화면에 따라 크기가 달라지는 단위는 아님 

3) 뷰포트 단위 

반응하는 단위들 - 뷰포트 크기를 기반으로 값을 계산하는 가변 단위

4) 가변 레이아웃 (가변 그리드)

레이아웃에도 비율에 기반한 개념을 적용 가능 → % 사용

% - 보통 부모 요소와의 상대적 크기 지정시 사용 * 너비,높이,여백,글자크기에 사용가능

{clear : both;}

*float 효과를 clear 하고 요소를 새롭게 배치 가능 

5) css 함수 개념과 calc()

함수명(x) - x의 값에 따른 결과값을 속성으로 적용 

calc(표현식) - 계산식의 결과를 속성값으로 지정

6) 미디어 쿼리 - css 부가기능

미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지

*미디어 쿼리 여러개 써서 조건 여러개 설정 가능 

구성 :

미디어 쿼리 종류 :min-width, max-width, min-height, max-height, orientation(portrait 또는 landscape 감지), color(기기의                                 색상당 비트 수), color-index(출력 기기의 색상 테이블 수), ..

미디어 쿼리 적용 방법

1.style 태그에 추가 *주로 사용

2.link 태그에 추가

3. import 구문을 이용한 추가

@import url("style.css") screen and (max-width :768px);

7) 가변 이미지

이미지 요소에도 상대 단위 사용 가능 *주의할 점 -브라우저가 대개 이미지의 비율을 유지함, 이미지가 무작정 커지는 것

- max-width : 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않도록 (css)

-picture : 브라우저의 특정 조건에 따라 이미지를 반응형으로 (html)

8) 가변 동영상

가변 이미지와 동일한 처리가능, 허나 동영상 서비스에 따라 복잡 

- mp4와 같은 일반 동영상을 보여주는 경우

동일한 처리 

- 다른 사이트에서 동영상을 가져와 보여주는 경우 

width를 조절하는 것으로 처리 불가 

-> 여백을 만들고 여백에 동영상을 절대값으로 고정시킴 

9) 모듈화 디자인 

컴포넌트 = 독립적이고 재사용 가능한 모듈

모듈화 - 개별 컴포넌트를 하나의 모듈로 보고 작업하는 것 

반응형 컴포넌트 사용시 반응형 페이지,스타일 재사용 가능, 페이지 일관성 유지 용이