반응형 웹 제작 핵심 기술

• 화면 크기, 환경 변화 감지 기술
• 화면 크기 제어 기술
• 감지한 화면 크기로 변환하는 기술 등

가변그리드 사용하기

• 가변 그리드 : 웹사이트 제작시 화면 크기 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀 대신 %로 제작하는 기술
• 그리드 작업 : 규칙적인 간격으로 요소를 배치 하는 작업
  • 웹페이지 가로 크기 또는 세로크기, 여백, 단 수 등 웹사이트 구조 설계를 위한 의미

실습하기 : 고정 크기 박스를 가변크기 박스로 변환해보기 (Simple Version)

width : 960px -> width : 90% 식으로 변환하는 방법

미디어 쿼리와 뷰포트

• 미디어 쿼리 : 화면의 크기와 환경 감지 하여 웹사이트를 변경하는 기술
  • 반응형 웹을 만들때는 필수 기술이다.
  • 미디어 쿼리에서 쿼리는 컴퓨터나 기기에 화면 크기 등을 질의하고 컴퓨터가 대답해 주는 시스템이라 할 수 있다.
• 뷰포트 : 화면에 보이는 영역을 제어하는 기술
  • 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할때 꼭 필요하다.
  • 데스크톱은 해상도에 따라 영역이 결정되지만 스마트 기기의 보이는 영역은 데스크톱과 다르게 화면을 정확하게 감지하지 못하는 경우가 생긴다
  • 스마트 기기의 보이는 영역을 실제 화면크기로 변경함으로써 정확하게 감지할 수 있도록 하는 것이 뷰포트이다.

미디어쿼리 실습하기

<style>
@media all and (min-width:320px) {}
@media all and (min-width:768px) {}
@media all and (min-width:960px) {}
</style>

• 플랙서블 박스 (최근 떠오르고 있는 기술) : 가변적인 박스를 만드는 기술 + 웹사이트 구조 설계를 위한 기술

가변 그리드

가변 그리드 공식

• 가변그리드 기술은 정해진 공식에 의해 정확한 가변 크기의 박스를 만드는 기술이다.

(가변 크기로 만들 박스의 너비 / 가변 크기로 만들 박스를 감싸는 박스의 너비) * 100 = 가변크기의 % 값

가변 마진과 가변 패딩

가변 마진

• 간격을 자유자래로 설정하는 방법
  • 반응형 웹사이트에선 모든 요소가 가변적이어야 하며 구조상 간격 역시 마찬 가지여야 한다
  • 가변마진 공식 : (마진값 / 박스를 감싸는 박스 가로너비) * 100 = 가변 마진값

가변 패딩

• 가변 패딩 또한 가변 마진 공식을 이용하면 된다.

calc 함수를 이용하는 방법

• 고정 크기의 마진과 패딩을 위해서 사용하는 방법
• calc란 계산을 위한 css함수이다, 고차원 연산은 아니어도 간단한 사칙연산, 우선순위 계산등 활용 가능
  • width속성에서 사용할 수 있는 모든 값, 연산기호를 나타낸다.
  • 고정 마진 등을 적용할 때 사용한다.

calc 사용 방법

width : calc(100% - 100px);

가변 폰트를 이용하는 방법

가변 폰트

• 반응형 웹에서 글자 크기를 상대적인 단위로 사용하는 방법
  • (글자 크기값 / 적용할 요소를 감싸는 글자 크기 값) = 가변 폰트값
• em을 이용하는 방법

<p>태그 안에 <span> 태그가 있다고 가정해보자
<p> 태그에 폰트 크기를 2em으로 적용하고 <span> 태그에 1em크기 폰트를 적용한다 하면 

<p> 태그 -> 2em (32px), 
<span> -> 1em (16px), 
16px / 32px = 0.5 (글자크기) 

<p> : font-size : 6em (96px)
<span> : 64px 로 설정하고 싶다면?

64px/96px = 0.6666667em 

• rem을 이용하는 방법
  • em단위의 상속 문제를 해결하는 단위
  • 최상위인 태그를 기준으로 하기 때문에 상속문제가 발생하지 않는다.

진정한 의미의 가변 폰트

• vw, vh, vmin ,vmax 단위를 사용하는 방법
• 브라우저의 비율에 따라 글자 크기가 늘어나거나 줄어드는 단위이다.
• vw,vh 단위
  • 웹 브라우저의 너비를 100을 기준으로 하여 크기를 결정하는 단위
  • 만약 글자크기가 5vw라면 5%가 된다.
  • 만약 너비가 1024px이라면 (5*1024) % 100 = 51.2px
