학습(공부)하는 블로그 :: '컴퓨터 활용/홈페이지 과정' 카테고리의 글 목록 (2 Page)
 

 

Notice»

Recent Post»

Recent Comment»

Recent Trackback»

03-29 08:50

 

'컴퓨터 활용/홈페이지 과정'에 해당되는 글 20

  1. 2013.02.02 10. 하이퍼링크(Link) 태그
  2. 2013.02.01 9. 이미지(Img) 태그
  3. 2013.02.01 8. 목록(List) 태그
  4. 2013.01.31 7. <marquee> 태그 1
  5. 2013.01.30 6. <font>태그
  6. 2013.01.30 5. 글자(Text) 태그
  7. 2013.01.29 4. 선그리기와 제목 태그
  8. 2013.01.28 3. 문단 태그
  9. 2013.01.28 2. HTML 태그 맛보기
  10. 2013.01.07 1. HTML의 개요
 
반응형

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


○ 속성 예시와 결과


-  예시문


☞스크롤 형태 속성 예시입니다.<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
6. <font>태그  (0) 2013.01.30
5. 글자(Text) 태그  (0) 2013.01.30
4. 선그리기와 제목 태그  (0) 2013.01.29
:

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
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
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
3. 문단 태그  (0) 2013.01.28
2. HTML 태그 맛보기  (0) 2013.01.28
1. HTML의 개요  (0) 2013.01.07
:

3. 문단 태그

컴퓨터 활용/홈페이지 과정 | 2013. 1. 28. 21:23 | Posted by 깨비형
반응형

1.<p>태그 : paragraph

○ 형식 : <p>, <p> … </p>

○ 설명

- 문단을 나눌 때 사용하는 태그

- 정렬 방식은 left(justify), center, right가 있으며, 기본값은 left를 적용한다.

<p>태그는 연속적으로 사용했을 때 아무리 많이 적어도 한 번만 인정됨



2.<br>태그 : Line Break

○ 형식 : <br>

○ 설명 : 강제로 줄바꿈하는 태그, 마감태그</br>은 없음



3.<pre>태그 : Preformatted text

○ 형식 : <pre> … </pre>

○ 설명 : 문서가 편집되어 있는 모양 그대로 보여준다.



4. &nbsp; 기호 : non-breaking space

○ 형식 : &nbsp;

○ 설명

- 글자와 글자 사이를 띄어 준다.

- 글자와 글자 사이를 많이 띄어주고 싶으면 여러 번 중복해서 사용해야 함



5. 특수문자 입력


특수문자 이름

설명

특수문자 입력 

화면에 나타나는 문자 

less-than symbol

~보다 작다

&lt;

<

great-than symbol

~보다 크다

&gt;

>

ampersand

엠퍼센트

&amp;

&

quotation mark

인용부호

&quot;

"

soft hyphen

하이픈

&shy;

-







반응형

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

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

2. HTML 태그 맛보기

컴퓨터 활용/홈페이지 과정 | 2013. 1. 28. 20:22 | Posted by 깨비형
반응형

● <head>...</head>부분

    • <head>부분에 삽입되는 내용은 웹 페이지에 그 모습을 드러내 놓지는 않지만, html파일의 각종 중요한 정보를 담아 놓은 곳.
    • 즉, <head>안에 사용되는 내용은 웹 브라우저상에 보여지지는 않지만 문서의 중요정보를 담고 있거나 다른 부분에 스폰서 역할을 담당한다.



◈ <head>...</head>의 특징

    1. html문서에 육안으로 드러나지 않으며, 문서에 직접적인 영향을 주지 않음.
    2. html문서의 구조를 나타내는 곳.
    3. <head>...</head>사이에는 많은 정보를 넣을 수 있다.



● <head>부분에 삽입되는 <title>태그


 기본형식 : <title>...</title>

  설      명 : <title>태그는 웹 브라우저 상단에 사이트의 제목을 보여 주는 태그


