환이의 개발일지

오늘부터 웹 프로그래밍(JSP) 포스팅을 해보려 합니다. 지금까지 알아본 JAVA, SQL , HTML, JAVAScript를 활용하는 중요한 단계라고 생각합니다. 앞으로 개발자를 준비하시는 분들이라면 꼭 알고 넘어가야 하는 파트이므로, 열심히 포스팅해 보겠습니다! ■ JSP(JAVA Server Pages)란? JSP는 동적인 웹 서버에서 동적인 페이지를 만들어주는 서버 사이드 스크립트 언어이며, C/S 환경을 갖고 있습니다. Servlet과 기능적으로는 굉장히 비슷하지만 아주 큰 차이가 있는데, 그건 바로 작성하는 언어의 기반이 다르다는 것입니다. Servlet이 클래스의 형태를 띠고 있고 자바의 형태를 온전히 가져가는데 반해 JSP는 HTML 코드를 기반으로 그 사이에 자바 코드를 삽입하는 식으로 ..

오늘은 스마트폰에서 흔히 보이는 모바일 웹 UI구현에 대해서 포스팅해보려 합니다. ■ Mobile Web이란? 앞서 말씀드린 것처럼 일상에서 우리는 흔히 스마트폰에서 검색하는 웹 페이지가 바로 일반적인 모바일 웹입니다. 모바일 웹은 모바일에서도 PC용 사이트의 글자 폰트와 이미지, 터치아이콘등 데이스탑 브라우저에서 실행되는 기능을 모바일에 맞춰 표현한 사이트로서 PC용 홈페이지를 모바일 스크린 크기로 줄여 놓은 것이라고 할 수 있습니다. 이러한 이유로 모바일 웹은 일반 PC용 웹 페이지에 비해서 간단한 UI를 가지고 있습니다. 이 글은 CSS와 JAVAScript를 활용한 모바일 웹 제작 방법과 jQueryMobile로 구현할 때의 몇 가지 팁에 대해 설명하겠습니다. ■ jQuery Mobile jQue..

