Notice»

Statistics Graph

 

'컴퓨터 활용'에 해당되는 글 37

  1. 2013.02.04 13. 표 만들기(2)
  2. 2013.02.04 12. 표 만들기(1)
  3. 2013.02.03 11. 사운드 태그
  4. 2013.02.02 10. 하이퍼링크(Link) 태그
  5. 2013.02.01 9. 이미지(Img) 태그
  6. 2013.02.01 8. 목록(List) 태그
  7. 2013.01.31 7. <marquee> 태그 (1)
  8. 2013.01.30 6. <font>태그
  9. 2013.01.30 5. 글자(Text) 태그
  10. 2013.01.29 4. 선그리기와 제목 태그
 

13. 표 만들기(2)

컴퓨터 활용/홈페이지 과정 | 2013. 2. 4. 11:11 | Posted by 깨비형

1. colspan속성, rowspan속성


○ 셀 합치기 속성 : colspan속성과 rowspan속성

colspan="가로셀 수" 셀의 수만큼 가로셀들을 하나로 병합

rowspan="세로셀 수"  : 셀의 수만큼 세로셀들을 하나로 병합


○ 기본 형식

- 칸 합치기

<td colspan="합칠 칸 수"> ... </td>
<th colspan="합칠 칸 수"> ... </th>


- 줄 합치기

<td rowspan="합칠 칸 수"> ... </td>
<th rowspan="합칠 칸 수"> ... </th>

 

○ 주의사항 : 반드시 <td>태그나 <th>태그 안에 속성으로 사용해야 한다.


   

2. 표의 외곽선 그리기 속성<frame>


○ <frame> 속성 : 표의 외곽선의 어느 부분을 보여 줄 것인지를 결정

종류

 지정값

설      명

 border  외부 테두리 전부 보임 (기본 값)
 void  외부 테두리 전부가 보이지 않음
 above  표의 위쪽 테두리만 보임
 below  표의 아래쪽 테두리만 보임
 rhs  표의 오른쪽 테두리만 보임
 lhs  표의 왼쪽 테두리만 보임
 hsides  표의 위쪽과 아래쪽 테두리만 보임
 vsides  표의 왼쪽과 오른쪽 테두리만 보임



3. 표의 내부 테두리 속성<rules>


 지정값

설      명 

 all  모든 괘선을 표시
 none  괘선을 표시 안함
 groups  그룹(THEAD,TBODY,COLGROUP)간의 경계선만 표시
 rows  가로열의 괘선만 표시
 cols  세로행의 괘선만 표시




4. <nowrap>태그


○ <nowrap>태그=>셀안의 글자의 줄 바꿈을 금지함





'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

15. 프레임(frame) 만들기(2)  (0) 2013.02.05
14. 프레임(frame) 만들기(1)  (0) 2013.02.05
13. 표 만들기(2)  (0) 2013.02.04
12. 표 만들기(1)  (0) 2013.02.04
11. 사운드 태그  (0) 2013.02.03
10. 하이퍼링크(Link) 태그  (0) 2013.02.02

댓글을 달아 주세요

12. 표 만들기(1)

컴퓨터 활용/홈페이지 과정 | 2013. 2. 4. 08:05 | Posted by 깨비형

1.표 만들기 태그의 기본형식


○ 표 만들기 태그의 기본형식


 <table>...</table>


○ <table>태그 외 기본태그들


기본 태그

설    명 

<table>...</table>

 표를 만들 때 시작과 끝을 알림

 (표 만들 때 맨처음과 끝에 들어감)

<tr>...</tr>

 한 행(가로줄)을 만들어 줌(table row)

<th>...</th>

 셀(칸)제목을 표시함(글자를 굵게 표시, 가운데 정렬)(table header cell)

<td>...</td>

 데이터가 들어갈 셀(칸)을 나타냄(세로줄을 만듬)(table data cell)



2.<table>태그의 속성들


○ <table>태그의 부가적인 속성들


속    성 

설    명 

border="수치" 

 표의 테두리 두께를 조정

 (수치가 클수록 테두리가 두꺼워짐)

 width="수치 or %"

 표의 가로너비를 지정된 수치만큼 정함

 pixel이나 %로 설정할 수 있지만 보통은 %를 주로 사용

 height="수치 or %"

 표의 세로너비를 지정된 수치만큼 정함

 cellspacing="수치"

 셀의 선과 선사이의 여백을 조정(셀 사이의 여백 조정)
 기본:2pixel

 cellpadding="수치"

 셀의 선과 글자사이의 간격을 조정(셀 안의 간격)
 기본:2pixel

 bgcolor="색상명/RGB"

 표 안의 배경색상을 지정

 background="이미지파일"

 표 안의 이미지(그림)삽입


