스마트폰이 세상에 나온 이래로, 요즘은 PC보다 스마트폰이나 태블릿에서 웹사이트에 접속하는 경우가 많이 발생한다. 일반적으로 스마트폰이나 태블릿은 화면의 크기가 작기 때문에, PC용으로 제작된 웹사이트를 스마트폰으로 보면 글자가 매우 작아진다. 이것을 해결하기 위해서는 모바일 화면에 맞춘 디자인을 하면 되는데, 그 방법은 두 가지가 있다.(1) 적응형 웹: 포털 사이트나 쇼핑몰 사이트에서는 m.naver.com처럼 모바일 버전 사이트를 만들어서 유지했다. 서버에서 클라이언트의 장치가 PC인지 모바일인지 구분하여, 접속하는 사이트를 아예 다르게 한 것이다. 두 가지의 버전을 개발해야 한다는 단점이 있다.(2) 반응형 웹(Responsive Web Design; RWD): 하나의 웹페이지를 가지고 다양한 화..

I. 브랜딩 기본 이해마케팅이란? (vs 세일즈)다음 상황을 생각해보자. 어떤 세탁기 회사가 있다. 이 회사에서는 다음 달 새로운 모델 출시 계획이 있어, 구 모델의 재고를 모두 소진하려고 한다. 이를 위해 구모델을 구입하는 고객에 한해 10% 할인해주는 프로모션을 실시하고, 판매실적이 좋은 영업사원에게는 특별 보너스를 지급하려 한다. 단, 일반 고객들은 신모델 출시 소식을 모르고 있다. 판매사원 A는 고객들에게 신모델 출시 계획을 알리지 않고 프로모션 혜택만을 강조하여 고객 100명에게 팔았다. 당연 특별 보너스도 챙겼다.판매사원 B는 고객들에게 신모델 출시 계획을 알린 후 스스로 선택한 고객 10명에게만 팔았다. 둘 중 누가 더 뛰어난 영업사언일까? 나의 관점에서는 판매사원 B다.가치 교환을 하면 만..

클라이언트는 서버에거 특정한 페이지를 요구(resquset)하고, 웹 서버는 그 웹페이지를 찾아서 클라이이언트에 전달해 주는 것(response)이 기본이다. 동적인 웹페이지를 생성하려면 데이터베이스가 필요한 경우가 많다. 예를 들어 사용자가 인터넷 쇼핑몰에서 현재 판매 중인 상품의 정보를 요청하였다면 이 정보를 데이터베이스에서 읽어서 동적인 웹페이지를 만들어야 한다. 이때 서버쪽 도우미 프로그램을 CGI(Common Gateway Interface)라고 불리고 여기에 Perl, C, Python, PHP, ASP 등이 많이 사용되고 있다.웹 서버쪽에서는 자바 언어가 꽤나 폭넓게 사용되고 있다. 자바 언어는 플랫폼에 독립적이고, 스레드를 사용할 수 있어서 효율적이며, 풍부한 라이브러리가 강점이다. 자바를..

JavaScript를 활용하여 웹브라우저 위에 그림을 그리거나 그래픽을 표시할 때 사용하는 도구가 캔버스(Canvas)이다. 캔버스는 요소로 생성된다. 캔버스는 HTML 페이지 상에서 사각형태의 영역을 차지한다는 것이 특징이다. 또한 좌상단의 좌표가 (0, 0) 이라는 것이 특징이다. 수학에서는 제3사분면에서 시작하는 것이다(단 y는 양수). 여기에 물감과 붓의 역할을 하는 context 객체를 자바스크립트에 추가로 작성해야한다. 한번 캔버스를 그려보자! 캔버스 요소를 통해 그래픽을 제공하는 라이브러리는 Canvas API이다. Canvas API에서 그림을 그리는 방법은 두 가지가 있다.(1) 도형을 직접 캔버스에 그리는 방법(fillRect(), s..

브라우저 객체 모델(BOM: Browser Object Model)은 웹 브라우저가 가지고 있는 모든객체를 의미한다. 최상위 객체는 window이고 그 아래롤 navigator, location, history, screen, document, frames 객체가 있다.객체설명documentHTML문서 정보navigator브라우저 자체에 대한 정보screen사용자 화면에 대한 정보history방문 기록 정보location현재 URL 정보frames윈도우에 포함된 프레임 정보 window 객체는 BOM 에서 최상위 객체로서 웹브라우저 윈도우를 나타내고 있다. JavaScript의 모든 전역 함수는 window 객체의 메소드이다. 새로운 윈도우 열기를 실습해보자! setT..

JavaScript는 사용자가 입력한 데이터를 서버로 보내기 전에 클라이언트 컴퓨터에서 사전 검증을 주로 한다. 회원 가입 페이지에서 아이디를 너무 길게 입력할 수도 있고, 이메일 주소를 잘못 적을수도 있기 때문이다. 공백 검증가장 기초적인 데이터 검증은 필드가 비어있는지 체크하는 것이다. ㅅㅅㅎㅂㅈ! 이름: 데이터 길이 검증주민등록번호처럼 정해진 개수의 문자만을 입력하도록 한다. ㅅㅅㅎㅂㅈ! 이름(6~8글자): 선택 검증HTML의 select 요소에서 사용자가 선택 했는지 안했는지를 검증해보자. 여기에는 약간의 트릭이 필요..