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

2장. 텍스트를 이용한 문서작성 학습목표 • 8주 차시 : 1/3 ∼ 3/3 배당시간 : 18시간 • 강의방법 : 실습, 강의식, 대화식, 모듐학습 • 문장 작성에 필요한 태그의 사용 방법을 알 수 있다. • 텍스트 모양과 관련된 태그를 알 수 있다. • 문단 모양과 관련된 태그를 알 수 있다.

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

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

(2) 문단 바꾸기 • 태그는 태그와 달리 다음 문단과 하나의 빈 줄 여백을 표현, 단순히 줄을 바꾸는 것이 아닌 문단을 구분하는 역할을 수행하는 태그이다.

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

1.2다양한 입력방식 (1) 기호문자 표시 • 공백을 비롯한 <,>,”,”,&등의 문자는 태그명령어나 인수를 다른 텍스와 구분하는 역할을 담당하기 때문에 그대로 사용할 수 없다. 그래서 이러한 기호들은 ISO Latin-1 Character Set 이라는 정해진 문자세트 값을 이용하여 표현 한다.

(1) 기호문자 표시

(2) 입력 상태 표시 태그 • <pre>태그와 <Xmp>태그를 사용하여 메모장에서 입력한 텍스트 및 태그를 그대로 웹 브라우저에서 표현할 수 있으며, 종료 태그를 사용해야 한다. <html> <head> <title>기호 문자 표현</title> </head> <body> <pre> 하나의 공백은 "spacebar키"로 구분할 수 있다. 하나 이상의 여러개의 공백은 spacebar 키로 구분할 수 없다. 또한 <enter>키를 아무리 눌러도 줄은 변하지 않는다. </pre> <xmp> &나 ©, £, ¢ 등의 다른 문자와 구별하거나 키보드로 표현할 수 없는 다양한 기호들은 별도로 표현해야 한다. </xmp> </body> </html>

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

2절.텍스트 관련 태그 2.1텍스트의 표현 (1)태그 • 글자와 관련된 속성을 부여하여, 텍스트를 다양한 형태로 표현하기 위해 사용된다. 형식과 속성은 다음과 같다.

①글자크기

▼결과

<html> <head> <title>글자 색상</title> </head> <body> <초 혼> 김 소 월 산산히 부서진 이름이여! 허공중에 헤어진 이름이여! 불러도 주인없는 이름이여! 부르다가 내가 죽을 이름이여! 심증에 남아있는 말 한 마디 끝끝내 마저 하지 못하였구나. 사랑하는 그 사람이여! 사랑하던 그 사람이여! </body> </html> ②글자 색상

▼결과

<html> <head> <title>글자 색상</title> </head> <body> <초 혼> 김 소 월 산산히 부서진 이름이 여! 허공중에 헤어진 이름이여! 불러도 주인없는 이름이 여! 부르다가 내가 죽을 이름이여! 심증에 남아있는 말 한 마디 끝끝내 마저 하지 못하였구나. 사랑하는 그 사람이여! 사랑하던 그 사람이여! </body> </html> ③글꼴

<실행결과>

(2) 텍스트 효과 • 태그와는 별도의 태그를 사용해야 함. • 텍스트 효과에 대한 태그를 중복시켜 동일한 텍스에 여러 효과를 적용시킬 수 있다. • 종료 태그를 사용하여 효과를 적용할 대상을 설정해야 함

<소스> <html> <head> <title>글자 효과</title> </head> <body> 중요한 부분은 글자를 진하게 표시합니다. 자료를 인용할 때에는 이탤릭체로 표시합니다. 강조하고자 할 때에는 밑줄로 표시합니다. 텍스트 내용을 취소할 때에는 <s>취소선</s>으로 표시합니다. 수학식에서는 윗첨자나 아랫첨자를 사용합니다. </body> </html>

<실행결과>

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>

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

2.3문단 태그 (1) 문단 정렬 • 태그로 구분된 텍스트를 의미하여 태그의 속성을 이용하여 웹 브라우저에서 일정한 기중에 의해 정렬시킬 수 있다.

<html> <head> <title>문단 정렬</title> <head> <body> 제목이나 핵심은 가운데 정렬 시킨다. 지은이나 소속 등은 오른쪽 정렬 시킨다 기본적으로 텍스트는 왼쪽 정렬 되어 있다. 내용이 길 경우에 왼쪽 정렬과 혼합 정렬의 차이점을 알 수 있다. 왼쪽 정렬 : 너에게 묻는다.(안도현)-연탄재 함부로 발로 차지 마라. 너 는 누구에게 한 번이라도 뜨거운 사람이었느냐. 혼합 정렬 : 너에게 묻는다.(안도현)-연탄재 함부로 발로 차지 마라. 너는 누구에게 한 번이라도 뜨거운 사람이었느냐. </body> </html>

(2)들여쓰기 • 왼쪽 경계선에 일정한 여백을 두고 싶을때 <blockquote>태그를 이용하며, 반복 사용할 경우 이용 횟수 만큼 공간을 확보한다. <html> <head> <title>들여 쓰기</title> </head> <body> 소금별 류시화 <blockquote><blockquote><blockquote><blockquote> 소금별에 사는 사람들은 눈물을 흘릴 수 없네 눈물을 흘리면 소금별이 녹아 버리기 때문 소금별 사람들은 눈물을 감추려고 자꾸만 눈을 깜박이네 소금별이 더 많이 반짝이는 건 그 때문이지 </blockquote></blockquote></blockquote></blockquote> </body> </html>

(3)수평선 표현 • <hr>태그를 이용. 문단이나 내용을 구분하기 위한 수평선을 표현할 수 있고, 속성을 설정하여 다양한 효과를 연출할 수 있음 • 선의 폭은 픽셀/백분율 단위로 정할 수 있고, 백분율일 경우 웹 브라우저의 너비를 기준으로 정해짐

<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>

2.4목록 태그 (1)번호 목록 • <ol>태그로 선언하고 <li>태그로 추가함으로써 숫자나 알파벳의 정해진 순서대로 나열하는 형태를 갖음

<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

(2) 기호목록 • 기호목록은 <ul>태그로 선언하고 <li>태그로 추가함으로써 기호에 의해 목록을 구성하는 형태를 갖음

<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>

(3) 정의 목록 • 설명을 위한 것으로 <dl>태그로 선언하고, <dt>태그로 정의 목록의 제목을 부여하며, <dd>태그로 목록을 추가함

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>

형성평가 • 줄 바꾸기 태그는 무엇인가 ? • 문단 바꾸기 태그는 무엇인가 ? • 입력 상태 표시 태그에 대해 말하시오. • Font 태그에 대해 말하시오. • 텍스트에 효과를 주는 태그에 대해 말하시오. • 문단 정렬 태그에 대해 말하시오.

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

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

Presentation Transcript