옛날에는 상관이 없었지만, 지금은 하나의 웹페이지로 컴퓨터 PC와 모바일에서 볼 수 있게 만들어지고 있다. 그렇기에 발전되고 있는 것이 반응형 웹피이지들이다. 하나의 웹페이지를 만들면 컴퓨터 PC 화면부터 작은 모바일기기 까지 볼 수 있다면 작업시간도 줄고 다양한 서비스를 할 수 있을 수 있다.
html5 뷰포트 반응형 웹페이지 만들기
viewport responsive webpage
뷰포트 viewport 를 사용하면 화면의 크기에 맞게 이미지부터 글의 내용까지 축소되고 정렬됩니다.
즉, 사용자의 기기에 맞도록 자동으로 최적화를 시켜주는 기능을 하는 것이기도 합니다.
최적화라고 하기에는 조금 오류가 있지만, 다양한 화면에서 적당히 자동으로 조절해서 보여준다라고 이해하자.
정확하고 디테일한 반응형 화면이 좀 더 손이 간다.
화면설정
가장 기본적인 사용으로 메타 태그로 viewport 를 삽입해 주면 그 뿐이다.
아래의 코드한줄이 전부이다.
하지만, 이 문장 하나로 다양한 화면크기로 자동으로 적절하게 최적화가 된다.
<!--
반응형 웹페이지 viewport 설정
width=device-witdh : 사용자의 장치의 화면 너비를 기준으로 화면너비를 설정한다.
initial-scale=1.0 : 브라우저에서 페이지가 처음 로드될 때 확대, 축소 수준을 설정한다.
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
예시를 보자
먼제 웹페이지를 하나 대충 만든다.
커다란 사이즈의 이미지를 하나와 긴 문장의 컨텐츠를 하나 붙여넣고 브라우저에서 확인한다.
이미지나 글자들이나 어울리지 않는다.
뷰포트와 스타일을 지정
이미지와 문자 컨텐츠들의 가로사이즈를 지정해 준 후 다시 비교해 본다.
웹페이지를 웹표준에 의한 반응형으로 만들경우 컨텐츠의 크기는 상대 너비 값 ( % ) 를 사용하는 것을 권장한다.
아래의 코드와 이미지를 보면 위에 제시한 컨텐츠 화면에 비해 다른 화면에서 표시되는 것이 안정감있게 정돈된 것을 확인할 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p, img {
width:100%;
}
</style>
이것은 아주 간단한 형태의 반응형화면이다.
다양한 기기의 화면에서 더 많은 컨텐츠를 더 많이 골고루 표현하기 위해서는 미디어쿼리를 사용해야 할 때도 있다.
위의 화면처럼 나온다고 해서 그대로 따라하면 화면을 벗어나는 경우도 있다.
위의 방법을 벗어나거나 컨텐츠가 깨지는 일이 발생하면 미디어쿼리를 사용하여 화면을 최적화 시켜줄 필요가 있다.
전체 코드
예시로 사용한 코드는 아래와 같다.
컨텐츠의 내용은 나무위키를 참고했으며 이미지는 구글에서 떠도는 것을 아무것나 선택했다.
반응형 웹페이지를 위해서 meta 태그에는 viewport 를 사용하고 style 에서 가로 사이즈를 상대너비 값인 % 를 사용한 것을 다시 확인하자.
<!-- html5 문서 -->
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p, img {
width:100%;
}
</style>
</head>
<html>
<head>
<!-- // -->
</head>
<body>
<!-- // -->
<img src="https://lh3.googleusercontent.com/oig7Ql9MWYZgt4DTc5j2CcCxTnPjDrj_5AJK58CHRLeUTn6Rsxzx5m2xd4wWNZ4Ycol7ljtUa24cM4Oj2QLYSVSgDg=w640-h400-e365-rj-sc0x00ffffff"/>
<p>
Fate/프랜차이즈로 개발된 일본의 스마트폰용 모바일 게임.
</P>
<p>
2014년 7월 27일에 텔레비전 애니메이션 《Fate/stay night [Unlimited Blade Works]》,《 극장판 Fate/stay night [Heaven's Feel]》과 함께 공개된 작품들 중 하나로,
애니메이션 방영 타이밍에 맞춰 스마트폰 게임도 내보자는 애니플렉스측의 제안에 따라 《Fate/Apocrypha》에서 엎어진 Fate 온라인 게임화 설정을 리부트시켜 기획된 작품이다.
</P>
<p>
나스 키노코가 시나리오 감수 및 시나리오 집필[12]을 맡고, 그 외의 시나리오 집필 담당으로는 히가시데 유이치로(Fate/Apocrypha 작가), 사쿠라이 히카루(Fate/Prototype 창은의 프래그먼츠 작가),
호시조라 메테오, 미나세 하즈키[13]가 있다. 타케우치는 캐릭터 디자인 및 아트 디렉터를 맡으며, 캐릭터 디자인 담당 인원은 50명 이상이다.
</P>
<p>
원래는 UBW의 방영에 맞춰 2014년 겨울에 서비스를 개시할 예정이었으나 연기된 끝에 결국 애니메이션의 방영이 종료된 2015년 7월 30일에 와서 서비스가 시작되었다.
</P>
<p>
원래는 iOS 판도 7월 30일에 발매 예정이었지만, 애플의 검수를 통과하지 못해서 대기중이다가[14] 8월 12일 출시되었다.
</P>
<p>
특징적인 점은 매 분기 20개 이상의 게임이 쏟아지는 일본 모바일 게임 시장 내에서 매 이벤트 분기점마다 안드로이드/iOS 앱 스토어 순위 1위[15]를 찍는다는 점이다.[16]#
</P>
<p>
기간은 제각각이나 1등은 무조건 찍고 있으며, 유저 수도 꾸준히 늘어나는 추세를 보인다.
</P>
<p>
그리고 넷마블의 퍼블리싱으로 2017년 11월 21일 국내 정식 서비스가 출시되었다.
</P>
<p>
초창기에는 의외로 서비스의 질도 좋았고 매출도 높게 나왔으나, 점차 운영진이 교체되면서 서비스의 질이 급속도로 떨어지게 되고 결국 한국 Fate/Grand Order
2021년 근하신년 스타트 대시 캠페인 중단 사태라는 사건이 터지고 이게 2021년 게임업계 연쇄 파동으로 확장되면서 어떤 의미로는 한국 게임업계에 한 획을 그은 전설적인 게임이 되었다.(...)
</p>
</body>
<script type="text/javascript">
</script>
</html>'programming > web' 카테고리의 다른 글
| html 태그 여백을 두자 margin padding 차이 (0) | 2021.06.15 |
|---|---|
| html5 기본 템플릿 만들기 template (0) | 2021.04.16 |
| 자바스크립트 애니메이션 라이브러리 anime.js javascript animation library (0) | 2021.02.20 |
| html5 독학 빠르게 익히는 방법 (0) | 2021.02.18 |
| html5 문서 구조 살펴보기 (0) | 2021.02.17 |
댓글