※ title 이름 지정 시 주의점(title 이름은 본인의 사이트를 홍보 할 수 있는 훌륭한 마케팅 도구가 되므로 좋은 title 이름을 위해 다음과 같은 점을 주의해야 한다.)

①되도록이면 영어를 잘 모르는 사람을 위해 title이름은 한글로 설정.

②굳이 사이트의 설명을 적고자 한다면 짧고, 명료하게 사이트의 특성을 전달.

③사이트의 브랜드 명을 적는다.

④사이트의 도메인 네임을 한글로 적는다.



● 메모장 실행하는 2가지 방법

①[시작]단추 → [프로그램] → [보조 프로그램] → [메모장]을 클릭

②[시작]단추 → [실행] → [열기: notepad]를 입력한 후, Enter키를 누르면 메모장이 실행

  





반응형

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

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

1. HTML의 개요

컴퓨터 활용/홈페이지 과정 | 2013. 1. 7. 13:46 | Posted by 깨비형
반응형

● HTML(Hyper Text Markup Language)이란?   

  • WWW(World Wide Web)의 하이퍼텍스트 문서를 만들기 위하여 사용되는 기본언어인 HTML은 문서의 형식(텍스트,글자색,폰트,그래픽,문서이동...)을 정의하는 명령어이며, ASCII문자로 구성된 일반적인 텍스트 파일로 웹 브라우저는 이 HTML언어로 제작된 문서를 해석하여 이용자에게 보여 주게 됩니다. 
  • 즉, HTML은 웹 페이지를 작성하는 프로그램 언어입니다.
  • HTML=TAG 라고 생각할 수 있지만 HTML은 프로그래밍 언어이고 TAG는 개개의 명령어로 다르다.

    


● HTML의 특징 및 주의사항


 1. HTML의 모든 명령어는 ("<"와 ">")를 사용한다.

ⓐ시작태그 : <태그명>

ⓑ마감태그 : </태그명>


 2. 태그는 종류에 따라 3가지가 있다.

ⓐ시작태그와 마감태그가 꼭 필요한 태그

      <html>...</html>  <title>...</title>  <body>...</body>

ⓑ마감태그를 사용하지 않아도 되는 태그

      <p>  <br>  

ⓒ마감태그가 없는 태그

      <img>  <hr> 


 3. HTML은 대.소문자를 구별하지 않는다.


 4. 문서내의 띄어쓰기(Space bar)는 한 칸만 인정된다.


 5. 문서내의 줄바꿈(Enter)은 한 칸만 인정된다.


 6. 작성된 문서 파일의 확장자는 .html 이나 .htm으로 지정한다.


 7. 주석문 처리는 "<!--부연설문-->"로 끝나면 웹 브라우저는 이 부분을 무시하고 넘어간다.


 8. 브라우저에 따라 사용되는 전용태그가 있다.

ⓐ익스플로러 전용 태그 : <MARQUEE>

ⓑ네스케이프 전용 태그 : <BLINK>

ⓒ양쪽 다 적용되는 태그 : 대부분의 태그 사용


 9. 태그의 형식이<태그>...</태그>일 경우, 다른 태그와 구조가 겹치거나 엇갈림이 없도록 한다.

   (예) <H1><B>올바른 태그사용법입니다.</B></H1> ....(0)

    <H1><B>그릇된 태그사용법입니다.</H1></B> ....(X)


 10. HTML 태그를 잘못 사용했다 하더라도 브라우저에서는 에러를 발생시키지 않는다.



● HTML의 기본구조 

 

 <HTML>

   <HEAD>

     <TITLE>여기에 제목이 들어감</TITLE>

   </HEAD>

   <BODY>

                 여기에 실질적으로 웹에서 보여지는 내용이 보여짐(본문내용)

   </BODY>

 </HTML> 


태     그

설                        명 

