2 장 . 텍스트를 이용한 문서작성
-
Upload
axel-mclaughlin -
Category
Documents
-
view
59 -
download
0
description
Transcript of 2 장 . 텍스트를 이용한 문서작성
![Page 1: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/1.jpg)
1
문장 작성에 필요한 태그의 사용 방법을 알 수 있다 . 텍스트 모양과 관련된 태그를 알 수 있다 . 문단 모양과 관련된 태그를 알 수 있다 .
학습목표
2 장 . 텍스트를 이용한 문서작성
- 8 주 차시 : 1/3 ∼ 3/3 배당시간 : 18 시간
- 강의방법 : 실습 , 강의식 , 대화식 , 모듐학습
![Page 2: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/2.jpg)
2
1.1 기본 문장 작성(1) 줄 바꾸기<br> 태그는 “ line BReak” 의 의미로 문장을 강제로 줄바꿈 할 때 사용하며 ,구분된 줄 사이의 간격은 붙어있는 상태이다 . 여러 줄의 공백을 삽입할 경우에는 <br> 태그를 반복하여 사용할 수 있으며 , 종료 태그가 필요 없다 .
1 절 . 문장 작성 태그
![Page 3: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/3.jpg)
3
▼ 줄바꿈 태그 (<br> 태그 ) 를 적용시킨 모습
![Page 4: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/4.jpg)
4
(2) 문단 바꾸기 <p> 태그는 <br> 태그와 달리 다음 문단과 하나의 빈 줄 여백을 표
현 , 단순히 줄을 바꾸는 것이 아닌 문단을 구분하는 역할을 수행하는 태그이다 .
![Page 5: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/5.jpg)
5
▼ 문단 바꿈 태그 (<p> 태그 ) 를 적용시킨 모습
![Page 6: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/6.jpg)
6
1.2 다양한 입력방식(1) 기호문자 표시 공백을 비롯한 <,>,”,”,& 등의 문자는 태그명령어나 인수를 다른 텍스와
구분하는 역할을 담당하기 때문에 그대로 사용할 수 없다 . 그래서 이러한 기호들은 ISO Latin-1 Character Set 이라는 정해진 문자세트 값을 이용하여 표현 한다 .
![Page 7: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/7.jpg)
7
(1) 기호문자 표시
![Page 8: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/8.jpg)
8
![Page 9: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/9.jpg)
9
(2) 입력 상태 표시 태그 <pre> 태그와 <Xmp> 태그를 사용하여 메모장에서 입력한 텍스트 및
태그를 그대로 웹 브라우저에서 표현할 수 있으며 , 종료 태그를 사용해야 한다 .
<html>
<head>
<title> 기호 문자 표현 </title>
</head>
<body>
<pre>
하나의 공백은 "spacebar 키 " 로 구분할 수 있다 .<p>
하나 이상의 여러개의 공백은 spacebar
키로 구분할 수 없다 .<p> 또한 <enter> 키를 아무리 눌러도 줄은 변하지 않는다 . <p>
</pre>
<xmp>
& 나 ©, £, ¢ 등의 다른 문자와 구별하거나
키보드로 표현할 수 없는 <br> 다양한 기호들은 별도로 표현해야 한다 .
</xmp>
</body>
</html>
![Page 10: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/10.jpg)
10
<xmp>: 범위 내에 포함되어 있는 태그 명령 자체를 표현
![Page 11: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/11.jpg)
11
2.1 텍스트의 표현(1)<font> 태그 글자와 관련된 속성을 부여하여 , 텍스트를 다양한 형태로 표현하기 위해
사용된다 . 형식과 속성은 다음과 같다 .
2 절 . 텍스트 관련 태그
![Page 12: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/12.jpg)
12
![Page 13: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/13.jpg)
13
![Page 14: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/14.jpg)
14
① 글자크기
![Page 15: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/15.jpg)
15
▼ 결과
![Page 16: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/16.jpg)
16
② 글자 색상
<html>
<head>
<title> 글자 색상 </title>
</head>
<body>
<font size=6 color=purple>< 초 혼 ></font><p>
<font color=lime> 김 소 월 </font><p>
<font size=7 color=orange> 산산히 부서진 이름이여 !<br></font>
<font size=6 color=cyan> 허공중에 헤어진 이름이여 !<br></font>
<font size=5 color=navy> 불러도 주인없는 이름이여 !<br></font>
<font size=4 color=skyblue> 부르다가 내가 죽을 이름이여 !</font><p>
<font size=4 color=#b22222> 심증에 남아있는 말 한 마디 <br></font>
<font size=3 color=#90ee90> 끝끝내 마저 하지 못하였구나 .<br></font>
<font size=2 color=#ff6347> 사랑하는 그 사람이여 !<br></font>
<font size=1 color=#4169e1> 사랑하던 그 사람이여 !</font>
</body>
</html>
![Page 17: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/17.jpg)
17
▼ 결과
![Page 18: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/18.jpg)
18
③ 글꼴 <html>
<head>
<title> 글자 색상 </title>
</head>
<body>
<font size=6 color=purpleface=HY 예서 M>< 초 혼 ></font><p>
<font color=lime face= 궁서 > 김 소 월 </font><p>
<font face= 휴먼옛체 ><font size=7 color=orange> 산산히 부서진 이름이
여 !<br></font>
<font size=6 color=cyan> 허공중에 헤어진 이름이여 !<br></font></font>
<font face= 휴먼매직체 ><font size=5 color=navy> 불러도 주인없는 이름이
여 !<br></font>
<font size=4 color=skyblue> 부르다가 내가 죽을 이름이여 !</font></font><p>
<font face= 서울도시 ><font size=4 color=#b22222> 심증에 남아있는 말 한 마디
<br></font>
<font size=3 color=#90ee90> 끝끝내 마저 하지 못하였구나 .<br></font></font>
<font face=HY 센스 L><font size=2 color=#ff6347> 사랑하는 그 사람이여 !<br></font>
<font size=1 color=#4169e1> 사랑하던 그 사람이여 !</font></font>
</body>
</html>
![Page 19: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/19.jpg)
19
< 실행결과 >
![Page 20: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/20.jpg)
20
(2) 텍스트 효과 <font> 태그와는 별도의 태그를 사용해야 함 . 텍스트 효과에 대한 태그를 중복시켜 동일한 텍스에 여러 효과를 적용시킬
수 있다 . 종료 태그를 사용하여 효과를 적용할 대상을 설정해야 함
![Page 21: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/21.jpg)
21
<html>
<head>
<title> 글자 효과 </title>
</head>
<body>
<font size=4>
중요한 부분은 글자를 <b> 진하게 </b> 표시합니다 .<p>
자료를 인용할 때에는 <i> 이탤릭체 </i> 로 표시합니다 .<p>
강조하고자 할 때에는 <u> 밑줄 </u> 로 표시합니다 .<p>
텍스트 내용을 취소할 때에는 <s> 취소선 </s> 으로 표시합니다 .<p>
수학식에서는 <sup> 윗첨자 </sup> 나 <sub> 아랫첨자 </sub> 를 사용합니다 .
</font>
</body>
</html>
< 소스 >
![Page 22: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/22.jpg)
22
< 실행결과 >
![Page 23: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/23.jpg)
23
2.2 제목의 표현 <Hn> 형식을 이용한다 . n 은 1~6 까지의 인수를 가질 수 있다 . <font> 태그의 size 속성과는 반대로 숫자가 커질수록 글자의
크기가 작아진다 .
<html>
<head>
<title> 제목 태그 </title>
</head>
<body>
<h1> 제목 태그는 </h1>
<h2> 문서의 제목을 </h2>
<h3> 별도로 표현하기에 적합하고 </h3>
<h4> 자동으로 문단이 구분된다 .</h4>
<h5> 문서 각 항목에 맞도록 </h5>
<h6> 태그의 인수를 변경하여 사용한다 .</h6>
</body>
</html>
![Page 24: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/24.jpg)
24
제목태그를 사용했을 경우 자동으로 문단이 바뀌므로 <p>,<br>태그를 사용하지 않는다 .
![Page 25: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/25.jpg)
25
2.3 문단 태그(1) 문단 정렬 <p> 태그로 구분된 텍스트를 의미하여 태그의 속성을 이용하여 웹
브라우저에서 일정한 기중에 의해 정렬시킬 수 있다 .
![Page 26: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/26.jpg)
26
<html>
<head>
<title> 문단 정렬 </title>
<head>
<body>
<p align=center> 제목이나 핵심은 가운데 정렬 시킨다 .</p>
<p align=right> 지은이나 소속 등은 오른쪽 정렬 시킨다 </p>
<p align=left> 기본적으로 텍스트는 왼쪽 정렬 되어 있다 .</p>
내용이 길 경우에 왼쪽 정렬과 혼합 정렬의 차이점을 알 수 있다 .</p>
<p align=left> 왼쪽 정렬 : 너에게 묻는다 .( 안도현 )- 연탄재 함부로 발로 차지 마라 . 너는 누구에게 한 번이라도 뜨거운 사람이었느냐 .</p>
<p align=justify> 혼합 정렬 : 너에게 묻는다 .( 안도현 )- 연탄재 함부로 발로 차지 마라 .
너는 누구에게 한 번이라도 뜨거운 사람이었느냐 .</p>
</body>
</html>
![Page 27: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/27.jpg)
27
![Page 28: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/28.jpg)
28
(2) 들여쓰기 왼쪽 경계선에 일정한 여백을 두고 싶을때 <blockquote> 태그를
이용하며 , 반복 사용할 경우 이용 횟수 만큼 공간을 확보한다 .
<html><head><title> 들여 쓰기 </title></head><body><p align=center><font size=6> 소금별 </font></p><p align=right><font size=5>류시화 </font></p><font size=4><blockquote><blockquote><blockquote><blockquote>소금별에 사는 사람들은 <br>눈물을 흘릴 수 없네 <br>눈물을 흘리면 <br>소금별이 녹아 버리기 때문 <p>소금별 사람들은 <br>눈물을 감추려고 자꾸만 <br>눈을 깜박이네 <p>소금별이 더 많이 반짝이는 건 <br>그 때문이지</blockquote></blockquote></blockquote></blockquote></font></body></html>
![Page 29: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/29.jpg)
29
![Page 30: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/30.jpg)
30
(3) 수평선 표현 <hr> 태그를 이용 . 문단이나 내용을 구분하기 위한 수평선을 표현할 수
있고 , 속성을 설정하여 다양한 효과를 연출할 수 있음 선의 폭은 픽셀 / 백분율 단위로 정할 수 있고 , 백분율일 경우 웹
브라우저의 너비를 기준으로 정해짐
![Page 31: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/31.jpg)
31
<html>
<head>
<title> 수평 및 수직선 </title>
</head>
<body>
<h2>n 진수를 10 진수로 변환 </h2>
<hr align=left width=80% color=red><p>
(1) <b>2 진수 101101</b>
<hr align=left size=40 width=540><p>
(2) <b>8 진수 2345</b>
<hr align=left size=40 width=70%><p>
(3) <b>16 진수 A37</b>
<hr align=left size=40 width=70%><p>
<p align=center>[ 평가 결과 ]
<hr width=30%, size=30 color=#05ff05>
</body>
</html>
![Page 32: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/32.jpg)
32
![Page 33: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/33.jpg)
33
2.4 목록 태그(1)번호 목록 <ol> 태그로 선언하고 <li> 태그로 추가함으로써 숫자나 알파벳의
정해진 순서대로 나열하는 형태를 갖음
![Page 34: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/34.jpg)
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><p><li> 야채<ol type=“A”><li>감자<li> 호박<li>오이</ol></ol></body></html
![Page 35: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/35.jpg)
35
![Page 36: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/36.jpg)
36
(2) 기호목록 기호목록은 <ul> 태그로 선언하고 <li> 태그로 추가함으로써 기호에
의해 목록을 구성하는 형태를 갖음
![Page 37: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/37.jpg)
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>
![Page 38: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/38.jpg)
38
![Page 39: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/39.jpg)
39
(3) 정의 목록 설명을 위한 것으로 <dl> 태그로 선언하고 , <dt> 태그로 정의
목록의 제목을 부여하며 , <dd> 태그로 목록을 추가함
![Page 40: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/40.jpg)
40
2. 텍스트 관련 태그<html><head><title> 정의 목록 </title></head><body><dl><dt> 과일<dd> 사과<dl><dd> 예산사과<dd> 상주사과<dd> 무경사과</dl><dd> 배<dl><dd> 나주배<dd>먹골배</dl><p><dt> 야채<dd>감자<dd> 호박<dd>오이</dl></body></html>
![Page 41: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/41.jpg)
41
![Page 42: 2 장 . 텍스트를 이용한 문서작성](https://reader036.fdocument.pub/reader036/viewer/2022081503/568130ed550346895d970eda/html5/thumbnails/42.jpg)
42
형성평가1. 줄 바꾸기 태그는 무엇인가 ?
2. 문단 바꾸기 태그는 무엇인가 ?
3. 입력 상태 표시 태그에 대해 말하시오 .
4. Font 태그에 대해 말하시오 .
5. 텍스트에 효과를 주는 태그에 대해 말하시오 .
6. 문단 정렬 태그에 대해 말하시오 .