1. 반응형 왜 만들어야 하나?
(1) 반응형 장점
: 유지보수 간편 (모든 테블릿 모바일 종류를 하나의 css에서 작업)
: 마케팅에도 좋음 - 기기 상관없이 최적화된 구조로 정보 전달
: 미래 지향적 (어떤 화면이든 모두 대응 가능)
(2) 반응형 잘 된 사례
: 스키니 타이 - https://skinnyties.com/
: 보스턴 글로브(신문사 사이트) - http://www.bostonglobe.com/
: 조인스(국내 잡지사) - http://www.joins.com/
: 한국은행 화폐박물관 - http://museum.bok.or.kr/index.do
2. 가변 그리드
: 화면의 크기 상관없이 자유롭게 늘어나거나 줄어들 수 있도록 한 것
# 그리드 : 격자, 눈금을 말하는데, 설계를 위한 의미로 통일 됨
(가변 크기로 만들 박스 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 크기의 값
300/960 * 100
3. 미디어쿼리(Media Queries)
: 컴퓨터에 어떤 종류의 미디어니? 혹은 미디어의 화면 크기는 어느정도 되니? 라고 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술, 반응형 웹 제작시 반드시 필요한 기술
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>responsive web media queries test</title>
<style>
@media all and (min-width:320px){
body{background:red;}
}
@media all and (min-width:640px){
body{background:green;}
}
@media all and (min-width:900px){
body{background:yellow;}
}
</style>
</head>
<body>
</body>
</html>
: only 또는 not @media [미디어유형] [and 또는 ,] (조건문){실행문}
-> only미디어 쿼리 지원하는데서만 됨(only 키워드 잘 안씀), not 제어하는 곳: 미디어유형은 생략 가능하며, all 키워드에 대응
-> and 앞뒤 조건이 사실일 때 뒤에 해석, 또는 조건 사실일 때 실행 (생략 가능)
-> and 뒤 조건문 앞에는 꼭 공백이 있어야 함
# 크기는 html 문서 크기로 감지
<link rel="stylesheet" href=""
4. Viewport
: 화면에 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수많은 기기 화면 크기를 감지해야 할 때 꼭 필요함
-> 데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만, 스마트폰은 기본 설정값이 보이는 영역으로 설정되기 때문에 미디어쿼리를 사용해도 스마트 기기 실제 화면 크기 감지를 못해 viewport는 꼭 필요한 반응형 웹 제작 기술임
기본적으로 설정되있는 뷰포트 영역때문에 미리어 쿼리가 정상적으로 작동 안할 수 있음
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1, maximum-scale=1, user-scale=no">
:width=device-width -> 기계 너비에 맞추겠음, height=device-height 기계 노피에 맞춤
: initial-scale : 기본값은 1, 1보다 작으면 축소된 페이지 표시, 1보다 크면 확대된 페이지 표출
: user-scale : 뷰포트 확대/축소 여부 결정, 기본값은 yes, no하면 사용자가 페이지 확대x
: minimum-scale : 뷰포트의 최소 축소 비율 지정, 기본값은 0.25
: maximum-scale : 뷰포트 최대 확대 비율 지정, 기본값은 5.0
(1) 뷰포트 영역 확인법
: 크롬 브라우저 요소 검사 도구 이용 / 개발된 웹사이트 접속해서 확인
5. 가변 패딩 적용 방법
(1) 식1
: 가변패딩값 = (가변 패딩을 적용할 패딩값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) * 100
ex) 40/960px
<head>
<meta charset="UTF-8">
<title>responsive web media queries test</title>
<style>
#wrap{ width:90%; margin:0 auto; background:green;
height: 500px;}
p{padding:40px 4.1666666666667%;}
</style>
</head>
<body>
<div id="wrap">
<p>데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만, 스마트폰은 기본 설정값이 보이는 영역으로 설정되기 때문에 미디어쿼리를 사용해도 스마트 기기 실제 화면 크기 감지를 못해 viewport는 꼭 필요한 반응형 웹 제작 기술임</p>
</div>
</body>
(2) 식2
wrap 고정 값은 960.
너비값 설정
<style>
#wrap{ width:90%; margin:0; border:4px; background:green;
height: 500px;}
p{width:54.166667%; padding:40px 4.1666666666667%; margin:0; background:yellowgreen;}
</style>
600-(40*2) = 520, (520/960)*100
(40/960) * 100 = 4.1666667%
6. 가변폰트 적용 방법
1) em
: 부모의 크기를 받아 사이즈를 바꿈
식 : (가변폰트를 적용할 글자 크깃값 / 적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변폰트 값
: 32px/64px = 0.5
-> rem : html태그를 기준으로 하기 때문 상속 문제가 발생하지 않아 유용하게 쓸 수 있음
2) rem
64px - 32px
3) 진정한 가변폰트
가변폰트는 em 단위의 글자크기로 인해 발생하는 상속 문제를 공식으로 이용해서 해결하는 방법일뿐 브라우저 비율에 따라 변하지 않음
vw, vh. vmin. vmax 단위를 사용하면 브라우저에 따라 글자 크기가 늘어나거나 줄어듬
식 : (vw, vh, vmin, vmax 단위를 적용할 글자 크깃값 * 브라우저 너빗값) / 100 = 크깃값
7. 멀티미디어 요소 가변적으로 만들기
: 비율에 상관없이 가변적인 멀티미디어 요소 만들기
width, height를 %로 설정 -> 브라우저에 맞게 보임
-> width를 100%로 하려면 width와 max-width:100% 로 맞춰야 함 -> 두개 써주는 이유는 안정성을 위함.
-> width를 100%를 안하면 이미지, 영상이 자신의 기본크기 이상으로는 안늘어남
8. 플랙서블 박스(flexible box)
(1) 속성
: 속성명: display : 속성 값 : lfex, inline-flex, 적용요소 : 모든요소
: 속성값명 : flex - 박스를 블록 수준의 플렉서블 박스로 작동하게 함
inline-flex - 박스를 인라인 수준의 플렉서블 박스로 작동하게 함
'Web Programming' 카테고리의 다른 글
| [Javascript] LocalStorage, SessionStorage에 저장하기 / 브라우저별 Storage 용량 제한 (0) | 2018.11.21 |
|---|---|
| [Javascript] 브라우저 언어 가져오기 (0) | 2018.11.21 |
| D3.js 빠르게 알아보기 (0) | 2018.10.11 |
| SW개발자와 디자이너가 가까워지는 법 (0) | 2018.08.07 |
| 클린코드 2장 : 의미있는 이름 (0) | 2017.10.22 |