이전 포스팅으로 JQuery까지 알아봤습니다. 다음 포스팅으로 모바일 웹 포스팅을 끝으로 JSP 포스팅을 하려고 합니다! 오늘은 동기식, 비동기식인 Ajax에 대해서 포스팅해 보겠습니다! ■ Ajax(Asynchronous JavaScript And XML)이란? Ajax(Asynchronous JavaScript And XML)이란 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법입니다. 즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것입니다. ■ Ajax(Asynchronous JavaS..

이전 포스팅으로 DOM에 대해서 알아봤습니다. 오늘은 javaScript DOM 작업을 쉽게 처리할 수 있도록 도와주는 jQuery에 대해서 포스팅해 보겠습니다! ■ jQuery란? jQuery는 지금까지 배운 javaScript의 코드 형식과 차이점이 있습니다. 일단 두 개의 차이점에 대해서 먼저 설명하자면, javaScript는 웹브라우저에서 작동하는 스크립트입니다. 기능을 포함하는 거의 모든 홈페이지들이 사용하고 있습니다. jQuery 또한 javaScript입니다. 다만 javaScript로 빈번하게 사용되는 기능들은 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리입니다. javaScript는 아래와 같이 크게 4가지 요소로 구성되어 있습니다. javaScript core 문법 javaSc..

오늘은 DOM(문서 객체 모델)의 개념과 document 객체에 대한 포스팅을 해보겠습니다! ■ DOM(문서 객체 모델)이란? 문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML에 접근하기 위한 일정의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. DOM의 특징은 다음과 같습니다. HTML5와 같은 구조화된 문서를 객체 개념으로 표현하고 접근하는 방식입니다. W3C가 정한 공식 표준으로 W3C가 표준화한 여러 API의 기반입니다. DOM API를 통해 HTML5와 XML문서 안의 구성 요소 즉, 엘리먼트, 속성, 텍스트 등을 접근하고 변경할 수 있고, 문서의 내용이나 구조, 스타일 등을 동적으로 제어가..

오늘은 이전 포스팅에 이어서 기초 문법에 사용되는 함수에 대해서 포스팅해보려 합니다. ■ JAVA Script 함수 javaScript에서 함수는 기본 구성 요소 중 하나입니다. javaScript의 함수는 작업을 수행하거나 값을 계산하는 명령문의 집합인 procedure(프로시저)와 비슷하지만, procedure가 함수로 쓰이려면 입력을 반드시 받아야 하고 입력과 명확한 관계가 있는 출력을 반환해야 합니다. 즉, 함수를 사용하려면 함수를 호출할 스코프 내에서 함수를 정의해야 합니다. ■ 함수의 선언 방식 javaScript에서 함수는 java와 동일하게 다양한 선언 방식이 있습니다. java와 다른 점은 함수 표현식으로 function을 사용해서 정의합니다. 함수 정의는 다음과 같은 키워드로 구성되어 ..

이전 포스팅에서 HTML/CSS에 대해 알아봤습니다. 오늘은 JAVA Scirpt의 기초 문법에 대해서 포스팅해보려 합니다. ■ JAVA Script란? JAVA Script란 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 언어 또는 프로그래밍 언어입니다. 우리 일상에서 흔히 볼 수 있는 네이버 사이트를 예를 들면 페이지의 내용이 가만히 정적인 정보만 보여주는 것이 아니라 주기적으로 갱신되거나, 사용자와 상호 작용이 가능하거나, 애니메이션이 적용된 효과를 볼 수 있다면 javaScript가 관여하고 있을 거라고 생각해도 좋습니다. 간단하게 정리해서 javaScript의 특징은 다음과 같습니다. ■ JAVA Script 특징 동적인 웹페이지 작성을 위해 사용되는 클라이언트 측 프로그램 언어입..

오늘은 CSS3 Style 레이아웃 배치 방식과 애니메이션 효과 처리 하는 방법을 포스팅해보려 합니다! ■ 레이아웃(Layout) Layout이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. HTML요소는 블록 요소이거나 인라인 요소 중의 하나에 속합니다. 블럭 요소(block) : 한 줄을 전부 차지한다. , , , , , , , , AAA BBB CCC DDD EEE FFF GGG HHH KKK MMM NNN 지금까지 레이아웃에 대해서 알아봤습니다. 그럼 요소의 위치를 지정하고 화면 배치할 때 활용되는 스타일 속성에 대해서도 알아봅시다. ■ 좌표값 지정 요소의 위치는 top, bottom, left, right 속성으로 결정합니다. 각 요소의 속성의 의미는 아래 표..

오늘은 CSS3 스타일 박스 모델을 어떻게 응용하는지에 대한 포스팅을 해보려 합니다! ■ 박스 모델(Box model) 웹 브라우저는 각 HTML요소를 사각형으로 간주하고 웹 페이지 위에 그리게 됩니다. 요소를 배치할 때도 사각형으로 간수하는데, 이런 식으로 요소를 박스 형태로 그리는 것을 박스 모델이라고 부릅니다. 박스는 배치, 색상, 경계 등의 속성을 갖고, HTML요소를 margin(바깥쪽 여백), border(경계선), padding(안쪽 여백), content(내용)으로 구분합니다. margin : 테두리와 이웃하는 요소 사이의 간격입니다. margin은 눈에 보이지 않습니다. border : content와 padding을 감싸는 테두리 입니다. padding : content와 border ..

오늘은 CSS 스타일 시트에 대해서 포스팅해보려 합니다. ■ CSS(Cascading Style Sheets) CSS는 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다. 1 ) CSS 특징 HTML에 문서의 구조를 지정하는 태그와 스타일을 지정하는 태그가 섞여 있으면 유지보수 하기가 어렵다. 스타일을 지정하는 부분은 CSS로 분리하는 것이 바람직함. 동일한 요소를 가진 웹 페이지도 CSS가 달라지면 다른 모습으로 표현될 수 있다. 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 2 ) CSS의 기능 선택자(selectors) 박스 모델(Box Model) 배경..