메뉴 건너뛰기

2022.04.08 22:15

이미지파일

조회 수 109 댓글 6

안녕하세요 명품책으로 공부하고 있습니다. 맥으로 예제를 연습하고 다시 아이폰으로 보는데 제목의 문자만 보이고 그 나머지(이미지)는 보이지 않습니다. HTML5는 이문제점을 해결해주었다고 했는데 보이지 않습니다. 왜일까요?

?
  • ?
    관리자 2022.04.09 00:38
    PC와 아이폰의 스크린의 크기가 다르기 때문인데,
    이를 위해서는 웹 페이지에 이것을 조절하는 CSS 스타일이 있습니다.
    이 스타일로 웹 페이지를 만들어주어야 합니다.
    그런데 현재 웹프로그래밍 사이트에서는 모바일 단말기처럼 작은 스크린을 가진 것을 고려하지 않고
    PC 스크린만 고려하였기 때문입니다.
  • ?
    스물다섯 2022.04.09 12:02
    스타일로 사이즈를 작게 지정했는데도 왜 이미지가 보이지않을까요?
  • ?
    스물다섯 2022.04.09 18:46
    그럼 혹시 PC 스크린과 모바일 스크린 전부 고려한 내용이 담긴 추천하실만한 책이 있으신가요?
  • ?
    스물다섯 2022.04.09 06:12
    답장주셔서 감사합니다. 캔버스를 사용하여 아이폰으로 보일수있게 하나의 예제를 보여주실수 있으신지요?
  • ?
    스물다섯 2022.04.09 09:02
    스타일에서 이미지 사이즈를 width: 250px; height: 150px;로 지정했습니다. 그러나 여전히 아이폰에서는 보이지 않습니다. 왜일까요?
  • ?
    관리자 2022.04.10 22:41

    웹 공부에 관심이 많으시군요. 좋습니다.
    두 가지로 말씀 드리곘습니다.

    1. HTML5가 기기나 브라우저에 관계없이 실행된다는 의미는, 과거에 브라우저(크롬따로 익스플로러 따로)마다 플러그인이 따로 있어서 특별한 데이터를 처리하거나 특별한 기능을 추가하였습니다. 브라우저마다 기능들이 달라서 웹 페이지 개발자들은 자바스크립트 코드로 어떤 브라우저로 접속하였는지를 검사하고 브라우저에 따라 다르게 처리하도록 코딩하였습니다. 매우 번거롭게 힘들 일이었습니다. 그런데 이것들은 모두 모바일 시대가 오기 전의 PC에서 브라우저가 실행되는 상황이었습니다. 설상 가상으로 모바일 단말기가 널리 퍼지면서 모바일 단말기에서도 브라우저를 사용하게 되었고 문제는 더 복잡하게 되었습니다. 그런데 더더욱 모바일 단말기에는 플러그인을 설치하지 못하였기 때문에
    같은 웹 사이트에 PC에서 브라우저로 접속하면 되는 일이 모바일 단말기에서는 되지 않게 되었지요. 그래서 이러한 비호환성 문제를 해결하여 개발자의 부담을 줄이고 사용자의 편의를 위해, HTML5를 도입하여 플러그인으로 할 수 있는 일들을 모두 할 수 있도록 CSS와 자바스크립트의 기능을 표준화하고 플러그인을 설치하지 않기로 하였지요. 그래서 현재는 PC나 모바일 단말기 모두 브라우저에 플러그인이 설치되지 않고 웹 페이지에 삽입된 자바스크립트 코드가 동일하게 실행됩니다. 이것이 HTML5의 표준화에 관한 이야기 입니다.
    질문자께서는 이러한 HTML5의 정책을 약간 혼동하는 것 같습니다.

    2. 모바일 단말기는 스크린의 크기가 작기 때문에 PC의 큰 스크린에서 출력되도록 만든 웹 페이지가 모바일 단말기에서는 찌그러져 출력됩니다. 이것을 조절하는 기술을 모바일 웹 이라고 부릅니다.
    하나의 웹 사이트를 구축할 때, 개발자는 선택할 수 있습니다. PC 브라우저에서만 출력되도록 하든지, 아니면 웹 서버에서 접속하는 클라이언트의 종류를 인식하여 PC면 큰 크기로 웹 페이지를 출력하고 모바일 단말기이면 단말기의 크기에 따라 출력할 정보는 줄여 사용자가 쉽게 입출력할 수 있도록 웹 페이지를 2중화하여 개발하는 것입니다.
    이런한 기법을 다루는 것이 모바일 웹 이라고 하는 분야입니다.
    아마도 질문자의 의문을 해결하려면 모바일 웹을 설명하는 책을 따로 봐야 합니다.
    이 책에서는 모바일 웹을 다루지 않습니다.

    그럼.


QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18233
382 13장 실습문제 5번 질문입니다. 3 웹린 2022.12.04 111
381 10장 연습문제 10번 질문입니다. 2 웹린 2022.11.03 158
380 webgl 2차원. 1 궁금해요 2022.10.10 131
379 6장 9-2번 이론문제(개정판) 1 file 궁금해요 2022.09.10 158
378 연습문제 3장 2번 질문합니다! 1 file KHE 2022.09.08 152
377 4장 9번 이론문제 2 궁금해요 2022.09.07 120
376 [개정판] p.357 sibling 에 대한 설명 및 그림 8-7 1 질문 2022.09.02 59
375 target프로퍼티 질문(페이지 428쪽) 2 한성이 2022.08.14 47
374 스타일 시트 객체 2 한성이 2022.08.09 32
373 css3의 프로퍼티와 7장 객체의 프로퍼티 1 한성이 2022.08.07 38
372 9장 6번 실습문제 2 궁금해요 2022.07.24 129
371 예제 8-9(373p) 1 열공이 2022.05.29 87
370 timerID값이 null인 이유 1 열공이 2022.05.26 602
369 length 프로퍼티 2 열공이 2022.05.21 59
368 9장 실습문제3번 2 열공이 2022.05.17 194
367 5장 오픈챌린지 관련 시급함 2022.04.16 201
366 교제 254페이지 1 쿠웨이트 2022.04.12 84
365 5장 실습문제 8번 2 쿠웨이트 2022.04.12 121
364 5장 실습문제 10번 1 쿠웨이트 2022.04.12 109
» 이미지파일 6 스물다섯 2022.04.08 109
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로