반응형
반응형 웹에 대하여 알아보자
원래는 기존의 ,tistory에 있는 스킨을 뜯어 고쳐 사용할 예정이었고, 사실 만들었었다.
근데! 반응형 웹이 아닌거임...ㅂㄷㅂㄷ
반응형의 반짜도 모르기 때문에 반응형웹에 대하여 어느정도 공부해가면서 만들어갈 예정이다.
참조: https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=ko
- meta viewport 태그를 사용하여 브라우저 뷰포트의 너비와 배율을 제어한다.
- 기기 독립적 픽셀화면 너비에 맞추려면 width= device-width를 포함한다
- 기기 독립적 픽셀과 css 픽셀간에 1:1관계를 설정하려면 initial-sacle=1을 포함한다.
모바일 브라우저는 데스크톱 화면 너비에서 웹페이지를 렌더링 한 다음, 글꼴 크기를 늘리고 콘텐츠의 배율을 조정하여 화면에 맞추는 방식을 사용한다.
아래 그림과 같다! 모바일에서는 보통 화면이 컴퓨터보다 작기 때문에, 컴퓨터에 사용되었던 애들을 그대로 옮겨 불러온다면, 보기 어려워질 것이다 그러므로! meta viewport값 width=device-width를 사용하여 기기 독립적 픽셀에서 화면 너비에 맞게 페이지를 맞춰주자!
1. viewport가 없는 페이지 |
2. viewport가 있는 페이지 |
|
|
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</haed>
반응형
'Play > 끄적끄적' 카테고리의 다른 글
| [스킨만들기] 4) 새로운 메뉴모양 (0) | 2018.07.09 |
|---|---|
| [스킨만들기] 3) 사이드 메뉴 만드는중 (0) | 2018.07.03 |
| [스킨만들기] 1) 컨셉을 정해보자 (0) | 2018.07.02 |
| [일기] 2018/6/26/목 - tistory 스킨을 제작하고싶다... (1) | 2018.06.28 |
| [일기] 2016/6/25/월 - 다이어트 다이어트.... (0) | 2018.06.25 |
댓글