Skip to content

기글하드웨어기글하드웨어

인터넷 / 소프트웨어 : 윈도우즈, 리눅스, 기타 운영체제, 각종 어플리케이션, 프로그램, 소프트웨어, 인터넷, 인터넷 서비스에 대한 이야기, 소식, 테스트, 정보를 올리는 게시판입니다.

profile
Elsanna https://gigglehd.com/gg/1771382
All hail the Queen of Snow!
조회 수 2565 댓글 34
Extra Form
참고/링크 https://webkit.org/blog/7929/designing-w...-iphone-x/

그동안 대부분의 웹사이트는 특정기기만을 위한 웹디자인을 할 필요성이 없었습니다 하지만 아이폰X는 다릅니다

default-inset-behavior-1024x509-1.png

당신이 웹페이지에서 아무런 대응을 하지 않을시 가로화면에선 이렇게 될것이거든요

15eaef7610f2ff5be.png

그래서 Webkit에서 아이폰X를 위한 새로운 가이드라인을 제시하였습니다

safe-area-constants-1024x509.png

링크의 내용을 충실히 따르면 당신의 웹페이지는 아이폰X에 최적화된 모습을 갖추게 될것입니다 심지어 가로화면에서도요



  • profile
    쿤달리니 2017.09.23 23:32
    이 얼마나 고맙고 관대한 처사인지..
  • profile
    rnlcksk      감사합니다! 2017.09.23 23:34
    끔찍하네요 정말. 저러면 베젤리스 할 의미가 있는지....
  • profile
    낄낄 2017.09.23 23:51
    기글하드웨어는 아이폰 X에 최적화된 화면을 제공하지 않는다고 공식적으로 알려드립니다....
  • profile
    title: 컴맹Kylver      ヾ(*´∀`*)ノ   컴퓨터가 몬가요? 하하하하 2017.09.24 00:00
    왜죠!!!
  • profile
    쿤달리니 2017.09.24 00:03
    비★밀이요.
  • profile
    마커스 2017.09.24 02:32
    어차피 적용할 부분도 없지 않나요? full-width nav바가 있는 것도 아니고, botton-fixed nav바가 있는 것도 아니고, 배경에 그림이 들어가거나 하는 것도 아니니... 그냥 viewport-fit=auto로 놔두면 되지 싶네요.
  • ?
    히로리아 2017.09.24 02:57
    공★식이요.
  • profile
    동방의빛 2017.09.24 08:11
    한국인의 절반을 무시하시는 처사!?
  • profile
    쿨피스엔조이      그아아아아앗!! 2017.09.24 15:02
    구웨웩!!
  • ?
    포인트 팡팡! 2017.09.24 15:02
    쿨피스엔조이님 축하합니다.
    팡팡!에 당첨되어 5포인트를 보너스로 받으셨습니다.
  • profile
    title: AMDInduky      자타공인 암드사랑 정회원입니다 (_ _) 2017.09.24 19:06
    이거슨 낄피셜!!
  • profile
    슬렌네터      Human is just the biological boot loader for A.I. 2017.09.24 23:55
    좋아요 +1
  • profile
    title: 삼성dmsdudwjs4      Into the Unknown, Show Yourself !! // ThunderVolt_45 2017.09.24 00:28
    에라이 이젠 아주 웹사이트 보고 아이폰에 맞추라고 하네 염X...
    정말 애플 제품만이 받을 수 있는 수준의 쉴드로군요.
  • profile
    마커스 2017.09.24 02:30
    아이폰 X만이라고 하기엔 무리가 있는 게, 디스플레이의 형태나 (예: 원형 디스플레이 등...) UI의 형태 등 (예: 전체화면 컨텐츠에 오버레이되는 컨트롤 등...) 에 따라 safe area를 지정해줄 수 있는 specification이 웹킷에 추가되는 것입니다. 지금이야 아이폰 X밖에 없기야 하지만, 그리고 앞으로 디스플레이의 형태나 UI가 어떤 방향으로 발전할지는 저도 잘 모르겠지만 의미 있는 개선이라고 봅니다.

    예를 들어, 엣지 커브드 디스플레이의 엣지 부분 등 자동으로 기기에서 정해주는 영역만큼 padding을 준다던가 할 수 있게 됩니다. 지금까지 엣지 스크린을 사용한 제품이 나온지 좀 된 것 같은데, 오히려 Webkit 개발의 선두에 있는 애플이 아이폰 X를 냈기에 이런 개선도 일어날 수 있지 않았는가 싶네요.
  • profile
    필립      최신형보다 약간 구형이 취향. 種豆得豆 - 事必歸正 2017.09.24 23:14
    오 이런식으로 볼 수도 있는거군요
  • ?
    포인트 팡팡! 2017.09.24 23:14
    필립님 축하합니다.
    팡팡!에 당첨되어 10포인트를 보너스로 받으셨습니다.
  • profile
    마커스 2017.09.24 23:32
    웹디자인을 직접 한 지는 좀 되었지만, 지금도 꽤나 관심있게 지켜보고 있습니다. 단순히 "몇 포인트 비워놓으면 됩니다" 나 OS 네비게이션 등으로 때우기 보다는 훨씬 더 나은 방법이기도 하고, 사실상 웹킷이 de facto standard가 된 상황에서 다른 기기에서도 활용성이 높아질 부분이지 싶네요.
  • ?
    포인트 팡팡! 2017.09.24 23:32
    마커스님 축하합니다.
    팡팡!에 당첨되어 5포인트를 보너스로 받으셨습니다.
  • ?
    title: 야행성archwave 2017.09.25 06:02
    엣지 커브드 디스플레이를 고려했다면 3 면이 아니라 4 면 모두 padding 를 줄 수 있는 형태로 가야 할텐데요.

    지금 위 글에 나온거만 봐서는 3 면 패딩뿐인거 같은데..
  • profile
    마커스 2017.09.25 07:44
    4면 다 있습니다. css에서 constant() 로 User Agent에서 정하는 각종 상수를 호출할 수 있으며, 위 패딩의 경우 safe-area-inset-top 으로 사용.

    https://github.com/w3c/csswg-drafts/issues/1693 를 참고하시면 더 도움이 될 것 같네요.
  • profile
    부녀자 2017.09.24 06:37
    아이폰 X니까 X같은 디자인이 필요한거죠!
  • ?
    ducking 2017.09.24 10:45
    x같은 발상이네요
  • profile
    title: 부장님호무라      scientia potentia est 2017.09.24 10:51
    저래도 어~썸, 슷꼬이, 용기다 저러니 원..
  • profile
    에이엔      안녕하세요 August Newbie 줄여서 AN입니다. 영원 아니에요 2017.09.24 11:17
    정말 굉장히 갱장하고 괭장하네요.
  • ?
    ohnada 2017.09.24 11:23
    디스플레이에서 베젤이 없어졌으니 대신 페이지에서 귀여운 베젤을 드리겠습니다
  • profile
    title: 흑우슈베아츠      사람말을 할수 있는 흑우가 있다? 뿌슝빠슝 2017.09.24 12:40
    앗... 너무 부럽다...
  • ?
    암드탈출 2017.09.24 14:14
    X같은 발상! X같은 디자인!
  • ?
    humangrim 2017.09.24 17:07
    안해도 별로 상관없는거같은데...
  • profile
    quadro_dcc 2017.09.24 17:40
    뭐 어차피 아이폰 X 보기 좋으라고 하는 가이드라인이고 딱히 안 해도 보는 데 문제가 없긴 하죠. 정말 신경쓰는 사람들이나 바꿀 듯.
  • profile
    title: 컴맹Kylver      ヾ(*´∀`*)ノ   컴퓨터가 몬가요? 하하하하 2017.09.24 23:43
    저도 이게 맞다고 생각되네요. 궂이 맞출필요는 없죠.
  • profile
    제이C 2017.09.24 21:01
    아니 저 빨간부분까지 다 표시되게끔 해줘야지;;
    저러면 보기만 이쁘지 실용성은 ...아이구
  • profile
    AVG      멍멍이 2017.09.24 21:14
    정말 X같군요! 좋은건가?
  • profile
    Retina 2017.09.24 22:30
    근데 어차피 가로로 웹사이트 보는거보다 세로로보는게 많으니 안해도 상관없을것같네요
  • ?
    RuBisCO 2017.09.25 03:21
    디자이너란 작자들이 강요하는 꼬라지를 보면 이 인간들이 두 발을 땅에 디디고 사는 인간인지 궁금해집니다.

