반응형 웹 기초

# 반응형 웹 개요

1. 반응형 웹이란, 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 시용하는 기법을 뜻한다.

2. 반응형 웹사이트에서 가장 핵심이 되는 키워드는 "가변성"이다

3. 기기에 따라 다른 화면 크기에 대응하기 위해 웹문서에 viewpoint 속성에 대한 마크업을 추가해야 한다

 

 

# 상대단위 em, rem

1. 절대 길이 단위인 px(픽셀)은 어떤 상황에서도 동일한 값을 유지하므로, 가변성이 없다

2. em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다

3. em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다

4. em으로 여백 크기(pading과 margin)를 정할 때는 자기 자신의 글자 크기를 기준으로 한다

 

 

# 뷰포트 단위 vw, vh, vmin, vmax

1. 뷰포트 크기를 기반으로 크기를 계산하는 가변 단위들이 있다

2. vw는 뷰포트 너비의 100분의 1 크기를 뜻한다

3. wh는 뷰포트 높이의 100분의 1 크기를 뜻한다

4. vmin은 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 크기를 뜻한다

5. vmax는 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 크기를 뜻한다

 

 

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

1. 비율 계산 기반으로 변화하는 가변 레이아웃에는 %단위가 주로 사용된다

2. %단위는 백분율 값으로, 부모 요소와의 상대적 크기를 지정한다

3. 너비와 여백은 부모 요소와의 상대적 크기를 지정한다

4. 높이는 부모 요소의 높이에 비례해 계산된다

5. 글자 크기는 부모 요소의 글자 크기에 비례해 계산된다

 

 

# CSS 함수 개념과 calc()

1. 함수한 주어진 인수에 따라 정해지는 값을 일컫는 표현이다

2. CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작한다

3. calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있다

 

 

# 미디어 쿼리

1. 미디어쿼리는 미디어 타입을 인식하고, 콘텐츠를 읽어들이거나 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치이다

2. 미디어 타입과 조건문(쿼리)로 구성된다

3. 다양한 미디어 타입과 조건을 지정할 수 있다

4. 화면(screen)의 너비(width)를 조건으로 사용하는 경우가 가장 많다

 

 

# 가변 이미지

1. 이미지 요소에도 상대 단위 em, vw, % 등을 사용할 수 있다

2. 브라우저에서 이미지는 기본적으로 비율을 유지한다

3. 이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있다

4. max-width 속성은 요소의 최대 너비 제한을 정할 수 있는 속성이다

5. picture와 source 요소는 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소이