html안에서 아무리 Enter를 치거나 스페이스를 하여 공백을 표시한다고해서 브라우저에 Enter나 공백이 나오지는 않습니다. 그래서 우리는 Enter는 태그를 사용함으로써 구현하고 공백은   라는 문구를 삽입해 공백을 표현하고는 합니다. 하지만 이렇게 일일이 여러 태그를 활용하여 개행이나 공백을 넣지않아도 되는 방법이 있습니다. 바로 태그인데요. 0태그를 활용하면 태그안에서는 Enter나 Tab, Space를 다 활용할 수 있기때문에 긴 문장등을 표현할때 굉장히 효율적으로 사용할 수 있습니다. pre 태그 예제 동해물과 백두산이 마르고닳도록 하느님이 보우하사 길이 보우하세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 만약 pre태그를 활용하지않고 이렇게 애국가를 치게 되면 Enter가..
코딩은 응용하기에 따라 창의적인 결과물을 낼 수 있는 언어입니다. 혹시 테이블안에서도 테이블이 들어간다는 사실 알고 계신가요? 잘 사용하지는 않지만 이 방법도 적재적소에 적절히 사용하면 괜찮은 결과물을 얻어낼 수 있습니다. 예를 들어볼까요? 어떤 개발자는 레이아웃 기본 틀을 구성하는 방식으로 테이블안에 테이블을 넣어 위치를 조절한다고 합니다. 또 저는 웹사이트에서 사진갤러리를 만들때 테이블을 여러개 중첩해서 사진게시판을 구현한 적이 있습니다. 은근히 유용한 방법입니다. 테이블안에 테이블 넣기 [Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등) [Html] Pre태그 사용법 & 예제 [Html] Margin, Padding 속성의 차이점과 사용법 [Html] Div 태그 ..
HTML을 하다보면 굉장히 많이 사용하는 태그가 바로 일것입니다. 바로 표를 만들어주는 HTML태그인데요. 표 뿐만 아니라 갤러리를 만들 수도 있고 지금은 잘 사용하지 않습니다만 웹사이트 전체의 레이아웃 공간을 배치할때도 사용할 수 있는 등 매우 다양하게 응용이 가능하여 굉장히 많이 사용되는 태그중 하나입니다. 이번 포스팅에서는 HTML의 테이블을 만드는 모든 기법에 대해 다뤄보려 합니다. 테이블 만들기 주제 태그 비고 테이블의 구성 요소 테이블을 만드는 태그 테이블의 헤더부분을 만드는 태그 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 테이블을 만드는 순서는 다음과 같습니다. 먼저 제일 바깥쪽에는 태그가 들어갑니다. 그리고 가장 위에는 라는 테이블 헤더 태그를 사용합니다. Default값은 굵은..
HTML에서 문단을 나누는 태그는 P태그입니다. Paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰여지는데 이 P태그를 활용하여 문단의 정렬, 배경색 등을 바꿀 수 있습니다. 많은 분들이 BR태그와 P태그를 동일한 태그라고 생각하시는 분들이 많은데 이 두가지 태그는 분명한 차이점이 있습니다. 바로 개행의 횟수죠. BR태그는 사용한 횟수만큼 개행을 합니다. 방금 4번을 했으니 개행을 4번을 했겠군요. 하지만 P태그는 아무리 많이 사용하더라도 한번만 개행합니다. 문단을 나누는 P태그 사용법 태그 속성 비고 align="left" 왼쪽정렬 align="right" 오른쪽정렬 align="center" 가운데정렬 align="justify" 맞춤정렬 P태그에서 가장 많이 사용하는 속성은 바로 al..
이번 포스팅에서는 HTML의 각종 목록 태그에 대해서 알아보도록 하겠습니다. 목록태그를 잘 활용하신다면 웹사이트에서 보기 좋은 목록을 쉽게 만들 수 있습니다. 메뉴를 만들때, 안내표를 만들때 주로 사용합니다. UL태그, OL태그, DI태그, LI태그 사용법 속성 태그 비고 목록 태그 UL 글머리 기호를 앞에 붙여 목록을 만드는 형식 OL 번호를 앞에 붙여 목록을 만드는 형식 DL 기호 없이 문단으로 목록을 만드는 형식 LI UI와 OL내부에서 활용되는 태그 1. UL태그는 글머리 기호를 붙여 목록을 만드는 방식으로 순서가 필요없는 목록을 만들때 주로 사용합니다. 2. OL태그는 주로 순서가 필요한 목록을 만들때 사용하며 ol type="속성"을 줘 다양한 형태의 목록을 만들 수 있습니다. 3. DL는 기..
혹시 웹사이트를 이용하시다가 몇 초 후 다른페이지로 보내지는 기능을 보신 경험이 있으신가요? 이것은 바로 매타태그를 활용하여 자동으로 다른페이지로 전환되게끔 구현한 것입니다. HTML을 하시는 분이라면 로 시작하는 태그를 보신 적이 있으실 겁니다. 이것은 메타태그라는 것인데 메타태그란 HTML 태그중의 하나이며 MetaData(정보에 대한 정보를) 제공하는 역할을 합니다. 이 기능을 응용하면 일정시간 후 다른페이지로 보내는 기능을 구현할 수 있습니다. 일정시간 후 다른페이지로 보내기 태그 속성 비고 META refresh 새로고침 content ~초 뒤 url 사이트 주소 메타태그는 여러가지 속성을 가지고 있지만 위에 있는 속성들이 대표적입니다. 1. refresh태그는 새로고침이라고 생각하시면 됩니다...
요즘은 그렇게 많이 사용하지 않는 태그인데 전광판처럼 텍스트를 움직이게 만들 수 있는 태그가 있습니다. 텍스트뿐만 아니라 사진도 가능합니다. 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..