메뉴 건너뛰기

2022.04.08 22:15

이미지파일

조회 수 111 댓글 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 18273
403 혹시 예전 서적인 "DHTML + 자바스크립트 프로그래밍"의 예제를 받을 수 있는 방법은 없는지요? 2 비만타쿠미 2018.09.26 116
402 한글html 1 키보드 향기 2020.03.29 922
401 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 116
400 표와 div span 4 키보드 향기 2020.04.05 109
399 페이지에 첨부하고 싶은 이미지의 위치에대해 궁금합니다 1 정택희 2017.02.13 277
398 페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1 file 워니고 2018.03.28 3875
397 테스트 관리자 2019.08.30 171
396 태그와 속성 2 tc0712 2021.09.08 72
395 크롬 오디오 자동재생 관련 질문입니다! 1 ^_^ 2018.09.30 449
394 코드 잘못된 부분을 봐주시면 정말 감사하겠습니다 1 file 입문한 사람 2020.04.01 607
393 캔버스 관련 질문 1 원그리기 2021.08.22 101
392 챕터2 연습문제 8번 김석현 2018.04.22 156
391 챕터 3의 10번 문제 1 컴공과 입문 2018.03.20 125
390 책을 종이책으로 구매했는데 1 ddd 2024.03.21 93
389 책을 마치며 7 은성 2017.04.13 492
388 책 151p 3장 오픈챌린지 문제질문입니다. 3 이상민 2019.07.19 238
387 짝수번 정답 3 idididid 2017.12.24 3130
386 질문입니다 1 1213 2018.03.06 420
385 질문드립니다. 1 ㅇㅇ 2020.06.03 306
384 질문 있습니다. 2 2021.08.19 134
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로