○ 테두리 색상 변경 : <bordercolor="바꾸고 싶은 색상명/RGB코드">


○ 표의 제목 태그

- 형식 : <caption>...</caption>

- 부가속성 : 정렬

· align : left, center. right(기본값은 left)

· valign : top, middle, bottom(기본값은 middle)





'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

14. 프레임(frame) 만들기(1)  (0) 2013.02.05
13. 표 만들기(2)  (0) 2013.02.04
12. 표 만들기(1)  (0) 2013.02.04
11. 사운드 태그  (0) 2013.02.03
10. 하이퍼링크(Link) 태그  (0) 2013.02.02
9. 이미지(Img) 태그  (0) 2013.02.01

댓글을 달아 주세요

11. 사운드 태그

컴퓨터 활용/홈페이지 과정 | 2013. 2. 3. 20:47 | Posted by 깨비형

1.사운드태그 형식의 종류


○ 사운드(sound)태그 : 음악이나 소리가 나오게 하는 태그


○ 사운드 파일의 종류

 mid((msical Instrument digital) : 웹 상에서 배경음악으로 가장 널리 사용되는 파일 포맷. 적은 용량이기 때문에 방문자에게 큰 무리를 주지 않으며, 사용자의 사운드 카드의 성능에 따라 음질이 많이 좌우  된다.

ra(real audio),ram : 인터넷에서 자주 사용되고 있는 파일로 리얼 플레이어에서만 재생. 압축률이 아주 뛰어나 온라인을 통한 실시간 재생이 가능한 파일 포맷. 한때 인터넷 라디오 방송국에서 가장 많이 이용한 포맷임

wav(wave) : 윈도우를 대표하는 파일형식을 IBM과 MS가 윈도우에서 사용하기 위해 개발해 낸 압축 포맷. 웹 상에서 사용이 가능하나 다른 파일보다 용량이 크기 때문에 잘 사용안함

mp3(MPEG-1 Audio Layer 3) : 보통 CD에 있는 음악 파일의 크기는 30~50 MB 정도이지만, MP3 기술을 이용하면 음질을 거의 같은 수준으로 유지하면서도 데이터 용량을 원래의 약 12분의 1 이하로 줄일 수 있습니다. 이렇게 줄인 파일의 크기는 불과 한곡에 2~5 MB에 불과해 네트웍을 통해 고품질 음악을 쉽게 주고받을 수 있으며 네티즌에게 가장 인기가 좋음

au Sun Micro system사에서 만든 사운드 형식으로, 몇 가지 코딩방법을 제시하고 있지만 주로 사용하는 것이 8비트 ㎕aw방식입니다. 음질은 전화로 통화하는 정도의 수준

aiff : 매킨토시에서 주로 사용되는 형식으로 음질은 고감도이지만 매킨토시 이외의 시스템에서는 열어 볼 수 없다는 단점이 있다.



2.사운드태그<bgsound src>


○ 사용형식

 <bgsound src="음악파일">


○ 특징

- 음악파일을 전부 다운로드 한 후에 재생을 시작하기 때문에 용량이 작은 mid 파일을 주로 사용

- IE 전용 태그

- 배경음악을 한 번만 재생하고 멈춤.(반복하고 싶으면 loop 속성을 이용해야 함)

 <bgsound src="음악파일" loop="infinite 또는 -1">



3.사운드태그<embed src>


○ 사용형식

<embed src="음악파일">


○ <embed>태그의 속성

속성

 설      명

 src

 삽입할 배경 음악 파일

 autostart

 값이 true의 경우 음악을 자동으로 실행시키고 false라고 하면 재생단추를 클릭 했을 때 재생

 width/height

 웹 문서에 표시되는 플레이어 프로그램의 크기 지정

 loop

 배경 음악의 반복 유무 -  true(무한반복), false(1번 재생), 숫자(반복 횟수)

 hidden

 플레이어를 화면에서 감출 것인지 지정 - true(감춤), false(표시)


○ 특징

- 원래는 네스케이프 전용이었지만 지금은 IE에서도 실행 가능

- 다운로드와 동시에 실시간 재생이 가능




'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

13. 표 만들기(2)  (0) 2013.02.04
12. 표 만들기(1)  (0) 2013.02.04
11. 사운드 태그  (0) 2013.02.03
10. 하이퍼링크(Link) 태그  (0) 2013.02.02
9. 이미지(Img) 태그  (0) 2013.02.01
8. 목록(List) 태그  (0) 2013.02.01

댓글을 달아 주세요

1. 링크태그의 기본형식


○ 하이퍼링크란 : 인터넷 서핑을 하다보면 글자나 그림을 클릭하면 다른 웹페이지나 큰 그림으로 이동하는 것을 볼 수 있다. 이 부분이 바로 하이퍼링크를 해 놓은 부분이다. 보통 문자열에 하이퍼링크가 설정되면 파란색으로 나타나며 밑줄이 그어지게 된다. 반면 그림에 하이퍼링크가 설정되면 그림주위에 파란색의 경계선이 나타난다.


○ 링크 태그의 기본형식

 <a href="연결할 문서나 홈페이지 경로">텍스트</a>


○ 링크 태그 속성


 속  성

설     명 

 _blank 

 새 창을 열고 거기에 링크 내용을 표시

 _self

 현재 창에 일크 내용을 표시(기본값) 

 _parent

 이전 화면으로 돌아가 하이퍼링크 된 문서를 표시

 _top

 하이퍼링크된 문서를 웹 브라우저 전체화면 모드로 표시



2. 메일에 하이퍼링크 설정하기


○ 기본형식

 <a href="mailto:이메일주소">...</a>



3. 글자나 이미지 클릭 시 다운로드 받기


○ 기본형식

<a href="cokefire.exe">화면보호기</a>



4. 웹 페이지 내부로 하이퍼링크 설정하기(책갈피 기능)


○ 책갈피 기능이란?

- 하나의 html 문서가 내용이 너무 길어 한 화면에 모두 표시하지 못할 경우 문서의 특정위치에 이름을 붙여 두고, 그 곳으로 하이퍼링크시켜 이동시킬 수 있도록 하는 기능

- 특정 내용이 있는 곳으로 빨리 이동할 수 있다.


○ 기본 형식

 <A name="name에 적용할 이름"(앵커)> 텍스트 또는 이미지 </A>

 <A hfef="#name에 적용할 이름"> 텍스트 또는 이미지 </A> 





'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

12. 표 만들기(1)  (0) 2013.02.04
11. 사운드 태그  (0) 2013.02.03
10. 하이퍼링크(Link) 태그  (0) 2013.02.02
9. 이미지(Img) 태그  (0) 2013.02.01
8. 목록(List) 태그  (0) 2013.02.01
7. <marquee> 태그  (1) 2013.01.31

댓글을 달아 주세요

9. 이미지(Img) 태그

컴퓨터 활용/홈페이지 과정 | 2013. 2. 1. 23:08 | Posted by 깨비형

1. 그림파일 형식의 종류


○ JPG(Joint Photographic Group) : 웹에서 표준으로 사용되는 그래픽 파일의 확장자이다. JPEG 압축 방식을 이용하여 저장된 그래픽 파일에 사용한다.

○ GIF(Graphic Interchange Format) : GIF는 JPEG과 함께 월드와이드웹에서 지원되는 두 가지 그래픽 파일 형식 중의 하나이다. 웹이나 기타 인터넷의 다른 서비스(예를 들면 게시판 서비스 등)에서 GIF는 이미지 형식에 있어, 사실상의 표준이 되어가고 있다.

○ BMP(bitmap) : BMP는 본래 마이크로소프트가 윈도우 사용자들을 위해 개발한 고유의 그래픽 파일 형식이다.윈도우가 기동하거나 종료될 때 보여지는 이미지들이나 바탕화면을 꾸며 주는 배경그림 등은 모두 BMP 파일 형식이다. BMP는 그림 데이터를 비효율적으로 저장함으로써, 필요 이상으로 파일크기가 커지는 경향이 있다.

 PNG (Portable Network Graphics) : 압축된 그래픽 이미지 파일 형식으로서,GIF와 같이, PNG 파일도 품질 손실 없는 방법으로 압축된다.(이것은 압축을 해제하면, 모든 이미지 정보가 복원된다는 뜻이다). PNG 파일은, 이미지가 압축될 때 파일 크기와 이미지 품질간의 선택을 해야만 하는 JPEG 형식을 대체하기 위한 목적으로 탄생된 것이 아니며, 일반적으로, PNG 파일 내의 이미지는 GIF 형식보다는 10 ~ 30% 더 많이 압축될 수 있다. 

 WMF (Windows Metafile) : WMF 파일은 그래픽 이미지의 표현으로 귀착하는 일련의 GDI (graphical-device-interface) 함수 호출을 담고 있다. 운영체계나 애플리케이션의 여러 컴포넌트에 의해 반복적으로 사용되는 많은 비트맵들이 있을 때 WMF 파일을 사용하면, 이미 만들어진 비트맵 보다 저장공간이 절약된다. WMF 파일은 16비트 운영체계용이며, 마이크로소프트는 32비트 운영체계를 위해, 보다 강화된 메타파일인 EMF (enhanced metafile) 형식을 가지고 있다. 마이크로소프트의 클립보드 파일은 WMF 파일과 EMF 파일, 또는 BMP 형식의 파일을 담고 있을 수 있다. 



2. 이미지태그의 기본형식<img src>


○ 이미지 태그의 기본형식

 <img src="그림파일 이름">

※ SRC속성은 SOURCE의 의미로 입력한 이미지 파일명에 해당하는 그림을 표시


○ 이미지 태그의 속성들

 속성 기능 
 width="수치"  넣은 수치만큼 이미지의 가로 너비를 조정해 주는 속성
 height="수치"  넣은 수치만큼 이미지의 세로 높이를 조정해 주는 속성
 hspace="수치"  이미지의 가로 간격(공간)을 주는 속성

 여기서 간격이란 하나의 이미지와 글자사이의 공간 너비를 말합니다.

 vspace="수치"  이미지의 세로 간격(공간)을 주는 속성
 border="수치"  이미지의 테두리 두께를 나타내 줍니다.
 border="0"일 경우에는 테두리가 나타나지 않고 투명하게 나타납니다.

 테두리의 두께는 1부터 나타납니다.

 alt  이미지 파일 대신에 표시할 설명 문구를 만들어 주는 속성
 align 이미지 정렬방식을 지정해 주는 속성



3. 배경에 이미지 지정하기 <background>


○ 배경 이미지로 삽입하는 기본형식

 <body background="이미지파일">



4. 배경색상 지정하기 <bgcolor>


○ 배경색상 넣는 방법

<body bgcolor="색상이름/RGB코드">



※ 참고사항


 □ 절대경로와 상대경로

  • 절대경로 지정 : 해당하는 파일이나 그림이 있는 폴더를 정확하게 지정하여 링크할 때 사용
  • 상대경로 지정 : 열린 문서가 있는 폴더를 기준으로 파일이나 그림이 있는 폴더를 경로를 지정하여 링크할 때 사용





'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

11. 사운드 태그  (0) 2013.02.03
10. 하이퍼링크(Link) 태그  (0) 2013.02.02
9. 이미지(Img) 태그  (0) 2013.02.01
8. 목록(List) 태그  (0) 2013.02.01
7. <marquee> 태그  (1) 2013.01.31
6. <font>태그  (0) 2013.01.30

댓글을 달아 주세요

8. 목록(List) 태그

컴퓨터 활용/홈페이지 과정 | 2013. 2. 1. 00:00 | Posted by 깨비형


<목록(List)태그의 종류>

  • 순서 있는 목록<OL>:Ordered list
  • 순서 없는 목록<UL>:unordered list
  • 용어 정의 목록<DL>:definition list 



1. 순서 있는 목록<OL>


○ 순서 있는 목록태그란?

숫자,영어 대·소문자 로마자 대·소문자 등으로 순서있게 나타내는 것

- 순서있는 목록을 만들 때는 목록 전체를 <OL>...</OL>로 둘러싸고,

목록을 하나하나 만들어 주는 속성인 <LI>:list item라는 태그 사용

- <LI>태그는 </LI>마감태그를 생략 할 수 있다.


○ 기본형식

 <OL>

 <LI>목록내용 1

 <LI>목록내용 2

 </OL> 



○ type 속성 : 기본은 숫자

 번호 형식

 표현되는 모양

 type=1

 1,2,3,4...

 type=a

 a,b,c,d...

 type=A

 A,B,C,D...

 type=i

 ⅰ,ⅱ,ⅲ,ⅳ...

 type=I(대문자 I)

 Ⅰ,Ⅱ,Ⅲ,Ⅳ...






○ 사용형식 예시

숫자

영어대문자

영어소문자 

로마자대문자 

로마자소문자 

 <OL type="1">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL>

 <OL type="A">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL> 
 <OL type="a">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL> 
 <OL type="I">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL> 
 <OL type="i">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL> 

결과

결과 

결과 

결과 

결과 

 1. 숫자목록

 2. 목록

 3. 목록

 A.숫자목록

 B. 목록

 C. 목록

 a. 숫자목록

 b. 목록

 c. 목록

 숫자목록

 Ⅱ. 목록

 Ⅲ. 목록

 숫자목록

 ⅱ. 목록

 ⅲ. 목록


○ stsrt 속성과 value 속성

stsrt 속성 : <OL>태그 시작할 때 사용, 1이 아닌 다른 숫자부터 시작할 수 있다.

value 속성 : <LI> 태그와 같이 사용, 리스트 중간에 시작 숫자를 재지정할 때 사용



2. 순서 없는 목록<UL>


○ 순서 없는 목록태그란?

- 목록 앞에 붙은 형식이 불릿 형식으로 나옴

- 순서있는 목록을 만들 때는 목록 전체를 <OL>...</OL>로 둘러싸고,

목록을 하나하나 만들어 주는 속성인 <LI>:list item라는 태그 사용

- <LI>태그는 </LI>마감태그를 생략 할 수 있다.


○ 기본형식

 <UL>

 <LI>목록내용 1

 <LI>목록내용 2

 </UL> 



○ type 속성 : 기본은 disc(●)

 번호 형식

 표현되는 모양

 type=disc

           ● 속이 검게 채워진 원형

 type=circle

           ○ 속이 빈 원형

 type=square

           ■ 속이 검게 채워진 사각형





3. 용어 정의 목록<DL>


○ 용어 정의 목록 태그란?

용어 정의 목록을 만들 때 사용하는 태그

- 모두 세 가지 태그가 사용된다. 

· 우선,<DL>태그는 정의 목록의 시작을 표시하고 

· <DT>태그는 목록에 들어 있는 각 항목들의 시작을 표시

· <DD>태그는 각 항목에 대한 정의 부분의 시작을 표시


○ 기본 형식

 <DL>

 <DT>용어정의 목록이란?

 <DD>정의할 용어와 용어에 대한 설명문을 붙인 형식의 목록입니다.

 </DL>



○ type 속성 : 기본은 disc(●)

 번호 형식

 표현되는 모양

 type=disc

           ● 속이 검게 채워진 원형

 type=circle

           ○ 속이 빈 원형

 type=square

           ■ 속이 검게 채워진 사각형






'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

10. 하이퍼링크(Link) 태그  (0) 2013.02.02
9. 이미지(Img) 태그  (0) 2013.02.01
8. 목록(List) 태그  (0) 2013.02.01
7. <marquee> 태그  (1) 2013.01.31
6. <font>태그  (0) 2013.01.30
5. 글자(Text) 태그  (0) 2013.01.30
TAG <DD>, <DL>, <DT>, <LI>, <OL>, Type

댓글을 달아 주세요

7. <marquee> 태그

컴퓨터 활용/홈페이지 과정 | 2013. 1. 31. 14:30 | Posted by 깨비형

1.<marquee>태그의 기본형식


○ 기본형식

 <marquee>내용</marquee>


○ 설명 및 특징

- <marquee>태그는 브라우저가 익스플로러에서만 움직임이 보여지는 익스플로러 전용태그

기본형식으로만 작성하시고 웹브라우저를 실행시키시면 <marquee>태그 안의 글자가 오른쪽에서 왼쪽으로 흘러가는 형태로 움직인다. 

내용에 글자, 이미지등이 들어갈 수도 있으며 링크도 걸 수도 있다.

- 잘만 이용하면 멋진 홈페이지를 만들 수 있지만 너무  과도하게 사용하거나 남용하면 홈페이지가 지저분해질 수도 있기 때문에 유의해야 한다.


2.<marquee>태그의 여러 가지 속성


○ <marquee>태그의 속성


 속    성

설      명 

 behavior

 스크롤 형태 지정
 사용할 수 있는 값은 scroll, slide, alternate

 direction

 스크롤 방향 지정. 사용할 수 있는 값은 left, right, up, down

 scrolldelay

 스크롤 지연속도 지정. 1/1000초 단위로 지정

 scrollamount

 한 번에 스크롤 되는(이동하는) 픽셀 수 지정

 bgcolor

 스크롤 영역의 배경색 지정

 height

 스크롤 영역의 높이 조절

 width

 스크롤 영역의 폭 조절

 loop

 스크롤 반복 횟수 지정. 사용할 수 있는 값은 숫자 또는 infinite(무한반복)


○ 속성 예시와 결과


-  예시문


☞스크롤 형태 속성 예시입니다.<p>

<marquee behavior="scroll">오른쪽에서 왼쪽으로 반복됩니다.</marquee> 

<marquee behavior="slide">오른쪽에서 왼쪽으로 한번만 흐르고 정지합니다.</marquee>

<marquee behavior="alternate">오른쪽에서 왼쪽으로 다시 오른쪽으로 반복합니다.</marquee>

☞스크롤 지연속도 예시입니다.<p>

<marquee scrolldelay="100">딜레이 수치가 100입니다.</marquee>

<marquee scrolldelay="300">딜레이 수치가 300입니다.</marquee>

<marquee scrolldelay="500">딜레이 수치가 500입니다.</marquee>

☞스크롤 스크롤 양 예시입니다.<p>

<marquee scrollamount="10">스크롤 양이 10입니다.</marquee>

<marquee scrollamount="30">스크롤 양이 30입니다.</marquee>

<marquee scrollamount="50">스크롤 양이 50입니다.</marquee>

☞스크롤 반복 횟수 예시입니다.<p>

<marquee loop="3">스크롤을 3번만 하고 멈춥니다.</marquee>

<marquee loop="infinite">스크롤을 무한반복합니다.</marquee>

☞스크롤 방향 속성 예시입니다.<p>

<marquee direction="left">왼쪽으로 스크롤 됩니다.</marquee>

<marquee direction="right">오른쪽으로 스크롤 됩니다.</marquee>

☞스크롤 폭과 높이 속성 예시입니다.<p>

<marquee width="80" height="3">스크롤 폭이 80픽셀이고 높이가 3픽셀입니다.</marquee>

☞스크롤 배경색상 속성 예시입니다.<p>

<marquee bgcolor="green">배경색상이 초록색입니다.</marquee>



- 결과


 ☞스크롤 형태 속성 예시입니다.

오른쪽에서 왼쪽으로 반복됩니다.

오른쪽에서 왼쪽으로 한번만 흐르고 정지합니다.

오른쪽에서 왼쪽으로 다시 오른쪽으로 반복합니다.

☞스크롤 지연속도 예시입니다.

딜레이 수치가 100입니다.

딜레이 수치가 300입니다.

딜레이 수치가 500입니다.

☞스크롤 스크롤 양 예시입니다.

스크롤 양이 10입니다.

스크롤 양이 30입니다.

스크롤 양이 50입니다.

☞스크롤 반복 횟수 예시입니다.

스크롤을 3번만 하고 멈춥니다.

스크롤을 무한반복합니다.

☞스크롤 방향 속성 예시입니다.

왼쪽으로 스크롤 됩니다.

오른쪽으로 스크롤 됩니다.

☞스크롤 폭과 높이 속성 예시입니다.

스크롤 폭이 200픽셀이고 높이가 20픽셀입니다.

☞스크롤 배경색상 속성 예시입니다.

배경색상이 초록색입니다.





'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

9. 이미지(Img) 태그  (0) 2013.02.01
8. 목록(List) 태그  (0) 2013.02.01
7. <marquee> 태그  (1) 2013.01.31
6. <font>태그  (0) 2013.01.30
5. 글자(Text) 태그  (0) 2013.01.30
4. 선그리기와 제목 태그  (0) 2013.01.29

댓글을 달아 주세요

  1. kimsuch1999 2013.02.28 17:03  댓글주소  수정/삭제  댓글쓰기

    </marquee> 좋은 정보 감사!

6. <font>태그

컴퓨터 활용/홈페이지 과정 | 2013. 1. 30. 18:00 | Posted by 깨비형

1.<font>태그의 기본형식


 <Font 속성="속성 값"> 텍스트 </Font>



2.<font>태그의 색상변경 <font color>


 <Font color="색상(or RGB코드)"> 텍스트 </Font>


● RGB코드란?

  • RGB[알지비]는 컴퓨터 디스플레이에서 사용될 색상을 나타내는 시스템을 가리킨다. 
  • 시각적 스펙트럼 내에서 어떤 색상을 얻기 위해 적, 녹, 청이 다양한 비율로 섞여질 수 있다. R, G, B의 레벨은 각각 0 ~ 100% 까지 변화할 수 있다. 각 레벨은 10진수 0 ~ 255의 총 256가지 레벨 범위로 나타내어지는데, 이는 2진수로는 00000000 ~ 11111111까지, 그리고 16진수로는 00 ~ FF 까지와 같은 의미를 갖는다.
  • 따라서, 나타낼 수 있는 색상의 가짓수는 256 × 256 × 256의 계산 결과인 16,777,216 가지가 된다. 
  • HTML에서, 페이지의 배경색이나 텍스트 글꼴의 색상은 6 자리의 16진수 형식으로 표현된 RGB 값으로 정의된다. 
  • 첫 번째와 두 번째 자리는 빨간색 계열을, 세 번째와 네 번째 자리는 초록색 계열을, 그리고 다섯 번째와 여섯 번째 자리는 파란색 계열을 각각 나타낸다. 
  • 모든 가능한 값에 대한 색상을 실제로 표시하기 위해서는, 컴퓨터 디스플레이 시스템이 각 픽셀 당 색상을 표현하기 위해 24 비트를 가지고 있어야 한다. 
  • 색상을 표현하기 위해 이보다 적은 수의 비트를 가지고 있는 디스플레이 시스템에서는 정의된 색상과 유사한 색이 표시될 것이다. 


3.<font>태그의 크기변경 <font size>

○ 기본 형식

 <Font size="1~7까지의 수"> 텍스트 </Font>


○ 상대적 크기(기본크기는 3이며, ± 계산 결과가 1~7 사이의 정수가 나와야 함)

 <Font size=+4~-2> 텍스트 </Font>


○ 원하는 크기로 변경

 <font style=font-size:원하는크기pt> 텍스트 </Font>


○ <body>~</body> 사이에 특정한 크기로 입력하는 방법

 <basefont size="5"> 텍스트 </Font>



4.<font>태그의 글꼴변경 <font face>


○ 상대적 크기

 <Font face="원하는 글꼴"> 텍스트 </Font>



※ 글자태그의 속성은 혼합 사용가능


 (예시)

<font color="blue or (#0000FF)" size="3" face="궁서체">

배운다는 것은 당신이 이미 아는 것을 찾아내는 것이다.<p>

새로운 사상은 나를 새롭게 만든다.</font>


 (결과)

배운다는 것은 당신이 이미 아는 것을 찾아내는 것이다.

새로운 사상은 나를 새롭게 만든다.






'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

8. 목록(List) 태그  (0) 2013.02.01
7. <marquee> 태그  (1) 2013.01.31
6. <font>태그  (0) 2013.01.30
5. 글자(Text) 태그  (0) 2013.01.30
4. 선그리기와 제목 태그  (0) 2013.01.29
3. 문단 태그  (0) 2013.01.28

댓글을 달아 주세요

5. 글자(Text) 태그

컴퓨터 활용/홈페이지 과정 | 2013. 1. 30. 12:07 | Posted by 깨비형

□ 논리적 스타일(Logical style) 글자태그


○ 논리적 스타일이란?

- 문장이 갖는 의미에 따라 표현 방법을 바꾸는 논리 형태의 설정 태그

- 종류에 따라 약간의 변화는 있지만 크게 차이나지는 않음


○ 논리적 스타일의 종류

태 그 명

설                   명

 <au>...</au>  홈페이지를 작성한 사람의 이름을 나타낼 때 주로 사용 (author의 약자)
 <cite>...</cite>  특정문헌의 인용문을 사용할 경우 사용 (citation의 약자)
 <code>...</code>  컴퓨터 코드 부분을 지정할 경우 사용
 <dfn>...</dfn>  용어에 대한 정의를 할 때 사용 (define의 약자)
 <samp>...</samp>  컴퓨터 상태를 표시하는 메시지로 표시 (sample output의 약자)
 <var>...</var>  변수나 프로그램 인자를 정의할 경우 사용 (variable의 약자)


○ 예제

 <html>

<head>

<title>논리적 스타일 글자 태그</title>

</head>

<body>

<au>au:홈페이지를 작성한 사람의 이름을 나타낼 때 사용</au><p>

<cite>cite:특정문헌의 인용문을 사용할 경우 사용</cite><p>

<code>code:컴퓨터 코드 부분을 지정할 경우 사용</code><p>

<dfn>dfn:용어에 대한 정의를 할 때 사용</dfn><p>

<samp>samp: 컴퓨터 상태를 표시하는 메시지로 표시</samp><p>

<var>var:변수나 프로그램 인자를 정의할 경우 사용</var>

</body>

 </html>



○ 결과




물리적 스타일(Physical style) 글자 태그


○ 물리적 스타일이란?

작성자가 글자에 특정한 효과를 부여하여 의도한 대로 브라우저에 표시되는 태그

- 주로 사용하는 태그는 <b>, <i>, <u> 정도이다.


○ 물리적 스타일의 종류

태 그 명

 설                            명

 <b>...</b>  글자를 진하게 표시
 <big>...</big>  글자의 크기를 크게 표시
 <blink>...</blink> 글자를 강조하기 위해 깜박거림 (netscape 전용태그)
 <em>...</em> 글자를 강조하며 기울임꼴로 표시(emphasis의 약자)
 <i>...</i> 글자의 모양을 기울여서 표시(italic의 약자)
 <kbd>...</kbd>  키보드로 입력 받은 것과 같은 효과를 줄 때 사용(text to be input)
 <small>...</small>  <big>과 반대로 글자의 크기를 작게 표현할 때 사용
 <strong>...</strong>  더 강한 강조를 할 때 사용하며 볼드체 효과로 표시
 <sub>...</sub>  아래첨자입니다 (subscript의 약자)
 <sup>...</sup>  윗첨자입니다 (superscript의 약자)
 <tt>...</tt>  글자체중 타자기체로 나타낼 때 사용(teletype의 약자)
 <u>...</u>  문자열에 밑줄을 그을 때 사용(underline의 약자)
 <s>...</s> 취소선을 그을 때 사용(strike의 약자)

○ 예제

 <html>

<head>

<title>물리적 스타일 태그</title> 

</head>

<body>

<b>b:글자를 진하게 표시</b><p>

<big>big:글자의 크기를 크게 표시</big><p> 

<blink>blink:글자를 강조하기 위해 깜빡거림 (netscape 전용태그)</blink><p> 

<em>em:글자를 강조하며 기울임꼴로 표시</em><p>

<i>i:글자의 모양을 기울여서 표시</i><p> 

<kbd>kbd:키보드로 입력받은 것과 같은 효과를 줄 때 사용</kbd><p>

<small>small: big과 반대로 글자의 크기를 작게 표현 할 때 사용</small><p>


<strong>strong:더 강한 강조를 할 때 사용하며 볼드체 효과로 표시</strong><p> 

<sub>sub:아래첨자</sub>입니다<p> 

<sup>sup:윗첨자</sup>입니다<p> 

<tt>tt:글자체중 타자기체로 나타낼 때 사용</tt> <p> 

<u>u:문자열에 밑줄을 그을 때 사용</u><p> 

<s>s:취소선을 그을 때 사용</s> 

</body>

 </html>


○ 결과보기





'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

7. <marquee> 태그  (1) 2013.01.31
6. <font>태그  (0) 2013.01.30
5. 글자(Text) 태그  (0) 2013.01.30
4. 선그리기와 제목 태그  (0) 2013.01.29
3. 문단 태그  (0) 2013.01.28
2. HTML 태그 맛보기  (0) 2013.01.28

댓글을 달아 주세요

4. 선그리기와 제목 태그

컴퓨터 활용/홈페이지 과정 | 2013. 1. 29. 17:12 | Posted by 깨비형

1.<hr>태그 : Horizontal Rule

○ 형식 : <hr width="선 길이" size="높이(두께)수치" align="정렬위치" noshade>

○ 설명

- 줄과 줄 사이에 선을 그려 넣을 때 사용하는 태그

- 시각적으로 웹 페이지의 구역을 나누어 주는 선

텍스트의 구역을 구분

○ 속성

- size= (픽셀) => 선의높이(두께)를 지정 

- width=(픽셀 또는 %) => 선의 가로길이를 지정

- align=left, right, center =>가로줄의 정렬 방법을 결정 

- noshade =>입체적인 모양 대신 단순히 선으로 나타낼 때 사용(음영의 효과가 없어짐.)



2.<hn>태그 : Heading

○ 형식 : <hn… </hn>

○ 설명

- 제목 태그

- 웹 페이지의 정보를 구조적으로 보여 줌

○ 특징

- <hn>에서 'n'은 1에서 6까지 숫자를 말함(예, <h1>~ <h6> … </h1>~</h6>

- h는 Heading의 약자로 주로 문장의 타이틀 제목으로 사용

- <hn> 태그가 적용된 글자는 두꺼운 글자로 표현

- 글자크기는 h1>h2>h3>h4>h5>h6 순임

- 자동 줄바꿈이 일어나므로 <br> 태그가 불필요

○ 사용

- <h1>,<h2>,<h3> 태그 :  웹페이지의 각 영역의 제목으로 자주 사용

- <h5>,<h6>태그 : 거부권이나 저작권과 같은 정보를 표현할 때 사용

- <h4>태그 : 보통 웹 페이지 본문 텍스트와 같은 크기인 경우가 많다.

· 브라우저에서 보통 제목행을 굵은 글씨체로 표현하고 위쪽과 아래쪽에 빈줄을 한 줄씩 삽입함.

· 기본적으로 왼쪽 정렬 되어 있으며 마감태그를 적어주어야 함.

· align속성을 사용하면 정렬방식을 바꿀 수도 있음.

○ 속성

align=left, right, center =>정렬 방법을 결정

※ 정렬할 때 justice 로 지정하면 왼쪽정렬이지만 오른쪽 끝 부분이 매끄럽게 유지된다.

     ※ 속성은 보통 겹따옴표("")로 붙이지만 요즘은 생략해도 된다.




'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

6. <font>태그  (0) 2013.01.30
5. 글자(Text) 태그  (0) 2013.01.30
4. 선그리기와 제목 태그  (0) 2013.01.29
3. 문단 태그  (0) 2013.01.28
2. HTML 태그 맛보기  (0) 2013.01.28
1. HTML의 개요  (0) 2013.01.07

댓글을 달아 주세요