2 장 . 텍스트를 이용한 문서작성

1

문장 작성에 필요한 태그의 사용 방법을 알 수 있다 . 텍스트 모양과 관련된 태그를 알 수 있다 . 문단 모양과 관련된 태그를 알 수 있다 .

학습목표

2 장 . 텍스트를 이용한 문서작성

- 8 주 차시 : 1/3 ∼ 3/3 배당시간 : 18 시간

- 강의방법 : 실습 , 강의식 , 대화식 , 모듐학습

2

1.1 기본 문장 작성(1) 줄 바꾸기 태그는 “ line BReak” 의 의미로 문장을 강제로 줄바꿈 할 때 사용하며 ,구분된 줄 사이의 간격은 붙어있는 상태이다 . 여러 줄의 공백을 삽입할 경우에는 태그를 반복하여 사용할 수 있으며 , 종료 태그가 필요 없다 .

1 절 . 문장 작성 태그

3

▼ 줄바꿈 태그 ( 태그 ) 를 적용시킨 모습

4

(2) 문단 바꾸기 태그는 태그와 달리 다음 문단과 하나의 빈 줄 여백을 표

현 , 단순히 줄을 바꾸는 것이 아닌 문단을 구분하는 역할을 수행하는 태그이다 .

5

▼ 문단 바꿈 태그 ( 태그 ) 를 적용시킨 모습

6

1.2 다양한 입력방식(1) 기호문자 표시 공백을 비롯한 <,>,”,”,& 등의 문자는 태그명령어나 인수를 다른 텍스와

구분하는 역할을 담당하기 때문에 그대로 사용할 수 없다 . 그래서 이러한 기호들은 ISO Latin-1 Character Set 이라는 정해진 문자세트 값을 이용하여 표현 한다 .

7

(1) 기호문자 표시

8

9

(2) 입력 상태 표시 태그 <pre> 태그와 <Xmp> 태그를 사용하여 메모장에서 입력한 텍스트 및

태그를 그대로 웹 브라우저에서 표현할 수 있으며 , 종료 태그를 사용해야 한다 .

<html>

<head>

<title> 기호 문자 표현 </title>

</head>

<body>

<pre>

하나의 공백은 "spacebar 키 " 로 구분할 수 있다 .

하나 이상의 여러개의 공백은 spacebar

키로 구분할 수 없다 . 또한 <enter> 키를 아무리 눌러도 줄은 변하지 않는다 . 

</pre>

<xmp>

& 나 ©, £, ¢ 등의 다른 문자와 구별하거나

키보드로 표현할 수 없는 다양한 기호들은 별도로 표현해야 한다 .

</xmp>

</body>

</html>

10

<xmp>: 범위 내에 포함되어 있는 태그 명령 자체를 표현

11

2.1 텍스트의 표현(1) 태그 글자와 관련된 속성을 부여하여 , 텍스트를 다양한 형태로 표현하기 위해

사용된다 . 형식과 속성은 다음과 같다 .

2 절 . 텍스트 관련 태그

12

13

14

① 글자크기

15

▼ 결과

16

② 글자 색상

<html>

<head>

<title> 글자 색상 </title>

</head>

<body>

< 초 혼 >

 김 소 월 

 산산히 부서진 이름이여 ! 

 허공중에 헤어진 이름이여 ! 

 불러도 주인없는 이름이여 ! 

 부르다가 내가 죽을 이름이여 !

 심증에 남아있는 말 한 마디 

 끝끝내 마저 하지 못하였구나 . 

 사랑하는 그 사람이여 ! 

 사랑하던 그 사람이여 !

</body>

</html>

17

▼ 결과

18

③ 글꼴 <html>

<head>

<title> 글자 색상 </title>

</head>

<body>

< 초 혼 >

 김 소 월 

 산산히 부서진 이름이

여 ! 

 허공중에 헤어진 이름이여 ! 

 불러도 주인없는 이름이

여 ! 

 부르다가 내가 죽을 이름이여 !

 심증에 남아있는 말 한 마디

 

 끝끝내 마저 하지 못하였구나 . 

 사랑하는 그 사람이여 ! 

 사랑하던 그 사람이여 !

</body>

</html>

19

< 실행결과 >

20

(2) 텍스트 효과 태그와는 별도의 태그를 사용해야 함 . 텍스트 효과에 대한 태그를 중복시켜 동일한 텍스에 여러 효과를 적용시킬

수 있다 . 종료 태그를 사용하여 효과를 적용할 대상을 설정해야 함

21

<html>

<head>

<title> 글자 효과 </title>

</head>

<body>



중요한 부분은 글자를 진하게 표시합니다 .

자료를 인용할 때에는 이탤릭체 로 표시합니다 .

강조하고자 할 때에는 밑줄 로 표시합니다 .

텍스트 내용을 취소할 때에는 <s> 취소선 </s> 으로 표시합니다 .

수학식에서는 윗첨자 나 아랫첨자 를 사용합니다 .



</body>

</html>

< 소스 >

22

< 실행결과 >

23

2.2 제목의 표현 <Hn> 형식을 이용한다 . n 은 1~6 까지의 인수를 가질 수 있다 . 태그의 size 속성과는 반대로 숫자가 커질수록 글자의

크기가 작아진다 .

<html>

<head>

<title> 제목 태그 </title>

</head>

<body>

<h1> 제목 태그는 </h1>

