'컴퓨터 활용' 카테고리의 글 목록 (2 Page)

« 2024/4 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

17. 폼(form) 만들기(1) (0)	2013.02.06
16. 인라인 프레임(iframe) 만들기 (0)	2013.02.05
14. 프레임(frame) 만들기(1) (0)	2013.02.05
13. 표 만들기(2) (0)	2013.02.04
12. 표 만들기(1) (0)	2013.02.04

14. 프레임(frame) 만들기(1)

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

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

○ frame(프레임) : 화면(windows)를 분할 하는 것

- 화면을 여러 개로 나누어서 나눠진 각각의 화면에 서로 다른 웹 문서를 출력할 수 있다.

- 홈페이지 관리가 용이하며 방문객 또한 홈페이지를 편하게 구경할 수 있다.

- 화면을 분할해서 한쪽에 고정적으로 메뉴를 만들어 둘 수 있다.

○ 기본 형식

<frame src="웹페이지 주소"> : frame의 정보지정

</frameset>

○ 기본 속성

속성	설 명
rows	화면을 위 아래로 나눌 때 사용하는 속성
cols	화면을 좌 우로 나눌 때 사용하는 속성
border	각 프레임을 구분하는 테두리를 조절 border를 '0'이 아닌 겂으로 지정하면 테두리 두께를 조절
bordercolor	프레임 구분 테두리의 색상을 지정
frameborder	프레임 구분선을 나타낼 땐 1(기본값) 그렇지 않을 땐 0

○ 사용방법

- 화면을 나누는 rows와 cols속성은 웹 브라우저에 표시되는 프레임의 크기와 개수를 지정할 수 있으며 프레임의 크기는 보통 픽셀(pixel)로 나타내는 절대크기와 창의 전체넓이에 대한 %로 나타내는 상대크기를 많이 사용

- 또한 프레임이 여러개인 경우 각각을 쉼표로 구별해 주면 됨.

예) <frameset rows="20%,50%,30%">이런 형식으로 작성하시면, 화면을 수평으로 3개로 나누며,100%를 기준으로 첫번째 창의 높이는 20% 중간은 50% 맨아래쪽의 창은 30%로 화면이 할당되어 나누어 진다.

- <frameset> 내에는 frame src태그를 포함시키는데, 이 frmae src는 화면에 들어갈 문서를 지정하는데 사용하며, 첫번째 자리에 있는 frame src가 첫번째 프레임 자리에 삽입되며, 두번째 자리에 있는 frmae src가 두번째 프레임 자리에 삽입

- frame태그는 <body>태그 안에 적으시며 안됨. 반드시 <body>태그를 지우고 사용

※ 프레임으르 나누는 방법 세가지

① 전체 창에 대한 %비율로 나누기

% 값을 사용하기 위해서는 1부터 100사이의 값을 사용하고 뒤에 %를 붙인다. 만약 전체 지정된 % 값이 100이상 또는 이하가 되면, 100이 되도록 균등하게 조정해 줌. 다음은 상대적인 크기를 이용하여 프레임의 크기를 지정한 예.

</FRAMESET>

이것은 창을 수직으로 두개로 나누어주는 것으로 왼쪽은 전체창의 10%, 오른쪽은 전체창의 90%를 차지하게 된다. 이런경우 만약 800 ×600 해상도인 경우 왼쪽창은 80픽셀, 오른쪽 창은 720픽셀로 배정이 되고 1024 ×768 해상도인 경우 왼쪽창은 102픽셀, 오른쪽 창은 922픽셀로 배정이 된다.

② 픽셀 수로 지정해서 나누기

우선 세 개의 틀을 픽셀의 개수로 지정한 예는 다음과 같다.

</FRAMESET>

이것은 창을 수평으로 세 개로 나눈 것으로 제일 위의 창은 높이가 100픽셀, 그 다음은 300픽셀, 마지막은 240픽셀로 나누어 지도록 지정한 것임.

③ "*" 를 이용한 상대적인 비율로 나누기

비율을 사용할 때에는 숫자가 있는 *와 없는 *를 사용할 수 있다. 이때에 관련된 값이 없는 *의 경우, 행이나 열 중에서 남는 부분을 모두 프레임에 할당하는 것으로 해석하면 된다. 또한 *앞에 숫자가 있는 경우는 프레임에 지정되는 상대적인 비율을 나타낸다. 예를 들어, 3*는 상대적인 값을 갖는 다른 프레임에 비하여 3배의 크기를 지정하게 된다. 예를 살펴보면,

</FRAMESET>

이 같은 경우 두 개의 수평프레임으로 나누는데 위의 프레임과 아래의 프레임의 비율이 1:3이 되도록 할당하게 되는 것.

</FRAMESET>

만약 위와 같이 지정하는 경우는 위의 프레임의 높이는 100픽셀로 하고 아래 프레임은 100을 뺀 나머지 전부를 할당하게 된다.

2.<frameset>태그에 삽입되는 속성

속성	설 명
src	프레임 안에 어떤 파일을 표시할지 지정합니다.
noresize	프레임 경계를 마우스로 조절을 못하게 함
scrolling="auto/yes/no"	스크롤바를 생기게 할지 정하는 속성 (auto:자동 yes:항상 보임 no:항상 안보임)

