환이의 개발일지

이전 포스팅으로 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) 배경..

오늘은 웹에서 사용자 입력을 처리하기 위한 입력양식의 종류와 사용법을 포스팅해보려 합니다. ■ 입력 양식 입력 방식이란 기본적으로 사용자가 정보를 넣을 수 있는 입력 필드를 가지고 있는 웹페이지입니다. 게시글 포스팅 등 무언가를 입력해서 서버로 전송하거나 상품 주문 시 옵션을 선택하고 주소를 입력하고 주문 버튼을 누르는 등의 모든 화면들이 입력 양식에 해당합니다. 좀 더 정리해 보자면 아래와 같습니다. 입력 양식은 사용자로부터 데이터를 받아서 서버로 넘기는데 사용됩니다. 입력 양식에 채워진 데이터는 서버로 전달됩니다. 서버에서 받은 데이터를 처리해서 실행 결과를 사용자에게 돌려줍니다. ■ 작동 순서 입력 양식에 데이터를 채워서 서버로 보낸다. 서버는 입력 양식을 받아서 JSP와 같은 서버 스크립트로 보낸..

오늘은 웹페이지에서 다른 페이지나 다른 사이트로 연결되는 하이퍼 링크인 링크와 테이블 태그에 대해서 포스팅해보겠습니다! ■ 링크(Link) HTML에서 링크(Link)는 태그로 표현합니다. 태그의 href속성은 링크를 클릭하면 연결할 페이지나 사이트로 URL주소를 명시합니다. 또한 텍스트나 단락, 이미지 등 다양한 HTML요소에 사용할 수 있습니다. HTML 링크명 1 ) 태그 기능 링크 태그 : 특정 위치로의 이동(하이퍼링크)을 지시 문서 간 이동 : href 속성에 URL을 포함한 파일명(절대 주소)을 지정 구글 사이트 href 속성에 파일 경로명(상대 주소)을 지정 샘플 HTML 문서 문서 내 이동 : 문서 내용이 많아 문서 내에서 참조가 빈번히 발생하는 경우 지정 샘플 HTML 문서 태그 속성 속..

이번 포스팅에서는 제목, 문단, 형식, 목록 등 기본 태그들의 종류에 대해서 포스팅해보려 합니다. ■ 기본 태그 정리 1 ) HTML 기본 태그 ※HTML5 문서라면 기본적으로 포함하는 필수적인 태그입니다. 태그 의미 기능 문서 정의 태그 최상위 태그로 전테 웹 문서의 시작과ㅓ 끝을 지정. 하위에 엔티디(Entity) 코드 웹브라우저가 해석하여 처리하기 위한 특수 기호, 문자의 대표적 엔티티 코드 공백문자 : ( ) 왼쪽에 4칸의 공백이 생기며 들여쓰기처럼 효과가 생긴다. 엔티티 숫자로 쓴다면( ) 엔티티 숫자로도 쓸 수 있지만 잘 사용하지 않는다. 인용부호 : (") "인용부호" 앤퍼샌드 : (&) & ~보다 작은() greater than : (>) > 저작권 : (©) ©company 2 ) 글자 ..