• vmin, vmax 단위
  • 웹브라우저의 너비와 높이중 짧은 쪽을 기준으로 하여 크기를 결정하는 단위
  • 글자크기를 웹 브라우저의 너비, 높이 중 작은 쪽을 100을 기준으로 해서 결정한다.

멀티미디어 요소 가변적으로 만들기

• 가변 이미지와 가변 동영상
  • width : 100%, max-height : 100% 등으로 설정하면 멀티미디어 요소가 가변적으로 작동
  • width : 100% 설정시 요소 크기를 100%로 유지하지만 max-width 를 설정해 놓으면 기본 크기 이상으로는 크기가 조절이 되지 않는다.
• 유튜브나 비메도 등 멀티미디어 요소를 가변적으로 만들기
  • 동영상 등은 대부분 16:9 비율로 이루어짐, 이 표준을 참고하여 패딩 속성을 이용하여 동영상도 가변적으로 만드는 것이 가능하다.

position : relative 
padding-bottom : 56.25%; // 9 / 16 

미디어 쿼리 디테일

미디어 쿼리 기본 문법

• 미디어 쿼리 작성시엔 기본 순서, 규칙을 따라야 한다.
• 필요에 따라 미디어 유형과 and 또는 , 연산자로 조건을 적용할 수 있다.
• 기본 사용방법

@media [only | not] [미디어 유형] [and 또는 ,] (조건문)[실행문]

@media : 미디어 쿼리 문법의 시작 

[only | not] 
	- only키워드는 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석 
	- not키워드는 not다음에 따라오는 조건을 부정하는 키워드 
		ex) not tv : tv를 제외한 모든 미디어 유형에 적용

미디어 유형
	- all : 모든 장치
	- print : 인쇄 장치
	- screen : 컴퓨터 또는 스마트 기기 화면
	- tv : 영상과 음성이 동시에 출력되는 장치
	- projection : 프로젝터 장치
	- handheld : 손에 들고 다니는 소형 장치
	- speech : 음성 출력 장치 
	- aural : 음성 합성 장치
	- embossed : 점자 인쇄 장치
	- tty : 디스플레이 기능이 제한된 장치
	- braille : 점자 표시 장치

[and | , ]
	- and : 앞뒤 조건이 모두 사실일 때 뒤에 따라오는것을 해석하라는 의미
	- , : d앞 뒤 조건 중 하나만 사실더라도 뒤에 오는것을 해석 
	- and, 콤마 선언은 생략 가능 
@media A and B [실행문], @media A,B [실행문]

(조건문)
	- 조건문이 사실일 때 뒤에 따라오는것을 해석 
	- 조건문은 and나 콤마 기호를 이용하여 2가지 이상 작성 가능하며 생략 가능 
	@media(min-width:320px)[실행문]
	@media(min-width:320px) and (max-width:768px)[실행문] 

width : 가로 너빗 값
height : 세로 높잇 값
device-width : 기기 너빗 값
device-height : 기기 높잇 값
orientation : 기기의 화면 방향 (portrait : 세로, landscape : 가로) 
aspect-ratio : 화면 비율 
device-aspect-ratio : 단말기의 화면 비율 
color : 기기의 비트 수 
color-index : 기기의 색상 수
monochrome : 기기가 흑백일때 픽셀당 비트 수
resolution : 기기의 해상도 
scan : TV의 스캔 방식
grid : 기기의 그리드, 비트맵 

{실행문}
	- 앞뒤 조건들이 모두 사실일 때 실행되는 실행문 
	- 일반적으로 css코드가 작성되는 부분이다.   

• 사용 예시

@media all and (min-width : 320x) { 실행문 }

• 미디어 쿼리로 브라우저 크기 감지 시의 주의사항
  • 미디어 쿼리를 이용해서 크기 감지시 보이는 영역을 뜻하는 뷰포트 크기를 기준으로 감지 한다는 점

뷰포트

뷰포트 없이는 반응형 웹도 없을 정도로 중요한 기술 중 하나이다.

• 뷰포트는 화면에서 실제 내용이 표시되는 영역을 나타낸다.
  • 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 된다
  • 스마트 기기는 기본 설정 값이 뷰포트 영역이 된다.
    • 스마트 기기는 기본 영역으로 인해 미디어 쿼리가 정상 작동하지 않는 문제가 발생 가능하다
    • 이러한 문제를 방지하기 위해 븊트 메타 태그를 이용해 크기나 배율을 조절해야 한다

<meta name="viewport" content="width=device-width, 
initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"