저작자표시 동일조건

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

16. 인라인 프레임(iframe) 만들기 (0)	2013.02.05
15. 프레임(frame) 만들기(2) (0)	2013.02.05
13. 표 만들기(2) (0)	2013.02.04
12. 표 만들기(1) (0)	2013.02.04
11. 사운드 태그 (0)	2013.02.03

:

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
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>	표를 만들 때 시작과 끝을 알림 (표 만들 때 맨처음과 끝에 들어감)
<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
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>

○ 사용형식

○ 특징

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

- IE 전용 태그

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

3.사운드태그<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
10. 하이퍼링크(Link) 태그 (0)	2013.02.02
9. 이미지(Img) 태그 (0)	2013.02.01
8. 목록(List) 태그 (0)	2013.02.01

:

10. 하이퍼링크(Link) 태그

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

1. 링크태그의 기본형식

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

○ 링크 태그의 기본형식

○ 링크 태그 속성

속 성	설 명
_blank	새 창을 열고 거기에 링크 내용을 표시
_self	현재 창에 일크 내용을 표시(기본값)
_parent	이전 화면으로 돌아가 하이퍼링크 된 문서를 표시
_top	하이퍼링크된 문서를 웹 브라우저 전체화면 모드로 표시

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

○ 기본형식

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

○ 기본형식

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

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

○ 책갈피 기능이란?

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

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

○ 기본 형식

저작자표시 동일조건

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

12. 표 만들기(1) (0)	2013.02.04
11. 사운드 태그 (0)	2013.02.03
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>

○ 이미지 태그의 기본형식

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

○ 이미지 태그의 속성들

속성	기능
width="수치"	넣은 수치만큼 이미지의 가로 너비를 조정해 주는 속성
height="수치"	넣은 수치만큼 이미지의 세로 높이를 조정해 주는 속성
hspace="수치"	이미지의 가로 간격(공간)을 주는 속성 여기서 간격이란 하나의 이미지와 글자사이의 공간 너비를 말합니다.
vspace="수치"	이미지의 세로 간격(공간)을 주는 속성
border="수치"	이미지의 테두리 두께를 나타내 줍니다. border="0"일 경우에는 테두리가 나타나지 않고 투명하게 나타납니다. 테두리의 두께는 1부터 나타납니다.
alt	이미지 파일 대신에 표시할 설명 문구를 만들어 주는 속성
align	이미지 정렬방식을 지정해 주는 속성

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

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

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

○ 배경색상 넣는 방법

※ 참고사항

□ 절대경로와 상대경로

절대경로 지정 : 해당하는 파일이나 그림이 있는 폴더를 정확하게 지정하여 링크할 때 사용

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

저작자표시 동일조건

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

11. 사운드 태그 (0)	2013.02.03
10. 하이퍼링크(Link) 태그 (0)	2013.02.02
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
7. <marquee> 태그 (1)	2013.01.31
6. <font>태그 (0)	2013.01.30
5. 글자(Text) 태그 (0)	2013.01.30

:

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(무한반복)

○ 속성 예시와 결과

- 예시문

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

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

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

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

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

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

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

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

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

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

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

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

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

<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
6. <font>태그 (0)	2013.01.30
5. 글자(Text) 태그 (0)	2013.01.30
4. 선그리기와 제목 태그 (0)	2013.01.29

:

6. 태그

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

1.태그의 기본형식

 텍스트 

2.태그의 색상변경 

 텍스트 

● 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.태그의 크기변경 

○ 기본 형식

 텍스트 

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

 텍스트 

○ 원하는 크기로 변경

텍스트 

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

<basefont size="5"> 텍스트 

4.태그의 글꼴변경 

○ 상대적 크기

 텍스트 

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

(예시)

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

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

(결과)

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

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

저작자표시 동일조건

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

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

:

target속성	설 명
target="_blank"	현재 웹 브라우저 화면은 그대로 두고, 새로운 웹 브라우저를 띄워 하이퍼링크 된 문서를 보여 줌
target="_self"	하이퍼링크된 문서를 현재의 frame에 보여 줌(지정하지 않으면 기본값)
target="_parent"	현재의 문서를 가져오도록 한 이전 화면으로 돌아가 하이퍼링크된 문서를 보여 줌
target="_top"	frame를 무시하고 하이퍼링크된 문서를 웹 브라우저 화면 전체에 보여 줌
target="frame이름"	frame태그의 name에서 지정한 이름이 같은 frame에 보여짐

학습(공부)하는 블로그

Tags»

Archive»

My Link»

Category»

Notice»

Recent Post»

Recent Comment»

Recent Trackback»

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

15. 프레임(frame) 만들기(2)

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

14. 프레임(frame) 만들기(1)

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

13. 표 만들기(2)

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

12. 표 만들기(1)

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

11. 사운드 태그

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

10. 하이퍼링크(Link) 태그

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

9. 이미지(Img) 태그

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

8. 목록(List) 태그

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

7. <marquee> 태그

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

6. <font>태그

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

티스토리툴바