반응형 웹 만들기(1)
<Do it! 반응형 웹 페이지 만들기>, 김운아 지음
01. 반응형 웹 기본 개념 이해하기
- 반응형 웹 = 사용자의 환경 또는 특정 행동에 따라 반응하는 웹
01-1. 반응형 웹이란?
- 2007년 모바일기기의 등장 => 모바일기기에 최적화된 모바일 웹 등장
- 태블릿, 패블릿 등 다양한 화면크기를 가진 디바이스 등장
- PC버전 웹과 모바일 버전의 웹을 별도로 제작/관리하는데 드는 비용과 시간의 문제
- 2010년 5월 반응형 웹 기술 등장
- 반응형 웹 : 각 기기 또는 환경마다 최적화된 웹사이트를 제공해주는 것
- 반응형 웹 예시들 => https://mediaqueri.es/
01-2. 왜 반응형 웹으로 만들어야 하나?
1) 유지보수가 간편하다!
2) 모바일 사용점유율의 증가!
3) 웹을 활용한 마케팅에 유리하다!
4) 검색엔진최적화(SEO)가 가능하다!
5) 미래지향적 기술!
01-3. 사례로 알아보는 반응형 웹 (내용생략)
01-4. 반응형 웹 학습과 제작을 위한 준비 작업
1) 웹 브라우저 - 크롬(Chrome)
2) 코드에디터 - 비주얼스튜디오코드(VS Code)
3) 예제파일
4) 호스팅서버 - http://www.dothome.co.kr
5) FTP 프로그램 - 파일질라(FileZilla)
01-5. 반응형 웹 제작을 위한 핵심 기술 맛보기
1) 가변 그리드(Fluid Grid) : 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 비율(%)로 제작하는 기술. Fluid Layout = Flexible Layout = Flexible Grid
2) 그리드(Grid) : 격자, 눈금. 웹 페이지의 가로 크기, 세로 크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용
3) 미디어쿼리(Media Queries) : 화면 크기와 환경 감지를 통해 웹사이트를 변경하는 기술
4) 뷰포트(Viewport) : 화면에 보이는 영역을 제어하는 기술. 스마트 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위한 기술
5) 플렉서블박스(Flexible Box) : 가변적인 박스를 만들어 웹사이트 구조 설계 할 수 있는 신기술
02. px을 %로 바꾸기 - 가변 그리드
02-1. 본격적으로 가변 그리드 배우기
1) 가변 그리드 공식 이해하기
가변 그리드 공식 : (가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 크기의 % 값
02-2. 가변 마진과 가변 패딩 이해하기
- 모든 박스들을 감싸고 있는 wrap과 같은 요소들의 너빗값을 고려하여 요소의 마진값과 패딩값을 지정해야 함
1) 가변 마진 설정하기
(가변 마진을 적용할 마진값 / 적용할 박스를 감사고 있는 박스의 가로 너비) * 100 = 가
변 마진값
2) 가변 패딩을 적용하는 두 가지 방법
- 기본 방법 : 가변 그리드 공식을 이용해서 적용
(가변 패딩을 적용할 패딩값 / 적용할 박스를 갑싸고 있는 박스의 가로 너비) *100 = 가변패딩 % 값
- 제한적인 조건이 있을 때 사용하는 방법
(가변 패딩을 적용할 패딩값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) *100 = 가변 패딩 % 값
- 박스는 가변적이되, 마진/패딩은 고정하고 싶을 때 : CSS3의 calc함수 이용
>> CSS3부터 함수 개념 등장. 복잡한 연산/반복작업 처리 가능. 'CSS함수'
- 브라우저별 기술지원 현황 확인 => http://caniuse.com
02-3. 폰트도 자유자재로! 가변 폰트 이용하기
- 폰트는 웹사이트를 구성하는 핵심 요소
- 모니터 해상도에 따라 달라지는 픽셀(px) 대신 상대단위인 em을 사용하는 것이 좋음
*최신 브라우저는 픽셀(px) 단위를 사용해도 축소, 확대 가능
- em은 대문자 M의 너비를 1em으로 표현한 것, 16px = 1em에 해당
1) 가변 폰트 : 반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때 상속 문제를 해결해주는 방법
(가변 폰트를 적용할 글자 크깃값 / 적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트값
- 가변폰트 크기를 간편하게 계산할 수 있게 해주는 사이트 => http://pxtoem.com
2) em 단위의 상속 문제를 해결해주는 rem 단위
- em 단위는 부모 박스에 글자 크기가 지정되어 있을 때 자식 박스에게 글자크기가 상속됨. 그래서 자식 박스의 글자 크기를 지정할 때 공식을 이용하여 글자 크기를 지정해야 하는 등 복잡함.
- rem 단위는 최상위 <html></html> 태그를 기준으로 해 상속문제가 발생하지 않아 유용
3) 진정한 가변 폰트 : vw, vh, vmin, vmax 단위
- vw(viewport width) 단위 : 웹브라우저의 너비를 100을 기준으로 하여 크기를 결정하는 단위
(vw 단위를 적용할 글자 크깃값 x 브라우저의 너빗값) / 100 = 크깃값
- vh(viewport height) 단위 : 웹브라우저의 높이를 100을 기준으로 크기를 결정하는 단위
(vh 단위를 적용할 글자 크깃값 x 브라우저의 높잇값) / 100 = 크깃값
- vmin(viewport minimum) 단위 : 웹브라우저의 너비와 높이 중 짧은 쪽을 기준으로 크기 결정
- vmax(viewport maximum) 단위 : 웹브라우저의 너비와 높이 중 긴 쪽을 기준으로 크기 결정
02-4. 멀티미디어 요소 가변적으로 만들기 - 가변 이미지와 가변 동영상
1) 비율에 상관없이 가변 멀티미디어 요소 만들기 : 가변형 레이아웃에서는 이미지와 동영상 등 멀티미디어 요소들도 가변적으로 작동해야 함
2) 유튜브, 비메오 등 자체 플레이어를 사용하는 동영상
- 패딩 속성 사용하기 : 대부분 동영상 요소는 16:9 비율로 이뤄짐.
- 스크립트 파일 사용하기