<HTML>...</HTML>

 html 문서임을 표시하는 태그

 <HEAD>...</HEAD>

 문서의 제목이나 특징,제작자의 정보 등 문서에 관한 정보를 기술

 <TITLE>...</TITLE>

 문서의 제목을 브라우저의 제목표시줄에  표시하는 태그

 <BODY>...</BODY>

 <body>...</body>태그 안에 들어있는 내용이 브라우저에 표시되는 부분이다. 



● HTML에서 알아야 할 기본 용어

 


 ① HTML태그(Tag)

  HTML태그들은 웹 브라우저에게 웹 페이지의 구조와 서식을 알려 준다

  태그는 지정된 명령문과 이것을 둘러싼 꺾쇠(<>)로 구성 되어 있다.

  대부분의 태그는 시작 태그와 끝 태그로 구성되어 두 태그 사이의 텍스트에 지정된 효과를 내도록 한다. 시작 태그만 있는 경우도 있다.

  태그는 대/소문자를 구별하지 않지만 대부분 대문자를 사용한다

  많은 태그들이 옵션을 지정할 수 있는 속성들을 가짐(예를 들어 <FONT>태그는 COLOR라는 속성을 가지고 텍스트 색을 바꾼다.)

  대부분의 속성들은 값을 지정할 수 있다.(예를 들면 COLOR속성에는  Red값을 가질 수 있다.)


 ② 홈페이지(Home Page) 

 

  홈페이지란 HTML형태의 문서로 작성된 것으로, 사용자가 자신의 정보를 다른 사람에게 알려 주는 방법으로, 표현한 기록을 "Web Page"라 하고 "Web Page"의 초기화면을 "Home Page"라 하지만 모든 웹문서(Web Page)를 Home Page라 통용해 부름

  글, 그림, 동화상 등을 이용하여 자신의 홈페이지를 작성할 수 있으며, 이제는 단순한 HTML문서에서 탈피하여 애니메이션,3D등이 지원되는 "자바"등 여러 가지 고급언어들이 등장하여 더욱 화려하고 다이나믹한 웹문서가 표현되고 있으며 앞으로도 계속 발전해 나갈 것


 ③ 웹 브라우저 

 

  웹 페이지는 서로 다른 브라우저들에게 약간씩 다르게 보일 수 있음

  웹 브라우저들은 HTML태그를 해석하는 방법이 약간씩 다르고, 많은 경우 HTML기능들 전부를 지원하지 못하는 경우도 있다.

   또 넷스케이프나 마이크로 소프트와 같은 웹 브라우저 개발 업체에서 자신의 웹 브라우서에서만 사용하는 태그나 속성을 알아보지 못하는 경우도 있으며, 이런 경우 다른 회사의 제품들은 이것을 알아보지 못할 수도 있다. 

  웹 브라우저가 어떤 태그나 속성을 알아보지 못하면 보통 그 정도는 무시된다. 

  이런 태그나 속성들은 일반적으로 HTML표준이 아닌 확장 형태에서 찾아볼 수 있다. 

 

 ④ HTML버전


  HTML은 여러 버전이 존재. HTML 표준이라고도 하는 HTML 정의서(specification)는 지속적으로 업데이트 되며, 몇 년 마다 꾸준히 새로운 HTML 버전이 출시되고 있다. 

  새 버전은 웹 페이지 생성에 있어 좀 더 많은 제어를 할 수 있도록 기능을 추가하는 것이 보통이며, W3C(World Wide Web Consortium)라고 하는 조직에서 HTML 버전을 관리

    

 ⑤ ASCII문자(American Standard Code for Information Interchange) 

 

  아스키는 컴퓨터나 인터넷상에서 텍스트 파일을 위한 가장 일반적인 포맷 

  아스키 파일에서는 각각의 알파벳이나 숫자 그리고 특수문자들이 7 비트의 2 진수(7개의 0 또는 1의 조합으로 이루어진 스트링)로 표현되며, 총 128개의 문자가 정의되어 있다. 

   아스키는 미국규격협회인 ANSI (American National Standards Institute)에 의해 개발되었다. 




 




반응형

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

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
: