UIT Series HTML + JavaScript [Chapter 1] Html을 이용한 웹 페이지 만들기
1.1 HTML을 이용한 웹 페이지 만들기 (1) 프로젝트 설명 Html+javaScript 1.1 HTML을 이용한 웹 페이지 만들기 (1) 프로젝트 설명 Windows XP의 메모장을 이용하여 웹 페이지를 만드는 방법을 익히기 위해 간단한 시를 웹 페이지로 만들어 본다.
1.1 HTML을 이용한 웹 페이지 만들기(2) 익혀야 할 기능 Html+javaScript 1.1 HTML을 이용한 웹 페이지 만들기(2) 익혀야 할 기능 ￭ HTML 기본 구조 : HTML의 기본이 되는 구조를 익히고 사용한다. ￭ BODY 태그 : BODY 태그의 여러 속성을 익히고, 전체 배경색을 설정한다. ￭ BR, P, PRE 태그 : 줄 바꿈이나 표시 형식을 나타내는 태그의 사용법을 익힌다. ￭ FONT 태그 : FONT 태그의 속성 설정으로 글씨의 크기와 색을 변경한다. ￭ HR 태그 : HR 태그를 사용하여 수평선을 삽입한다. ￭ H 태그 : 제목을 나타낼 때 크기를 변화시키는 태그를 사용한다. ￭ 주석 달기 : HTML 태그 내에 주석을 다는 방법을 익힌다. ￭ 글씨 모양을 바꾸는 태그 : 여러 가지 글씨 모양을 나타내는 태그를 사용한다.
1.1 HTML을 이용한 웹 페이지 만들기(3) 지시 사항 ￭ 배경 화면의 색을 ADD8E6으로 설정한다. Html+javaScript 1.1 HTML을 이용한 웹 페이지 만들기(3) 지시 사항 ￭ 배경 화면의 색을 ADD8E6으로 설정한다. ￭ 주어진 파일 "윤동주 님의 시.txt"의 내용을 적절한 형태로 화면에 나타낸다. ￭ 띄어쓰기와 줄 바꿈 등 문단을 구성하는 태그를 사용한다. ￭ HTML 소스에 주석문을 삽입한다. ￭ 삽입하는 수평선이 너비의 80%가 되도록 설정하고 왼쪽 정렬을 한다. ￭ 제목 글자의 크기를 H4의 크기로 설정한다. ￭ 시 제목의 글자 크기를 SIZE 속성 값 5로 설정한다. ￭ 첫 번째 시의 제목은 파랑색으로 설정한다. ￭ 두 번째 시의 제목은 빨강색으로 설정한다. ￭ 첫 번째 시의 내용은 이탤릭체로 나타낸다. ￭ 두 번째 시의 내용은 타자기체로 나타낸다.
<TITLE>윤동주 님의 시 1</TITLE> </HEAD> Html+javaScript 1.2 학습내용(1) [단계 1] 배경색 만들기 <HTML> <HEAD> <TITLE>윤동주 님의 시 1</TITLE> </HEAD> <BODY BGCOLOR="#ADD8E6"> </BODY> </HTML>
1.2 학습내용 (2) [단계 2] 내용 삽입하기 Html+javaScript <BODY BGCOLOR="#ADD8E6"> 윤동주 님의 시1 별 헤는 밤 윤동주 계절이 지나가는 하늘에는 가을로 가득 차 있습니다. 나는 아무 걱정도 없이 가을 속의 별들을 다 헤일 듯합니다. ... ... 중략 ... ... 그러나 겨울이 지나고 나의 별에도 봄이 오면 무덤 위에 파란 잔디가 피어나듯이 내 이름자 묻힌 언덕 위에도 자랑처럼 풀이 무성할 게외다. 윤동주 님의 시2 십자가 윤동주 쫓아오던 햇빛인데 지금 교회당 꼭대기 십자가에 걸리었습니다. 모가지를 드리우고 꽃처럼 피어나는 피를 어두워가는 하늘 밑에 조용히 흘리겠습니다. </BODY>
<P> 계절이 지나가는 하늘에는<BR> 가을로 가득 차 있습니다.</P> Html+javaScript 1.2 학습내용 (3-1) [단계 3] 띄어쓰기와 줄 바꿈 태그 <PRE> 별 헤는 밤 윤동주 </PRE> <P> 계절이 지나가는 하늘에는<BR> 가을로 가득 차 있습니다.</P>
Html+javaScript 1.2 학습내용 (3-2) 띄어쓰기와 줄 바꿈 태그를 사용한 모습
윤동주 <SUB>님의 시1</SUB> 윤동주 <SUB>님의 시2</SUB> Html+javaScript 1.2 학습내용 (4) [단계 4] 글씨 모양을 설정하는 태그 윤동주 <SUB>님의 시1</SUB> 윤동주 <SUB>님의 시2</SUB> <CITE> ... 생략 ... </CITE> <B> 별 헤는 밤</B> <B> 십자가</B> <U> 윤동주 </U> <CODE> ... 생략 ... </CODE>
<BODY BGCOLOR="#ADD8E6"> <!-- 윤동주 님의 시 하나 --> Html+javaScript 1.2 학습내용 (5) [단계 5] 주석문과 수평선 삽입하기 <BODY BGCOLOR="#ADD8E6"> <!-- 윤동주 님의 시 하나 --> <HR WIDTH="80%" ALIGN="left"> 윤동주 <SUB>님의 시1</SUB>
<H4> 윤동주 <SUB>님의 시1</SUB></H4> Html+javaScript 1.2 학습내용 (6) [단계 6] 글자 크기 설정하기 <H4> 윤동주 <SUB>님의 시1</SUB></H4> <H4> 윤동주 <SUB>님의 시2</SUB></H4> <FONT SIZE="5" COLOR="blue"><B> 별 헤는 밤</B></FONT> <FONT SIZE="5" COLOR="red"><B> 십자가</B></FONT>
[단계 7] 모든 단계를 정리하여 완성된 HTML Html+javaScript 1.2 학습내용 (7) [단계 7] 모든 단계를 정리하여 완성된 HTML
1.4 집중탐구 (1) (1) HTML의 기본 구조 <HTML> <HEAD> <TITLE> Html+javaScript 1.4 집중탐구 (1) (1) HTML의 기본 구조 <HTML> <HEAD> <TITLE> 웹 브라우저 상단에 표시되는 정보의 내용을 나타냄 </TITLE> </HEAD> <BODY> HTML 문서의 본문 내용을 기술함 </BODY> </HTML>
1.4 집중탐구 (2) (2) <BODY> 태그 <BODY>의 속성 <BODY> Html+javaScript 1.4 집중탐구 (2) (2) <BODY> 태그 <BODY> HTML 문서의 본문 내용과 태그 </BODY> <BODY>의 속성 속성 설명 BACKGROUND 문서에 쓰일 배경 그림을 설정함. 속성 값은 그림 파일의 간단한 주소만으로 위치를 나타내는 상대주소나 모든 주소를 나타내는 절대주소를 사용함. BGCOLOR 문서의 전체 배경색을 설정함. RGB 값이나 색상의 영어 이름을 사용함. TEXT 문서의 전체적인 글자색을 설정함.
<PRE></PRE> Html+javaScript 1.4 집중탐구 (3) (3) 띄어쓰기와 줄 바꿈 태그 태그 이름 역할 <BR> 줄을 바꾸기 위해 사용하는 태그로 키보드의 Enter 키를 입력한 효과가 나타남. 종료 태그를 사용하지 않아도 됨. <P> 문단 나누기를 하는 태그로 줄 바꿈과 동시에 한 줄을 띄워줌. 종료 태그를 사용해도 되고, 사용하지 않아도 됨. <PRE></PRE> 화면에 입력한 그대로 내용이 웹 브라우저 상에서 보이게 하기 위해 사용하는 태그. 종료 태그가 반드시 필요함.
1.4 집중탐구 (4) (4) 띄어쓰기와 줄 바꿈 태그 활용 Html+javaScript <HTML> <HEAD><TITLE> 띄어쓰기와 줄 바꿈 태그 활용하기 </TITLE></HEAD> <BODY> 1. 줄바꿈을 하기 위해서는 BR이라는 태그를 이용하여야 합니다. <BR> 2. BR을 사용하지 않으면 줄이 바뀌지를 않습니다. <P> 3. 문단나누기를 하기 위해서는 P라는 태그를 사용합니다. <PRE> 4. 화면에 입력한 모양 그대로 출력되게 하기 위해서는 PRE라는 태그를 사용합니다. </PRE> </BODY> </HTML>
1.4 집중탐구 (5) (5) <H> 태그 활용 <HTML> Html+javaScript 1.4 집중탐구 (5) (5) <H> 태그 활용 <HTML> <HEAD><TITLE> 제목 글자 크기 바꾸기 </TITLE></HEAD> <BODY> <H1> 1. H1 크기의 글씨 </H1> <H2> 2. H2 크기의 글씨 </H2> <H3> 3. H3 크기의 글씨 </H3> <H4> 4. H4 크기의 글씨 </H4> <H5> 5. H5 크기의 글씨 </H5> <H6> 6. H6 크기의 글씨 </H6> </BODY> </HTML>
1.4 집중탐구 (6) (6) <HR> 태그 활용 ￭ <HR> 태그의 속성 Html+javaScript 1.4 집중탐구 (6) (6) <HR> 태그 활용 <HR WIDTH="선길이" SIZE="선굵기" ALIGN="정렬형태" COLOR="색 이름" NOSHADE> ￭ <HR> 태그의 속성 속성 설명 WIDTH 선의 길이를 설정함. 속성 값은 %나 픽셀 값을 사용함. SIZE 선의 굵기를 설정함. ALIGN 정렬 방식을 설정함. 속성 값 left는 표를 왼쪽으로 정렬, center는 가운데로, right는 오른쪽으로 정렬함. COLOR 선의 색을 설정함. 속성 값은 RGB 값이나 색상의 영어 이름으로 설정함. NOSHADE 수평선의 초기값에 SHADE가 설정되어 3D음영이 나타나는데, 3D음영을 원하지 않을 때 사용함.
1.4 집중탐구 (7) (7) 주석 태그 활용 ￭ 주석 태그의 형식 <!-- 문자열 --> Html+javaScript 1.4 집중탐구 (7) (7) 주석 태그 활용 ￭ 주석 태그의 형식 <!-- 문자열 -->
1.4 집중탐구 (8) (8) 글씨 모양을 바꾸는 태그 Html+javaScript 글씨 모양 태그 이름 설명 이탤릭체 <CITE> </CITE> 이탤릭체로 설정함. <EM> </EM> <I> </I> <VAR> </VAR> <DFN> </DFN> 위첨자 <SUP> </SUP> 위첨자로 설정함. 아래첨자 <SUB> </SUB> 아래첨자로 설정함. 강조글자 <STRONG> </STRONG> 굵은 글씨로 설정함. <B> </B> 밑줄 <U> </U> 밑줄 그은 글씨로 설정함. 타자기체 <KBD> </KBD> 타자기체로 설정함. <CODE> </CODE> <TT> </TT> 조금 크게 <BIG> </BIG> 조금 큰 글씨로 설정함. 조금 작게 <SMALL> </SMALL> 조금 작은 글씨로 설정함. 깜박임 <BLINK> </BLINK> 글자가 깜박이게 설정함. Netscape에서만 지원 가능함. 가운데 줄그은 글자 <STRIKE> </STRIKE> 가운데 줄을 그은 글씨로 설정함.
1.4 집중탐구 (9) (9) <FONT> 태그 ￭ <FONT> 태그의 형식 Html+javaScript 1.4 집중탐구 (9) (9) <FONT> 태그 ￭ <FONT> 태그의 형식 <FONT COLOR="색 이름" SIZE="크기" FACE="글꼴명"> 문자열 </FONT> ￭ <FONT> 태그의 속성 속성 설명 COLOR 글자의 색을 설정함. 속성 값은 RGB 값이나 색상의 영어 이름을 사용함. SIZE 글자의 크기를 설정함. 숫자 1~7까지의 글자 크기로 설정함. 초기 값은 3이고, -1에서 +3은 상대적인 크기를 뜻함. FACE 글꼴을 설정함.