<h2> 문서의 제목을 </h2>

<h3> 별도로 표현하기에 적합하고 </h3>

<h4> 자동으로 문단이 구분된다 .</h4>

<h5> 문서 각 항목에 맞도록 </h5>

<h6> 태그의 인수를 변경하여 사용한다 .</h6>

</body>

</html>

24

제목태그를 사용했을 경우 자동으로 문단이 바뀌므로 , 태그를 사용하지 않는다 .

25

2.3 문단 태그(1) 문단 정렬 태그로 구분된 텍스트를 의미하여 태그의 속성을 이용하여 웹

브라우저에서 일정한 기중에 의해 정렬시킬 수 있다 .

26

<html>

<head>

<title> 문단 정렬 </title>

<head>

<body>

 제목이나 핵심은 가운데 정렬 시킨다 .

 지은이나 소속 등은 오른쪽 정렬 시킨다 

 기본적으로 텍스트는 왼쪽 정렬 되어 있다 .

내용이 길 경우에 왼쪽 정렬과 혼합 정렬의 차이점을 알 수 있다 .

 왼쪽 정렬 : 너에게 묻는다 .( 안도현 )- 연탄재 함부로 발로 차지 마라 . 너는 누구에게 한 번이라도 뜨거운 사람이었느냐 .

 혼합 정렬 : 너에게 묻는다 .( 안도현 )- 연탄재 함부로 발로 차지 마라 .

너는 누구에게 한 번이라도 뜨거운 사람이었느냐 .

</body>

</html>

27

28

(2) 들여쓰기 왼쪽 경계선에 일정한 여백을 두고 싶을때 <blockquote> 태그를

이용하며 , 반복 사용할 경우 이용 횟수 만큼 공간을 확보한다 .

<html><head><title> 들여 쓰기 </title></head><body> 소금별 류시화 <blockquote><blockquote><blockquote><blockquote>소금별에 사는 사람들은 눈물을 흘릴 수 없네 눈물을 흘리면 소금별이 녹아 버리기 때문 소금별 사람들은 눈물을 감추려고 자꾸만 눈을 깜박이네 소금별이 더 많이 반짝이는 건 그 때문이지</blockquote></blockquote></blockquote></blockquote></body></html>

29

30

(3) 수평선 표현 <hr> 태그를 이용 . 문단이나 내용을 구분하기 위한 수평선을 표현할 수

있고 , 속성을 설정하여 다양한 효과를 연출할 수 있음 선의 폭은 픽셀 / 백분율 단위로 정할 수 있고 , 백분율일 경우 웹

브라우저의 너비를 기준으로 정해짐

31

<html>

<head>

<title> 수평 및 수직선 </title>

</head>

<body>

<h2>n 진수를 10 진수로 변환 </h2>

<hr align=left width=80% color=red>

(1) 2 진수 101101

<hr align=left size=40 width=540>

(2) 8 진수 2345

<hr align=left size=40 width=70%>

(3) 16 진수 A37

<hr align=left size=40 width=70%>

[ 평가 결과 ]

<hr width=30%, size=30 color=#05ff05>

</body>

</html>

32

33

2.4 목록 태그(1)번호 목록 <ol> 태그로 선언하고 <li> 태그로 추가함으로써 숫자나 알파벳의

정해진 순서대로 나열하는 형태를 갖음

34

<html><head><title>번호 목록 </title></head><body><ol type=“1”><li> 과일<ol type=“a”><li> 사과<ol type=“i”><li> 예산사과<li> 문경사과<li> 상주사과</ol><li> 배<ol type=“I”><li> 나주배<li>먹골배</ol></ol><li> 야채<ol type=“A”><li>감자<li> 호박<li>오이</ol></ol></body></html

35

36

(2) 기호목록 기호목록은 <ul> 태그로 선언하고 <li> 태그로 추가함으로써 기호에

의해 목록을 구성하는 형태를 갖음

37

<html><head><title> 기호 목록 </title><head><body><ul><li> 과일<ul type=“square”><li> 사과<ul type=“circle”><li> 예산사과<li> 문경사과<li> 상주사과</ul><li> 배<ul type=“circle”><li> 나주배<li> 먹골배

<li> 먹골배

</ul>

</ul><li> 야채

<ol type=“A”>

<li> 감자

<li> 호박

<li> 오이

</ul>

</ul>

</body>

</html>

38

39

(3) 정의 목록 설명을 위한 것으로 <dl> 태그로 선언하고 , <dt> 태그로 정의

목록의 제목을 부여하며 , <dd> 태그로 목록을 추가함

40

2. 텍스트 관련 태그<html><head><title> 정의 목록 </title></head><body><dl><dt> 과일<dd> 사과<dl><dd> 예산사과<dd> 상주사과<dd> 무경사과</dl><dd> 배<dl><dd> 나주배<dd>먹골배</dl><dt> 야채<dd>감자<dd> 호박<dd>오이</dl></body></html>

41

42

형성평가1. 줄 바꾸기 태그는 무엇인가 ?

2. 문단 바꾸기 태그는 무엇인가 ?

3. 입력 상태 표시 태그에 대해 말하시오 .

4. Font 태그에 대해 말하시오 .

5. 텍스트에 효과를 주는 태그에 대해 말하시오 .

6. 문단 정렬 태그에 대해 말하시오 .

Documents

2 장 . 텍스트를 이용한 문서작성