요즘은 그렇게 많이 사용하지 않는 태그인데 전광판처럼 텍스트를 움직이게 만들 수 있는 태그가 있습니다. 텍스트뿐만 아니라 사진도 가능합니다. HTML에서 텍스트나 사진을 움직이게 할 수 있는 태그는 바로 MarQuee태그인데요. 이번 포스팅에서는 HTML MarQuee태그를 사용하는 방법에 대해 알아보도록 하겠습니다. 옆으로 움직이는 텍스트 만들기 (MarQuee) 태그 속성 비고 bgcolor 배경색상 설정 width 가로 / 세로크기 설정 height 세로크기 설정 direction 스크롤의 움직임 방향 behavior 움직임의 속성 loop 움직임 반복횟수 scrollamount 스크롤 되는 거리간격 scrolldelay 스크롤의 속도 vspace 위 여백 hspace 아래 여백 MarQuee에는 ..
하이퍼링크란 "연결된 개체"를 뜻합니다. 특정 부분을 클릭해 다른 페이지로 이동을 시켜주는 기능이며 여러 개의 HTML 문서를 하나의 고리처럼 연결할 수 있습니다. 인터넷의 특성상 모든 정보를 한 페이지에서 띄울 수 없어 정보가 여러페이지로 분산될 수 밖에 없는데 하이퍼링크를 사용하면 여러페이지를 하나의 고리처럼 엮을 수 있어 굉장히 다양하게 사용되고 있습니다. 이러한 하이퍼링크를 HTML의 A태그를 활용하여 간단하게 구현할 수 있습니다. 하이퍼링크 만들기 태그 속성 비고 하이퍼링크 태그 link 방문하지 않은 하이퍼링크의 색상 alink 마우스로 클릭한 하이퍼링크의 색상 vlink 이미 방문한 하이퍼 링크의 색상 href 클릭시 이동시킬 페이지 title 마우스 Over시 나올 링크의 설명 target..
문단을 나눌때 영역을 나누고 싶을때 자주 사용하는것이 바로 수평선 그리기 HR태그입니다. 닫는 태그 없이 한번의 태그 사용으로 간단하게 수평선을 구현할 수 있어 많이들 사용하는 방법입니다. 수평선에 색을 입히거나 비율 수평선의 굵기까지 지정할 수 있습니다. 수평선 긋기 HR태그 사용법 태그 속성 비고 태그 수평선 화면 비율/크기 조절 수평선의 색 교체 수평선 크기 조절 HR태그에는 여러가지 속성이 있으나 위의 3가지 속성이 대표적입니다. 1. width속성은 width="500px" 크기를 지정하거나 width="50%" 화면에 나타날 비율을 정할 수 있습니다. 2. color은 HR태그의 색상을 설정할 수 있습니다. 3. size속성을 활용하여 수평선의 굵기도 설정해줄 수 있습니다. 예제 1. 웹브라우..
HTML을 사용하다보면 글자의 속성을 바꿔주고 싶을때가 종종 있습니다. 하지만 이럴때마다 CSS를 사용해서 바꿔주는건 좀 귀찮죠. 이럴때 간편하게 사용할 수 있는 HTML 태그들을 소개합니다. Font 속성/스타일(굵기,기울기,밑줄선,취소선) 설정 속성 태그 비고 글꼴 속성/스타일 글자 굵기 글자 굵기 글자 기울기 취소선 긋기 밑줄긋기 위 첨자 밑 첨자 타자체 주변보다 크게 주변보다 작게 CSS없이 HTML에서 간단하게 구현할 수 있는 여러가지 태그들입니다. 1. 태그와태그는 글자를 진하게 만들어주는 태그로 서로 차이점은 없습니다. 2. 태그는 글자에 기울임을 줘서 이탤릭자처럼 만들어줍니다. 3. 태그는 글자에 취소선을 그어주는 태그입니다. 4. 태그는 글자에 밑줄을 그어주는 역할을 합니다. 5. 와는 ..
이번 포스팅에서는 Ajax를 활용하여 다른페이지에있는 CSV형식의 데이터를 받아오는 방법에 대해 알아보겠습니다. 바로 예제를 통해서 설명해드릴게요. Csv형식의 데이터 파싱하기 먼저 이클립스 WebProject의 WebContent안에 js폴더를 만들어주시고 js파일하나를 집어넣겠습니다. myAjax.js //크로스 브라우징 처리 var getXhr = function() { var xmlhttp = null; if (window.XMLHttpRequest) { // code for modern browsers xmlhttp = new XMLHttpRequest(); } else { // code for old IE browsers xmlhttp = new ActiveXObject("Microsoft.X..
웹 페이지를 만들다보면 서버나 페이지간의 데이터를 주고받을 일이 많습니다. 서버간의 통신을 하고있을경우 데이터를 받을때까지는 약간의 delay가 발생하게 되는데 적은 양의 데이터를 주고받는 일이라면 큰 문제가 되지않겠지만 많은 양의 데이터를 주고받을때는 그만큼 delay시간도 많이 발생하게 됩니다.. 이경우 사용자에게 Progress바를 이용하여 데이터가 불러지고 있다는것을 알려주는 것이 좋습니다. 이번 포스팅에서는 JavaScript Ajax를 활용한 로딩 프로그래스 바의 구현방법에 대해 알아보겠습니다. 이번 예제에서 사용될 로딩바입니다. 다운 받아주시고 이클립스안에 넣어주세요. Ajax 통신예제는 저번포스팅에서 진행했던 예제 그대로 진행하고 거기에 로딩바만 추가해보도록 하겠습니다. 웹 페이지 로딩시 ..
이번 포스팅에서는 Ajax를 활용하여 다른페이지에있는 데이터를 받아오는 방법에 대해 알아보겠습니다. 저번 포스팅에서 말씀 드렸다시피 Ajax를 사용하지 않은 웹의 흐름에서는 갱신시 새로운 URL을 다시 호출 되면서 페이지가 새로 뿌려지지만, AJAX를 사용하면 비동기 통신 방식으로 일부만을 로드해올 수 있습니다. 그럼 예제를 통해서 Ajax에서 페이지간의 통신은 어떻게 이루어지는지 확인해보겠습니다. 다음예제는 Main.jsp와 InputData.jsp를 상호간 통신해여 Main.Jsp에서 InputData.jsp에 있는 데이터들을 호출하는 예제입니다. Ajax를 활용하여 다른페이지에 있는 데이터 받아오기 Main.jsp Ajax 기본적인 통신방법 InputData.jsp 데이터 결과화면 InputData..
Ajax란? Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다. ※ 비동기(async)방식이란? 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 ..
제 4차산업혁명이 터지면서 코딩 교육이 무척이나 중요해졌습니다. 많은 사람들이 프로그래머를 꿈꾸고 있죠 코딩을 하다보면 매순간 오류에 직면하고 그 오류를 해결하는 것이 반복됩니다. 그래서 그 오류를 잡을 수 있는 능력이 중요해요. 오류를 잘 잡는 사람들이 코딩도 잘하더라구요. 그 능력은 알고리즘 문제를 풀면서 능력을 상승시켜줄 수 있습니다. 다들 네이버나 카카오 삼성전자 이런 대기업에 취직하는것을 목표로 합니다. 꿈은 크게 가져야 하니까요 ㅎㅎ 알고리즘 대회에서 입상을 하게 되면 이런 대기업에 취직할 수 있는 길이 열리니까 꼭 관심가져보시는게 좋을듯해요. 1. 백준 알고리즘 가장 유명한 알고리즘 사이트입니다. 어마어마하게 많은 문제가 있어요. 쉬운문제는 정말 해도해도 너무할정도로 쉽고 어려운문제는 해도해..
요새 제 4차산업혁명이 터지면서 코딩 교육이 무척이나 중요해진 시기라고 합니다. 저도 대학다닐때 프로그래머를 꿈꾸며 열심히 아래의 사이트를 보며 열심히 공부했었던 기억이 나네요. 또 저도 학생들에게 교육을 몇번 한 적이 있었는데 저는 그렇게 남들에게 가르쳐주는것이 어려운지 몰랐어요. 강의 초창기때의 저는 말도 막 버벅거리고 횡설수설하고 쪽팔림이란 쪽팔림은 다팔았죠... ㅠㅠㅠ 하지만 아래 사이트의 강사님들은 가르치는 스킬이나 수준이 최상급에 속해있는 강사분들입니다. 제가 이때까지 코딩을 배우며 느낀 결론은 프로그래밍은 책을보며 이론위주의 공부를 하는것 보다는 동영상을보며 실습위주의 공부를 하는것이 이해하기도 쉽고 코딩도 빨리 배운다라는 사실입니다. 이에 프로그래밍 공부를 할 수 있는 유용한 사이트를 몇개..
저번 포스팅 MVC2 패턴으로 만드는 회원가입 및 로그인에 이어서 이번에는 MVC2 패턴으로 만드는 게시판을 공부해보겠습니다. 회원가입 , 로그인 기능과 마찬가지로 게시판도 어느 웹사이트에서나 꼭 하나씩은 있는 필수적인 기능입니다. 어차피 웹사이트 기능들은 다 거기서 거기입니다. (데이터 추가, 출력, 수정, 삭제) 이 게시판을 응용하면 웹사이트에 존재하는 모든 기능들을 다 구현할 수 있다고 해도 될 정도로 중요한 부분이며 웹사이트를 제작하려는 사람이라면 꼭 알고 가야 하는 기능입니다. MVC 패턴 게시판 1. MVC2 패턴 게시판 소스 올려드리겠습니다. 이 파일을 Import해주시기 바랍니다. 2. 그런 뒤 위의 테이블 구조와 같이 게시판 데이터베이스를 만들어주겠습니다. 3. META-INF -> co..
이전 포스팅에서 JSP MVC패턴의 구조와 개념에 대해서 공부를 해보았는데요 이번에는 본격적으로 예제 소스를 예로 들어 MVC2 패턴에 심도 있게 공부를 해보도록 하겠습니다. 첫 번째 예제로는 웹페이지에서 회원가입 및 로그인을 준비했습니다. 어느 웹사이트에 들어가도 회원가입과 로그인 기능은 꼭 있을 정도로 광범위하게 쓰이는 기능입니다. MVC 패턴 회원가입 및 로그인 1. 우선 예제파일 올려드릴게요. 이 파일을 압축 해제하셔서 Import 해주세요. 2. 위 사진과 같이 데이터베이스를 하나 만들어주세요. Master은 관리자 여부를 관리하는 칼럼인데 0이면 관리자이고 1이면 일반회원입니다. 3. context.xml에 들어가셔서 방금 생성한 테이블을 연결해줍니다. 그런 뒤 index.jsp를 실행시켜주시..
MVC패턴이란? Model , View , Controller의 합성어로 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴입니다. Model : 백그라운드에서 동작하는 로직을 처리합니다. View : 사용자가 보게 될 결과 화면을 출력합니다. Controller : 사용자의 입력처리와 흐름 제어를 담당합니다. MVC패턴에는 모델1방식과 모델 2방 식이 있는데 특히 모델 2 구조 기반의 MVC패턴 구현은 JSP 개발자라면 무조건 알고 있어야 할 개발 방식입니다. JSP 웹사이트 구조는 크게 모델 1 방식과 모델 2 방식으로 나뉩니다. 간단하게 분류하자면 JSP에서 출력과 로직을 전부 처리하느냐(모델 1) JSP에서 출력만 처리하느냐(모델 2)로 분류할 수 있습니다. Model1 방식 모델 1 구조는 사용..