본문 바로가기

MENU

웹기술 진화 앞장서는 구글 외면하는 애플 - ZDnet 이번 기사는 흥미로웠다. 웹앱과 네이티브앱(다운받아 설치하는 앱)의 이야기이다.네이티브 앱의 장점은 다운을 받아 스마트폰의 모든 기능을 활용하는 것과 실행 속도가 빠르다는 것이다.웹앱은 스마트폰의 기능을 사용할 수 없고 속도가 네이티브 앱에 비해 느리지만 저렴한 비용으로 빠르게 개발이 가능하다.보통 이런 차이가 있었지만 기사를 읽어보니 이 격차를 사라지고 모바일 브라우저가 이런 기기 내장 기능을 활용할 수 있게 되었다는 것이다.어떻게 그렇게 된 걸까?기사를 보면 웹 표준화 단체 월드와이드웹컨소시엄(W3C)에서 'HTML5앱스'프로젝트의 결과물로 가능하게 되었다고 나온다.이 이야기만 듣는다면 엄청난 사실이지만 문제점이 있다.애플이 웹앱 기술의 발전에 부정적인 태도를 보인다는 것이다. 이유는 네이티브 앱 장.. 더보기
'굿바이' 올해 우리곁을 떠난 IT기술·서비스 - ZDnet 1월 1일 새해 첫날 '우리 곁을 떠난 IT기술' 이라는 제목을 보고 궁금증이 생긴다.어떤 기술이 사라진 걸까?매년 엄청난 기술들이 쏟아지는데 분명 조명 받지 못한 기술들도 무수히 많을 것이다.그중에 어떤 것들이 있는지 보도록 하자.기사를 보면 사라지는 IT 기술, 서비스는어도비 플래시스마트폰용 파이어폭스OS, 아마존 파이어폰메일박스구글 플러스4가지가 대표적으로 나온다.(어도비 플래시 출처:ZDnet)어도비 플래시모바일 시대로 넘어오면서 거의 쓰지 않는 기술이 되었고 보안 사고의 원인이 되면서 취약점을 드러냈다어도비에서 조차 콘텐츠 제작자들이 "플래시보다는 웹 표쥰인 HTML5를 사용하라고 권고했다" 는 내용이 나와있다.(모질라 파이어폭스OS를 탑재한 파이어폭스폰 클라우드 FX 단말기 출처:ZDnet)스.. 더보기
Bootstrap3 (1) Bootstrap이력서를 넣으려고보니 각 웹 에이전시마다 우대조건이 다른걸 느꼈다. 그중에 Bootstrap 을 우대해주는 곳도 있어서 공부해보기로 했다.youtube에 아주 친절하게 설명해주는 곳이 있기에그 강의를 보면서 W3schoolsdp 예제를 따라해보고 연습한 내용을 기록할 것이다. 부트스트랩을 왜 이용하는지 부터 알아보자.가장 큰 이유는 UI최적화로 인해서 디자인 적인 측면에서 편하고반응형으로써 디바이스 환경에 최적화 되어있다.요즘은 모바일기기가 넘치는 시대이기 때문에 디바이스 환경 최적화는 큰 장점이다.그럼 예제가 있는 W3schools를 가보도록 하자.홈페이지를 방문하면 여러가지 웹에 관련된 HTML, CSS, PHP, jQuery 등... 배울 수 있게끔 컨텐츠를 제공한다.아주 좋은 사이.. 더보기
반응형 웹 (Responsive Web) - test5 벌써 test5 입니다.이번에는 앞에 해결 안되던 문제점과 구조를 살짝 바꿔봤습니다.저번과 크게바뀐건 없지만 header 부분에 logo-box, menu-box로 나눠서 구조를 만들어 봤습니다.main부분에는 양 옆에 여백을 주기위해 air-left,right를 넣었지만 깔끔하지 못하네요CSS로 저렇게 여백을 주려니 문제가 생겨서 일딴 임시방편으로 해두었습니다.header쪽에 집중하죠 ㅎㅎ맥에서 찍다보니깐 너무 크게나온거같다. 스타일은 위와 같이 적용시켰다.제일 중요한 js부분이다.밑에 2개의 클릭이벤트는 기존과 달라진건 없다 달라진게 있다면 if문을 추가했다. 그 동안 문제점이 햄버거 버튼을 클릭해서 메뉴가 나와서 창 사이즈가 760이하 일때는 유지가되고 761이상일때는사라지게 해야되는데 test1~.. 더보기
반응형 웹 (Responsive Web) - test4 이번에는 앞에서 했던걸 좀 섞어서 하려고 한다.크리스마스 이브에 코딩하니깐 색은 빨강으로 간다!구조는 이리저리생각해 봤는데 괜찬은거 같다원래 정답은 없으니깐 내가 하고 싶은데로 간다.요즘 highlight.js 를 적용해서 좀 편하게 코드를 볼 수 있게 하려하는데뭐가 문제인지 적용이안되서 짜증이난다.본론으로 돌아가서 css는 위와 같이 적용시켰고 결과물을 보자링크:http://newlex0124.cafe24.com/test/responsive/test4.html+ 메인에 사진을 추가하고 사이즈 별로 box 크기 비율을 다르게 했습니다. 더보기
애플 3D터치? 토종 벤처 먼저 내놨다 - ZDnet 이번 기사 제목은 눈에 확들어오는 기사제목같다. 애플3D터치? 최신기기와 기술들을 좋아하는 한국사람으로써는 안 눌러 볼 수 없는 제목인거같다9월에 독일 베를린에 가전박람회'IFA 2015'에 중국 스마트폰 업체 화웨이가 세계 최초 '포스터치' 기술을 탑재한 스마트폰을 선보인걸로 시작한다.그리고 일주일 뒤 애플이 미국 샌프란시스코에 신기술 '3D터치'를 탑재한 아이폰6S 시리즈를 선보였다고 바로 나온다.애플이 선보인 '3D터치'가 어떤 기술인가 하면 디스플레이를 터치하는 강도에따라 특정 기능을 실행 할 수 있도록 해주는 기술이라 나와있다.하지만 이 기사의 목적은 애플이나 화웨이가 아닌 포스터치를 탑재한 메이트S를 출시하는데 결정적인역활을한 하이딥(Hideep)이라는 회사를 소개하고 독보적인 기술력을 확보하.. 더보기
반응형 웹 (Responsive Web) - test3 test2에서 생각했던것 보다 잘 안되서 다시 생각 좀 해보았다. test2보다는 좀더 간단하게 구조를 해보았다. 기본 CSS를 설정 512px 사이즈일때 CSS를 변경해서 넣어준다. 반응형 웹은 모바일 기기를 위해 제작하는 경우가 많은데 transform:translate3d를 이용하면 좀더 기기에 부담을 덜 줄 수 있고 약간이나마 좀 더 부드러운 움직임을 구현할 수 있다. translate3d는 좀 어려운 부분이라 따로 연구좀 해봐야 되는 부분이다. 나중에 기회가 되면 따로 다뤄봐야 겠다. 자바스크립트를 넣어주는데 ham클릭시 menu-wrap에 addClass로 menu-on 클라스를 추가해준다. ham-wrap은 메뉴가 나왔을시 그 외에 부분은 어둠게 처리해서 메뉴에 집중시켜주는 효과를 넣어준다... 더보기
반응형 웹 (Responsive Web) - test2 반응형 웹 제작은 생각보다 어렵다.그래서 그냥 생각하는데로 코딩 하려고한다.test2에서는 사이즈가 줄어들면 메뉴가 사라지고 햄버그메뉴를 눌렀을때 다시 나오게 끔 해볼라 했다.구조는 대충 이렇게 생각해보았다.처음 큰 사이즈에서는 container만 보이도록 해두고설정해둔 사이즈로 줄어들면 container가 사라지고 container2가 보는 방식으로 생각해보았는데지금 쓰는방식인지는 모르겠다.기본사이즈에서는 CSS를 이렇게 넣어주었다.container가 보이고 container2는 안보이도록 밖으로 보내두었다.창크기가 512px 로 줄어들었을때 CSS 바꿔준다.container를 안보이도록 top 값을 바꿔주고container2를 보이도록 top 값을 바꿔준다.btn 도 CSS를 넣어준다.btn을 클릭했.. 더보기

티스토리툴바