'1학기/홈페이지제작'에 해당되는 글 13건
태그의 특징태그의 특징
Posted at 2013. 4. 9. 22:35 | Posted in 1학기/홈페이지제작1. 태그
- 문장 및 글자의 속성을 변경시킨다.
- 이미지,동영상,사운드 등을 삽입시킨다.
- 다른 웹페이지와 연결시킨다.
- 대소문자를 구별하지 않는다.
ex) <P> = <p>
- < ? > 형식으로 사용 된다.
ex) <Br> <H1> ...
- 태그의 시작과 끝은 항상 <?> .... </?>다.
ex) <H2> 샬라샬라 샬라샬라 </H2>
- 단독으로 혼자서 사용되는 태그가 존재한다.
-> <P> , <Br>
- 태그 사이에 공백은 허용되지 않는다.
ex) < P > ( x ) / <P> ( o )
-한 개 이상의 공백은 무시된다.
2. 특수문자
- 공란 :
- ⓒ : © or ©
- < : < or <
- > : >
- " : "
- ⓡ : &req;
- 주석 : <!--이것은 보이지 않는다. -->
[출처] [영진전문대 컴퓨터정보계열] 태그의 특징과 특수문자|작성자 소망
Table 태그Table 태그
Posted at 2013. 4. 9. 14:17 | Posted in 1학기/홈페이지제작ⓐ TABLE
① 정의
- 표의 시작과 끝을 나타낼 때 사용하는 태그
② 관련 태그
- CAPTION :: 표 이름을 정할 때 사용 ( 없어도 무관 )
- TH :: 제목 셀을 만들 때 사용 ( 없어도 무관 )
- TR :: 행의 구분을 지을 때 사용
- TD :: 데이터 셀을 만들 때 사용
ex ) <TABLE>
<TR>
<TH> 제목1 </TH>
<TD> 내용 1 </TD>
</TR>
<TR>
<TH> 제목 2 </TH>
<TD> 내용 2 </TD>
</TR>
</TABLE>
라고 쓰게 된다면 결과물은 단순히
제목1 내용1
제목2 내용2
로 나오게 된다. 결과물을 보았을 때에는 아무런 선 표시도 존재하징낳고 글자만 저렇게 분리되 있으므로
일부로 표처럼 보이지않고 정돈되게 글을 적을 때에도 사용된다고 한다.
③ 테이블 태그 속성
㉠ <width=" "> "" 사이에는 픽셀수나 %가 들어가며 표의 전체 너비를 정한다.
㉡ <height=" "> "" 사이에는 픽셀수나 %가 들어가며 표의 전체 높이를 정한다.
㉢ <bgcolor=" "> "" 사이에는 #RRGGBB가 들어가며 표의 배경색을 정한다.
㉣ <background=" ">"" 사이에는 이미지의 이름과 위치가 들어가며 표의 배경 이미지를 정한다.
㉤ <align> 표의 정령방식을 정한다. "" 사이에는 right나 left 혹은 top 과 같은 것이 드간다.
㉥ <cellpadding=" "> ""사이에는 숫자가 들어가며 셀 안의 여백을 정한다.
㉦ <cellspacing=" "> ""사이에는 숫자가 들어가며 셀 간의 여백을 정한다.
㉧ <border=" "> 보통 표에 나오는 선같은걸 넣는 속성태그가 이것이며. "" 사이에는 픽셀 수가
들어간다.
㉨ <bordercolor=" "> 테두리의 색을 결정할 때 들어가며 "" 사이에는 #RRGGBB가 들어간다.
㉩ <bordercolordark=" "> "" 사이에는 #RRGGBB가 들어가며 표의 그림자를 정한다.
㉪ <frame=" "> "" 사이에는 voide, hside, vside 등이 들어가며 테이블선의 유무를 정한다.
㉫ <rules=" "> "" 사이에는 none, rows, cols 등이 들어가며 테이블 안쪽 경계선의 지정에 관여한다.
㉬ <hspace=" "> "" 사이에는 left, right가 들어가며 테이블 내용의 수평 정렬을 정한다.
㉭ <vspace=" "> ""사이에는 top, bottom가 들어가며 테이블 내용의 수직 정렬을 정한다.
㉮ <colspan=" "> ""사이에는 숫자가 들어가며 여러 열에 걸친 셀을 병합하는 태그이다.
㉯ <rowspan=" "> ""사이에는 숫자가 들어가며 여러 행에 걸친 셀을 병합하는 태그이다.
④ 추가 설명
㉢,㉣ -> <TABLE>에 사용하면 표 전체에 지정하는 속성 태그가 된다.
<TD> or <TH>에 사용할 시에는 각각의 셀에만 지정 되며 <TABLE>태그에 지정한것 보다
우선순위를 지닌다.
<TR>에 사용시 줄 단위로 지정하게 되며 ㉣은 제외다.
<TD>에는 ㉠만 사용이 가능하며 <TR>에는 ㉡만 사용이 가능하다.
㉤ 을 <TR>에 사용하게되면 테이블 속 모든 데이터를 정렬할 수 있다.
㉤ 을 <TABLE> 태그에 사용하면 텍스트와 표를 나란히 배치할 수 있다
html 태그html 태그
Posted at 2013. 4. 9. 14:14 | Posted in 1학기/홈페이지제작ⓐ < Br > 줄을 바꿀때마다 사용
- <Br><Br>을 사용하시면 한 줄을 띄우고 쓰게 됨
ⓑ < H? > 글씨 크기를 조절하는 태그랍니다. ? 에는 1 ~ 7 까지의 숫자가 들어감
- 숫자가 작아질수록 더 큰 글씨가 나옴
ⓒ <div> 문단을 구분할 때 사용 되는 태그입니다.
ex . <div align=left>내용</div>
* align에는 굳이 left가 아니라도 상관 없습니다. 태그 사이의 내용만 문단으로 구분합니다
ⓓ <center> 중앙정렬에 사용하는 태그
ⓔ <hr> 수평선을 넣을때 사용하는 태그입니다.
ex . <hr size=굵기 width=길이 align=정렬 방식 color=색상 Noshade>
ⓕ <pre> 키보드로 입력한 형식 유지
ⓖ <P> 문단 구분 및 줄바꿈
ⓗ <B> , <STRONG> 굵은 글씨를 만들때 씁니다.
ⓘ <SUP> 위 첨자에 사용되는 태그입니다. km² 이런거 처럼 말이지요...
ex . km<SUP>2</SUP>
ⓙ <SUB> 아래 첨자에 사용되는 태그입니다.
ⓚ <U> , <INS> 밑줄을 그을때 쓰입니다.
ⓛ <STRIKE> , <DEL> 취소표시, 텍스트 중간에 선 그을 떄 쓰는 겁니다!
ⓜ <I> , <EM> 글씨를 기울일 때 사용되는 태그입니다.
ⓝ <Font> 글자 속성을 다루는 태그입니다.
ex . <Font face="글꼴">, <Font Size="1~7">, <Font Color="#RRGGBB">
* 글꼴은 여러개를 넣을 수 있으며, 그 중 해당 페이지를 열어보는 컴퓨터 내에 있는 글꼴이
채택됩니다.
* 컬러의 RRGGBB는 각 RGB색상이며 0 ~ F 까지 사용할 수 있습니다.
ⓞ <Base Font> 웹 페이지 전체에 적용되는 글자 속성을 다루는 태그이며 사용된 태그 아래부터 저용됩니다.
* Bafs Font보다는 Font가 더 우선적용 됩니다.
ⓟ <body> html의 주요 내용 부분을 나타내는 태그이기도 하며 여러가지 속성이 존재합니다.
① <body text="#RRGGBB"> 웹페이지 전체에 적용되는 글씨색을 정하는 태그입니다.
② <body BGcolor="#RRGGBB"> 웹페이지의 배경색을 지정하는 태그입니다.
③ <body background="파일명"> 배경 이미지를 지정하는 태그입니다.
* 배경 이미지가 스크롤이 불가능하게 할려면 BGPROPERTIES="FIXED"를 추가
해야 합니다.
④ <body Link=#RRGGBB VLINK=#RRGGBB ALINK=#RRGGBB> 각각 링크의 색을 바꾸는 태그입니다.
* Link는 선택하지 않은 링크, VLink는 선택한 적이 있는 링크, ALink는 활성화 된 링크 입니다.
ⓠ <TT>, <CODE>, <KBD>, <SAMP> Monospaced글꼴로 변경시키는 태그입니다.
* Monospaced글꼴은 글자 하나하나가 차지하는 공간이 모두 같은 글꼴을 의미합니다.
ⓡ <BLOCKQUOTE> 웹페이지 양쪽이 조금씩 들여쓰기가 된 형태로 보여주는 태그입니다.
ⓢ <Q> 짧은 인용문 " " 이 나온다고하네요... 이건 저도 안써봐서 잘 몰겟어요 ㅠ
ⓣ <OL> 순서가 있는 목록 제작시에 사용되는 태그입니다. 이 태그와 같이 쓰이는 태그가 < LI> 임당!
type 값에는 1 or A or a 등이 사용되며 순서대로 표시됩니다.
ex . <OL TYPE="1">
<LI> 하나아 1. 하나아
<LI> 두우울 -> 2. 두우울
</OL>
* <LI>태그에 Value 속성을 추가해 순서대로가 아닌 임의의 숫자를 부여할 수 있습니다.
ex . <OL TYPE="1">
<LI> 하나아 1. 하나아
<LI VALUE="3"> 두우울 -> 3. 두우울
</OL>
ⓤ <UL> 순서가 없는 목록 제작시 사용되는 태그이며, 마찬가지로 <LI>태그와 함께 사용됩니다.
*UL TYPE에는 circle, disc, square가 사용되며 각 타입에 따라 <LI>태그에 나오는 모양이 바뀝니다.
ⓥ 사전에 주로 쓰일법한 태그들
① <DL> 정의 목록 시작
② <DT> 항목의 시작
③ <DD> 각 항목에 대한 정의 부분의 시작
* 위의 3가지 태그는 저도 안써봐서 자세히는 모르겠습니다...
ⓦ <IMG> 이미지를 올릴 때 사용되는 태그입니다.
① src="파일명" 말그대로 올리려하는 이미지의 파일명을 작성하는 속성입니다.
② alt="설명문" 해당 이미지에 마우스를 올렸을 때 나오는 설명을 작성하는 속성입니다.
③ width="숫자" 가로 너비를 조정하는 속성입니다.
④ height="숫자" 세로 너비를 조정하는 속성입니다.
⑤ border="숫자" 테두리를 만드는 속성입니다.
⑥ align="정렬 방식" 이미지의 정렬방식을 정하는 속성이며 Top, Middle, Bottom, Left, Right등이 사용
⑦ vspace="숫자" 상하의 여백을 정하는 속성입니다.
⑧ hspace="숫자" 좌우의 여백을 정하는 속성입니다.
ⓧ <BR Clear="명령어"> 사용시 이때까지 정해져 있던 규칙을 다음 줄 부터 적용시키지 않는 태그입니다.
* 명령어에는 all과 Left와 Right가 사용됩니다.
ⓨ <A> 다른 웹페이지로의 링크를 할 때 사용되는 태그입니다.
ex . <A HREF="URL" TITLE="설명" TARGET="창이름"> 태그 이름 </A>
① 동일 컴퓨터 내의 2개의 웹페이지를 연결할 때 사용하는 법
- <a href="파일명" title="설명" target="창이름">
② 다른 컴퓨터 내의 2개의 웹페이지를 연결할 때 사용하는 법
- <a href="URL">
③ 메일 주소로 바로 연결하는 법
- <a href=mailto:메일주소?subject=메일제목>
④ 한 문서 내에서 이동하는 법
- <a href="#top"> top 외에도 사용하실 수 있습니다.
⑤ 같은 웹페이지 안에서 지정한 위치로 이동하는 법
㉠ 도착되야할 장소의 제목을 <A NAME="제목"></A> 식으로 적습니다.
㉡ 링크를 놓고 싶은 위치에 <A href="#제목">을 만들고 이것을 클릭하게 되면
<A NAME="제목"></A>가 적혀있는 위치로 이동하게됩니다.
⑥ 다른 웹페이지에서 이 웹페이지의 지정된 위치로 이동하게 하는 법
- <A HREF="URL#목표"> 목표는 5번사항과 같이 <A NAME="목표"></A>가 적혀있는 위치로
이동하게 됩니다.