width : 뷰포트 너비
initial-scale : 초기 배율
minimum-scale : 최소 축소 비율 
maximum-scale : 최대 확대 비율
user-scalable=no : 확대/축소 여부 설정 

플렉서블 박스

• 기존 속성들로는 박스 배치 순서를 변경하거나 바꾸는 것이 불가능
• 플렉서블 박스를 통해 박스 요소들을 다양하고 자유롭게 조작할 수 있게 됐다

플랙서블 박스 기본 개념

• 플랙서블 박스 (부모박스)
  • 부모 박스는 가변적인 박스로 작동하기 위한 기본 개념이다
  • 부모 박스에서 생긴 특정 속성값을 적용해야 가변 박스로 작동하게 된다.
• 플랙서블 박스의 자식 박스 (플렉스 아이템)
  • 부모 박스 안의 자식 박스들을 나타냄
• 플랙서블 박스의 축 (주축, 교차축)
  • 주축 : 중심이 되는 축
  • 교차축 : 주축에 교차하는 축

플랙서블 박스 익히기

• 플랙서블 박스로 작동하게 하려면 display 속성의 값을 플랙서블 값으로 바꿔줘야 한다.

display : flex | inline-flex 

flex : 박스를 블록 수준의 플랙서블 박스로 작동하게 한다
inline-flex : 박스를 인라인 수준의 플랙서블 박스로 작동하게 한다. 

flex-direction : row | row-reverse | column | column-reverse 

row : 박스를 왼쪽 -> 오른쪽으로 배치 (주축 : 가로축)
row-reverse : 박스를 오른쪽 -> 왼쪽으로 배치 
column : 박스를 위 -> 아래로 배치 
column-reverse : 박스를 아래-> 위로 배치 

• 아이템을 여러줄로 배치하기

flex-wrap : nowrap | wrap | wrap-reverse 
nowrap : 박스를 한줄로 배치, 기본 값
wrap : 박스를 여러 줄로 배치 
wrap-reverse : 박스를 여러 줄로 배치하되 역방향으로 배치 

• 아이템의 배치방향과 여러줄 배치를 한번에 설정

flex-flow : [flex-diretion] [flex-wrap], row nowrap 

ex) flex-flow : row wrap-reverse;  

• 주축 방향으로 다양하게 플랙스 아이템 배치하기

justify-content : flex-start | flex-end | center | space-between | space-around 

flex-start : 주축의 시작점으로 배치 
flex-end : 박스를 주축의 끝점으로 배치 
center : 박스를 중앙으로 배치
space-between : 첫번째 박스와 마지막 박스는 양끝으로 나머지 박스는 동일 간격으로 정렬 
space-around : 양쪽 끝에 있는 박스의 양 옆에 공간을 둔채 자동 정렬 

• 교차축 방향으로 다양하게 아이템 배치하기

align-items : stretch | flex-start | flex-end | center | baseline 

stretch : 박스를 확장해서 배치하며 기본 값 
flex-start : 교차점의 시작점에 배치 
flex-end : 교차점의 끝점에 배치 
center : 교차축의 중앙에 배치
baseline : 교차점의 시작점에 배치되는 자식 박스의 글자 베이스라인에 맞춰 배치 

• 플렉스 아이템을 개별적으로 배치하기

align-self : auto | stretch | flex-start | flex-end | center | baseline

auto : 부모 박스의 속성 값을 상속, 부모 속성값이 없다면 stretch 속성 값이 적용 

• 여러줄인 플랙스 아이템을 교차축 방향으로 다양하게 배치하기

align-content : stretch | flex-start | flex-end | center 
| space-between | space-around

• 플렉스 아이템의 배치 순서 바꾸기

order : 0 | 정숫값 

박스의 배치 순서를 자유롭게 바꿀 수 있다. 
정숫값으로 양수 혹은 음수 값 사용 가능하며 입력된 양수 값에 따라 배치 
값이 낮을수록 우선순위가 높다. 
음숫값 입력시에 기본값인 0이 되며 동일한 값이라면 태그 순서상 뒤에 작성된 태그가 우선 적용된다. 

• 플렉스 아이템의 크기 늘이고 줄이기

flex : [flex-grow] [flex-shrink] [flex-basis]
				0,1,auto (기본값)

flex-grow : 플렉서블 박스에 여백이 있을때 플렉스 아이템의 크기를 늘일 수 있는 속성 
flex-shrink : 플렉서블 박스 안의 아이템의 크기가 넘칠 경우 크기를 줄 일 수 있는 속성 
flex-basis : 플렉스 아이템의 기본 크기를 설정하기 위한 속성