Monthly Archives: 12월 2013

& 출력하기

[목적] 브라우저에 ‘&’를 출력하는 방법을 배운다. [이론] 위 그림과 같은 결과를 얻기 위해 아래 코드를 입력한다.

그러면 이전 글에서 다루것과 같이 ‘&lt;’, ‘&gt;’는 각각 ‘<‘, ‘>’을 출력하므로 아래 그림의 결과가 출력된다. 올바른 결과를 위해서는 ‘&’ 출력을 위한 ‘&amp;’를 응용하여HTML 코드에 ‘lt’와 ‘gt’ 앞에 ‘&amp;’를 붙여주면 브라우저 상에 ‘&lt;’와 ‘&gt;’를 출력할 수 있다. [실습] 1. HTML에서… Read More »

태그 출력하기

[목적] 브라우저에서 HTML 태그를 출력하는 방법을 배운다. [이론]

위 그림의 내용을 출력하기 위해 위와 같이 HTML 코드를 작성하면 브라우저는 ‘<‘ ~ ‘>’ 사이의 내용도 하나의 태그로 인식하므로 아래 그림과 같이 아무 것도 출력하지 않는다. 모든 HTML 태그는 ‘<‘과 ‘>’으로 둘러싸여 있으므로 ‘<‘과 ‘>’을 출력하기 위한 특수문자 ‘&lt;’와 ‘&gt;’를 사용하면 브라우저에 태그를 출력할 수 있다.… Read More »

연속된 두 개 이상의 공백 출력하기

[목적] 브라우저에서 연속된 두 개 이상의 공백 출력하는 방법을 배운다. [이론] 이전 실습 ‘줄 바꾸기‘의 과제를 살펴보면 출력 결과가 위와 같으므로 ‘<body>’ ~ ‘</body>’ 태그 사이의 단어에 여러개의 공백을 삽입하여 다음과 같은 HTML 코드를 생각했을 것이다.

그러나 위와 같이 작성한 HTML 코드를 브라우저로 확인 한다면 단어 사이에 여러개의 공백이 출력되지 않고 단 하나의 공백만이… Read More »

줄 바꾸기

[목적] 브라우저에서 여러 줄에 걸쳐 문자열을 출력하는 방법을 배운다. [이론] 이전 실습 ‘한글 인코딩‘의 과제를 살펴보면 출력 결과가 위와 같으므로 ‘<body>’ ~ ‘</body>’ 태그 사이를 아래와 같이 작성한 HTML 코드를 생각할 수 있다.

그러나 위와 같이 작성해 브라우저로 확인한다면 줄바뀜이 발생하지 않고 아래 그림과 같이 한 칸의 공백으로 구분된 단어들이 출력됨을 볼 수 있다.… Read More »

한글 인코딩

[목적] 홈페이지에 한글을 사용할 경우 인코딩과 관련된 주의사항을 살펴본다. [이론] 이전 실습 ‘HTML 기본 구조‘에서 주어진 과제의 답은 아래와 같다.

그러나 Windows 환경에서 Eclipse, Netbeans, Dreamweaver 등과 같은 전용 개발환경이 아닌 메모장과 같은 간단한 편집기를 이용해 작성한 경우라면 많은 경우 아래 그림과 같이 한글이 올바르게 출력되지 않는다. 그 이유는 html 파일 저장 시 한글… Read More »

HTML 기본 구조

[목적] HTML의 기본 구조에 대해 배운다. [이론] 일반적으로 홈페이지는 MSIE, FireFox, Chrome 등과 같은 브라우저를 통해 접속한다. 이 때 브라우저는 서버로 부터 HTML(Hyper Text Markup Language) 형식의 홈페이지 문서를 렌더링(해석)하여 사용자에게 보여준다. 따라서 홈페이지 작성의 가장 기본은 HTML이다. 이 글에서는 HTML의 기본형식에 대해 살펴보겠다. [HTML의 기본 형식] HTML은 태그(Tag)로 구성된 스크립트 언어다. 그러므로 HTML을 공부할… Read More »

서버에 저장된 HTML 파일 EditPlus로 불러오기

[목적] 서버에 이미 저장된 html 파일을 EditPlus로 불러오는 방법을 배운다. [실습] 1. 앞의 실습에서 작성 서버에 저장된 ‘exam-01-01.html’ 파일을 EditPlus로 불러오기 위해 ‘파일’ 메뉴에서 ‘FTP’의 ‘원격 열기’ 항목을 클릭한다. 2. ‘원격 파일 열기’ 창이 뜨면 ‘계정’ 항목을 자신의 것으로 선택한 후 ‘표시’ 버튼을 클릭한다. 3. ‘Password’ 창이 뜨면 자신의 비밀번호를 입력하고 ‘확인’ 버튼을 클릭한다. 이… Read More »

HTML 작성, 업로드 및 브라우저로 확인하기

[목적] 간단한 홈페이지(HTML)를 작성한 후 웹서버에 올리고 브라우저를 통해 확인하는 방법을 배운다. [실습] 1. EditPlus를 사용하여 아래 내용을 입력한다.

2. 이제 작성된 내용을 웹서버(설명에서는 서버이름을 ‘webdb.ansan.ac.kr’로 가정하였음)에 원격저장을 위해 몇가지 서버계정 정보를 설정해야한다. 이를 위해 EditPlus의 ‘파일’ 메뉴에서 ‘FTP’의 ‘FTP설정’ 항목을 선택한다. 3. 웹서버로의 접속을 위한 계정 등록을 위해 ‘추가’ 버튼을 클릭한다. 4. 자신에게… Read More »