작성된지 4주일이 지난 글에는 새 코멘트를 달 수 없습니다.


  1. 페이스북-마이크로소프트, 160Tbps 해저 케이블 설치

    페이스북과 마이크로소프트는 미국 버지니아주와 스페인 북부 빌바오를 연결하는 160Tbps의 해저 케이블을 설치했습니다. 해수면 아래 5km, 길이 6400km, 무게 4629톤, 7개의 레이어로 구성, 일반 가정용 인터넷보다 1600만배 빠르며 7100...
    Date2017.09.26 소식 By낄낄 Reply2 Views420 file
    Read More
  2. 애플 macOS 하이 시에라 업데이트 제공

    애플이 데스크탑 PC의 운영체제인 macOS 하이 시에라 업데이트를 제공하기 시작했습니다. 애플 파일 시스템 APFS가 여러 파일의 폴더 복제 같은 작업을 쉽게 할 수 있고, 데이터를 정전이나 시스템 충돌에서 보호해 줍니다. HEVC 코덱으로...
    Date2017.09.26 소식 By낄낄 Reply2 Views364 file
    Read More
  3. No Image

    비트코인 구매 가능한 루트 질문입니다

    다른게 아니라 해외 결제수단을 차단한 사이트 이용하려는데 비트코인이 있더라고요 정확히는 バンドル라는 일본 비자 선불카드인데 한국 카드는 먹히질 않습니다... ㅠ   그래서 비트코인을 어디까지나 환전 대용으로 구매하려는데... 다...
    Date2017.09.26 질문 By키리바시 Reply10 Views724
    Read More
  4. 넥슨, 가상화폐 거래소 코빗 인수

      뭔 뜬금 없는 이야기가 벌어졌습니다.   넥슨이 가상화폐 거래소인 코빗을 인수하기로했다고 합니다.   지분이 65.19%가 913억이면 대충 1400억규모라는건가요.   어쨋거나 사업다각화라기는 하는데 뭔가 생소한 조합임엔 틀림 없는거 ...
    Date2017.09.26 소식 Bytitle: 가난한AKG-3 Reply12 Views1104
    Read More
  5. No Image

    윈도우 스토어가 마이크로소프트 스토어로 바뀔 것

    윈도우 스토어가 마이크로소프트 스토어로 이름이 바뀝니다. 그리고 파는 물건의 종류도 달라집니다. 지금은 윈도우 10 PC, 윈도우 10 모바일을 위한 소프트웨어나 게임, 그리고 영화, 음악 등을 판매하고 있으나, 앞으로는 이곳을 통해 ...
    Date2017.09.26 소식 By낄낄 Reply5 Views983
    Read More
  6. 이더리운 채굴과 난이도

    이더리움 채굴의 난이도가 갈수록 높아지면서 더 이상 새로운 이더리움을 만들어내기가 힘들어지고 있습니다. 일정 주기로 채굴 난이도가 폭발적으로 증가하는데, INT(2**((block_number // 100000) - 2))의 공식에 따라 커집니다. 지금 ...
    Date2017.09.26 소식 By낄낄 Reply2 Views603 file
    Read More
  7. 나체 사진을 요구하는 랜섬웨어가 등장

      암호화한 파일을 인질로 잡고 복호화 키를 대가로 비트코인을 요구하는 보통의 랜섬웨어와 달리, 비트코인 대신 10장의 나체 사진을 요구하는 랜섬웨어가 발견되었습니다.   이 랜섬웨어는 nRansom.exe 파일로 배포되며, ‘your-mon-gay...
    Date2017.09.25 소식 ByCluster Reply9 Views872 file
    Read More
  8. No Image

    계륵인 컴퓨터를 어디에 사용해야 할까요.

    컴퓨터... 라기보단 VPS서버인데 이게 한국이 아니라 캐나다에 있는 서버입니다.   2년 전부터 쓰던건데.. 윈도우 서버 2012 R2 / L5520 4코어 4스레드 / 2GB RAM / 40GB SSD / 트래픽 무한 인데 하루종일 CPU 풀로드 하지 않는 조건으로 ...
    Date2017.09.24 일반 By청솔향 Reply8 Views912
    Read More
  9. No Image

    램디스크 프로그램 추천해주세요

    램용량이 여유가 좀 남는 관계로 램디스크 구성을 하려고 합니다. SSD 용량이 500GB 정도 되어서 용량 문제는 없긴 한데, 매번 작업시 임시파일 남는게 좀 그래서 사용하고자 합니다. 개인 용도로만 사용하는 컴퓨터면 별 생각없이 사용하...
    Date2017.09.23 질문 By순딩sheep Reply7 Views1734
    Read More
  10. 아이폰X에서 당신의 웹사이트가 좋게 보이는 방법

    그동안 대부분의 웹사이트는 특정기기만을 위한 웹디자인을 할 필요성이 없었습니다 하지만 아이폰X는 다릅니다 당신이 웹페이지에서 아무런 대응을 하지 않을시 가로화면에선 이렇게 될것이거든요 그래서 Webkit에서 아이폰X를 위한 새로...
    Date2017.09.23 소식 ByElsanna Reply34 Views2565 file
    Read More
  11. SVP 잘 아시는분 계신가요...

    플루이드모션은 라데온브가가 없어서 일단 이걸로 맛보기라도 해보고싶은데 사용이 안되네요 ㅠㅠ   보통 사용하는방법 그대로 적용했는데 도무지 될생각을 안하네요       일단 이렇게 시키는대로 전부 하고   켜면 표기는 저렇게 두배로...
    Date2017.09.23 질문 ByAVG Reply8 Views2424 file
    Read More
  12. 중국 WePhone 앱이 앱스토어에서 내려감

    중국 앱스토어에는 WePhone이라는 앱이 있습니다. 장거리/국제 전화용 앱인데요. 이 앱을 개발한 사람이 사기결혼을 했다가 1000만 위안의 소송이 걸리자 자살했고, 앱 스토어에서 WePhone이 내려갔다고 합니다. 검색도 안됨. 중국에서는 ...
    Date2017.09.23 소식 By낄낄 Reply0 Views724 file
    Read More
  13. No Image

    아수스 무선공유기에서 맥 타임머신 사용시 문제

    연구실에서 사용하던 무선공유기가 워낙 구형이어서 아수스 무선공유기(AC88U)를 장만했습니다. 아시다시피 아수스공유기 USB에 하드디스크를 네트워크 드라이브로 연결한 다음 맥 타임머신용으로 사용할 수 가 있습니다만.... 왠지 매뉴...
    Date2017.09.22 질문 By문워커 Reply2 Views1376
    Read More
  14. No Image

    MS의 프로젝트 안드로에다 OS

    마이크로소프트가 프로젝트 안드로메다 OS란 이름의 운영체제를 준비중입니다. 윈도우 시스템을 철저히 모듈화한 플랫폼입니다. 안드로메다 OS의 목표는 윈도우가 보다 통용화된 운영체제가 되도록 하는 것으로, 어떤 디바이스와 아키텍처...
    Date2017.09.21 소식 By낄낄 Reply10 Views1294
    Read More
  15. No Image

    유튜브 레드 혹시 결재하고 쓰시는 분 계시나요?

    최근들어 고전게임 리믹스 버전 음원을 유튜브에서 자주 듣는 편인데 아무래도 유튜브 레드 광고도 지겹게 나오고 해서 결재 해볼까 하는 생각도 들더라구요 래드가 그냥 아예 별도의 유튜브 어플로 구동되는 서비스인가요?? 오프라인에서...
    Date2017.09.20 질문 By프레스핫 Reply10 Views1026
    Read More
목록
Board Pagination Prev 1 ... 504 505 506 507 508 509 510 511 512 513 ... 570 Next
/ 570

최근 코멘트 30개
임시닉네임
17:21
임시닉네임
17:21
고자되기
17:16
고자되기
17:12
360Ghz
17:00
부녀자
16:59
360Ghz
16:58
360Ghz
16:57
부녀자
16:55
파란화면
16:53
니코다이스키
16:53
360Ghz
16:51
360Ghz
16:49
360Ghz
16:48
Kylver
16:47
nsys
16:47
부녀자
16:46
아라
16:44
건틀렛
16:44
고자되기
16:41
아라
16:40
먀먀먀
16:40
Astro
16:39
청미공
16:39
0.1
16:33
Mr.10%
16:33
청미공
16:32
360Ghz
16:28
AKG-3
16:28
그림자
16:27

한미마이크로닉스
더함
MSI 코리아
AMD

공지사항        사이트 약관        개인정보취급방침       신고와 건의


기글하드웨어는 2006년 6월 28일에 개설된 컴퓨터, 하드웨어, 모바일, 스마트폰, 게임, 소프트웨어, 디지털 카메라 관련 뉴스와 정보, 사용기를 공유하는 커뮤니티 사이트입니다.
개인 정보 보호, 개인 및 단체의 권리 침해, 사이트 운영, 관리, 제휴와 광고 관련 문의는 이메일로 보내주세요. 관리자 이메일

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소