1. 태그 정리 바닥부터 시작하는 HTML-
다음 태그들은 html을 배울 때 기본적으로 알아야 할 태그를 중심으로 간략하게 설명을 한 것이다.
하지만 이것만 알면 모든 것을 할 수 있는 정도는 아니다.(간단한 웹페이지 정도는 할 수 있겠지만. ^^)
왜냐하면 어떤 태그는 좀 더 자세히 알아야 이해가 갈 것이기 때문이다. 여기에 적어두는 것은 자주 쓰는 태그를 쉽게 참조해서 써먹기 위해서이고 까다로운 태그들은 계속해서 공부해갈 것이다
1. 기본구조
<!DOCTYPE html>
<html>
<head>
<title>웹페이지의 제목</title>
</head>
<body>
웹페이지의 내용.
</body>
</html>
<Hn>...</Hn> : n은 1에서 6까지의 숫자. 표제 부분에 들어갈 말을 정의. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아짐.
default H4
<!--주석 내용--> : 주석을 달거나 잠시 이미지를 보이지 않게 할 때 사용
target :
<BASE target='_blank'> :
페이지 윗부분에 선언해 놓으면 이 base 태그 다음에 나오는 링크들의 target 속성은 모드 _blank 가 된다. 이 base 태그는 프레임에서 많이 사용하기도 한다.
<BASE target='mainFrame'> 이런 식으로 왼쪽 프레임에서 사용해주면 링크 클릭 시 모든 타겟이 mainFrame로 가게 된다.
href :
<BASE href='http://blog.naver.com/"> :
이렇게 선언해 두었을 경우 <img src="/img/test.gif"> 의 주소는 <img src="http://blog.naver.com/img/test.gif"> 와 마찬가지로 인식하게 된다.
2. 문단 혹은 줄을 바꾸는 태그
공백
< 왼쪽꺽쇠
> 오른쪽꺽쇠
& 앰퍼샌드
" 큰따옴표
® 등록기호 ®
© 저작권 ⓒ
나머진 ASCII기호로 표시
<P align="lift / right / center"> </P> : 문단(Paragraph)을 바꾸는 태그 줄 바꿈과 동시에 줄을 띈 것 같은 효과
<BR> : 한줄 띄우기
<PRE> </PRE> : 여백이나 줄 간격 등을 고정시켜 주는 역할
<BLOCKQUOTE></BLOCKQUOTE> : 들여쓰기
<CNETER></CENTER> : 전체 문장을 가운데로 정렬
<NOBR></NOBR> : 띄우기 방지(No Break) -->공식 Html 명령어가 아니므로 쓰지 않기를 권장. 차라리 css에서 구현할 것.
<div></div> : 영역을 분할하는 태그
3. 글자관련 태그
<FONT size="n" face="글꼴" color="#6자리색상이름"></FONT>
- size : 글자의 크기를 마음대로 조절. 숫자는 1~7까지며 7이 가장 큰 크기 (default : 3)
-color : (#6은 핵사 자리 색상 이름이고 yellow등 대표적인 것은 영어이름으로 정의되어 있음)
<BASEFONT SIZE="기본폰트크기"> : 기본폰트 크기 정의
<STRONG></STRONG> , <B></B> 굵은 글씨를 나타내 주는 태그
<I></I>, <EM></EM>, <VAR></VAR> 이탤릭체의 글씨를 나타내 주는 태그
<KBD></KBD>, <CODE></CODE>, <TT></TT> 타자기체의 글씨를 나타내 주는 태그
<U></U> 글자에 밑줄
<S></S> 글자 중앙을 가로지르는 중앙선을 긋는 태그
<BIG></BIG> 글자 크기를 크게 변경
<SMALL></SMALL> 글자 크기를 작게 변경
<BLINK></BLINK> 글자를 깜박이게 한다.
<SUB></SUB> 아랫첨자
<SUP></SUP> 윗첨자
4. 선 그리기 태그
<HR align="" width="" size=""> 입체적인 선을 그려줌
- align : 선의 정렬
- width : 선의 폭
- size : 선의 두께
<HR WIDTH="숫자"> : HR 폭-픽셀(Width)
<HR WIDTH="숫자%"> : HR 폭-퍼센트(Width Percent)
<HR NOSHADE> : 하일라이트 없는 수평선(Solid Line)
5. 목록을 정리해 주는 태그
<UL><li>....</li></UL> : 순서가 없는 목록. 일반적인 나열
<UL TYPE="DISC 또는 CIRCLE 또는 SQUARE"> : 불릿 모양(Bullet Type)
<LI TYPE="DISC 또는 CIRCLE 또는 SQUARE"> : <UL></UL>안의 <li>에 사용되는 불릿 모양.
<OL><li>...</li></OL> : 순서가 있는 목록. 위에서부터 번호 매김
<OL TYPE="A 또는 a 또는 I 또는 i 또는 1"> : 순서 숫자 붙이는 방법(Numbering Type)
<LI TYPE="A 또는 a 또는 I 또는 i 또는 1"> : <OL></OL>안의 <li>에 사용되는 순서 번호.
<OL VALUE="시작숫자">
<LI VALUE="시작숫자"> : 시작 숫자(Starting Number)
<MENU><li>...</li></MENU> : 메뉴 목록으로 그리 길지 않은 문장의 열거에 사용
<DIR><li>...</li></DIR> : 디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열
[DL][DT]...[DD]...[/DL] : 정의 목록 태그. <LI>가 아닌<DT>와 <DD>를 사용
6. 하이퍼링크
<A href="URL"></A> : 다른 홈페이지와 연결
<A name="책갈피이름""></A> : 자신의 홈페이지 내에서 연결 (책갈피)
<A name="URL#책갈피이름"></A> : 다른 페이지에서 책갈피로드
<A NAME="책갈피이름"></A> : 책갈피 정의(Define Target)
<A href="URL" target="_self/_blank/타켓창이름(타겟창을 지정하는 경우)"> :
페이지가 프레임으로 나뉘어 있는경우 해당 페이지내애서 어느 프레임인가를 표시
- href : 연결될 URL 지정 ("mailto:mail-address" : 메일보내기)
- target
_self : 지금 창에서 연결 (default)
_blank : 새창으로 연결
7. 배경 이미지, 색상 지정
<BODY background="이미지파일의 URL"></BODY> 배경 이미지 띄어줌
<BODY bgcolor="#6자리색상이름""></BODY> 배경 색깔을 지정
<BODY text="#6자리색상이름"></BODY> 문서 전체 글자색(Text Color)
<BODY link="#6자리색상이름"></BODY> 하이퍼링크의 색을 지정
<BODY vlink="#6자리색상이름"></BODY> 한번 누른 적이 있는 하이퍼링크의 색을 지정(visited link)
<BODY alink="#6자리색상이름"></BODY> 누르고 있는 동안의 하이퍼링크의 색을 지정(active link)
* 색상
#00000000
보통 6자리로 색상을 표현하는데 가끔 8자리인경우가 있다.
이때 8자리에서 앞 두 자리는 알파 값 즉, 투명도를 나타낸다. (00 : 투명 ~ ff : 불투명 )
8. 표 만들기 태그
<TABLE width="" height="" border="숫자" bordercolor="테두리 색깔" background="" frame="" rules="" cellspacing="숫자" cellpadding="숫자" align="">
<TR>
<TD>1행 1열</TD>
<TD>1행 2열</TD>
</TR>
<TR>
<TD>2행 1열</TD>
<TD>2행 2열</TD>
</TR>
</TABLE>
-width, height : 테이블 폭, 높이 (숫자 또는 %).
-border : 일정한 영역의 테두리 두께, 모양, 색 설정하는 속성
-border-style : 테두리 모양 (solid, double, groove, ridge, inset, outset 의 속성이 있다.)
(border를 사용할 때는 border-style이 반드시 정의되어있어야 한다.)
border-width : 테두리를 각각 좌우위아래별로 설정 가능
border-left-width
border-right-width
border-top-width
border-bottom-width
border-color : 테두리 색상
- background : 테이블 배경 이미지 지정
- frame : 바깥쪽 테두리 (void / boxs)
- rules : 안쪽 테두리 (none : 테두리 없음 / cols : 열사이만 테두리 / rows : 행사이만 테두리)
- cellspacing : 셀간의 여백 지정
- cellpadding : 셀과 내용물간의 여백 지정
- align : 테이블 정렬 (left / center / right)
<TR>...</TR> : 테이블 가로줄 정의(Table Row)
<TR ALIGN="LEFT 또는 RIGHT 또는 CENTER" VALIGN="TOP 또는 MIDDLE 또는 BOTTOM"> :
가로줄 정렬(Alignment)
<TD bgcolor="" colspan="병합할 셀 수" rowspan="병합할 줄 수" align="" valign="" WIDTH="" nowrap>...</TD> :
테이블 셀 정의(Table Cell)
- colspan : 가로 칸을 n만큼 병합
- rowspan : 세로 칸을 n만큼 병합
- align : 표 안의 좌우 정렬 방식을 정의 (left / right / center)
- valign : 표 안의 상하 정렬 방식을 정의 (top / middle / bottom)
-width : 셀 너비(Desired Width). 숫자 또는 %.
- nowrap : 줄 띄기 없음(No linebreaks) 지정
<TH> 테이블 머릿말(Table Header)
<TH ALIGN="LEFT 또는 RIGHT 또는 CENTER" VALIGN="TOP 또는 MIDDLE 또는 BOTTOM"> :
머릿말 정렬(Alignment)
<CAPTION>...</CAPTION> : 테이블 주석(Table Caption)
<CAPTION ALIGN="TOP 또는 BOTTOM"> : 정렬(Alignment)
9. 흐르는 글자 태그
<MARQUEE width="" height="" bgcolor="색깔" behavior="alternate/slide" direction="up/right/..." loop="" scrollmount="" scrolldelay=""> </MARQUEE>
- width, height : 크기 지정
- bgcolor : 배경 색깔
- behavior
alternate : 좌우로 왔다 갔다함
slide : 움직이다가 멈춤
- direction : 방향 지정
- loop : 움직이는 횟수 지정
- scrollmount : 움직이게 되는 길이를 픽셀단위로 지정
- scrolldelay : 움직일 속도를 지정
10. 이미지 태그
<IMG src="이미지 경로" width="n" height="n" border=n vspace="n" hspace="n" align="left/right/..." alt="대체문자열">
- src : 이미지 경로
- width, height : 이미지 크기 지정
- border : 이미지 테두리 굵기 지정
- vspace, hspace : 좌우, 상하 여백 지정
- align : 정렬 (middle : 이미지의 세로 중앙에 글 문단이 정렬)
<IMG SRC="URL" ALIGN="TOP 또는 BOTTOM 또는 MIDDLE"> : 이미지 상하정렬(Alignment)
<IMG SRC="URL" ALIGN="LEFT 또는 RIGHT 또는 CENTER"> : 이미지 좌우정렬(Alignment)
- alt : 대체문자열. 그림위로 마우스를 가져가거나, 그림이 안 보이는 경우(유저가 그림이 안보이게 설정한 경우, 그림파일이
삭제된 경우 등) alt에 정의된 글씨가 표시된다.
11. 이미지 맵
<IMG src="이미지 경로" usemap=""이미지맵이름"> : 이미지 맵 사용(Imagemap)
<MAP name=""이미지맵이름""> : 이미지 맵 이름 정의(Map)
<AREA shape="rect/circle/poly" coords="좌표" href="이동할URL" 또는 nohref alt="설명"></MAP> : 이미지맵 정의
- name : <IMG> 의 usemap 에서 지정한 맵이름과 동일해야한다.
- shape : 이미지맵의 모양을 사각형(rect), 타원형(circle), 다각형(poly) 중에 지정
- coords : shape 에서 선택한 이미지맵에 따라 좌표부분이 달라진다. 다각형의 경우 최소 3개의 꼭지점이 필요하다.
(circle : 중심점 x좌표, 중심점 y좌표, 반지름)
12. 음악 태그
<BGSOUND src="음악파일 경로" loop="">
<EMBED src="음악파일 경로" autostart="true/false" hidden="true/false" loop="true/false/">
- autostart : 자동 시작 설정
- loop : 반복여부 설정 (-1 : 무한반복)
13. FORM 태그
<FORM action="자료를 처리할 cgi의 url" method="GET 또는 POST"> 폼 정의(Define Form)
<INPUT type="text" name="" value="" size="" maxlength=""> 텍스트 입력창
<INPUT type="password" name="" value="" size="" maxlength=""> 패스워드 입력창
<INPUT type="radio" name="" value="" checked> 라디오버튼
<INPUT type="checkbox" name="" value="" checked> 체크박스
<SELECT name=""> 콤보박스
<OPTION value=""> </OPTION>
<OPTION value="" selected> </OPTION>...
</SELECT>
<select><option>...</select> : 선택 리스트(selection list)
<select name="리스트이름"><option>...</select> : 리스트 이름(name of list)
<select size=?></select> : 옵션의 숫자(# of options)
<option value="항목값"> : 리스트 항목(option)
<option selected> : 자동표시될 항목(default option)
<INPUT type="file" name="" size=""> 파일 선택 상자
<INPUT type="image" name="" src="이미지 경로" alt="설명" align=""> 이미지 버튼
<INPUT type="submit" name="" value=""> 전송버튼
<INPUT type="reset" name="" value=""> 취소버튼
<INPUT type="hidden"> 히든
<TEXTAREA name="" rows="" cols=""> </TEXTAREA> 텍스트 영역
-name=“입력박스이름”
-rows="줄수"
-cols="줄당입력수"
</FORM>
<input name="입력필드이름"> : 입력 필드 이름(field name)
<input value="기본값"> : 입력 필드의 기본값(field value)
<input type="text" size="숫자"> : 입력필드의 크기(field size)
<input maxlength="숫자"> : 최대 입력 크기(max length)
14. 프레임
<FRAMESET cols/rows="" border="" bordercolor="" frameborder="yes/no" framespacing="">
<FRAME name="프레임 이름" src="문서파일주소(경로)" marginheight="" marginwidth=""
scrolling="auto/yes/no" noresize></FRAME>
name - 프레임의 이름을 나타냅니다. target이 필요
noresize - 프레임의 경계를 마우스로 조절 못하게 합니다.
이 속성을 설정하지 않으면 경계선이 마우스로 움직여집니다.
scrolling - 스크롤바(위 아래 이동줄)를 표시
scrolling = auto : 문서 내용이 많아지면 스크롤이 자동으로 생성
scrolling = yes : 문서 내용에 관계없이 스크롤이 표시
scrolling = no : 문서 내용이 많아져도 스크롤이 표시되지 않습니다.
src - 나누어진 화면에 불러올 문서를 결정합니다.
frame src = "문서파일주소(경로)"
marginwidth - 프레임 경계선과 프레임에 들어온 문서와의 좌, 우 여백 결정
marginheight - 프레임 경계선과 프레임에 들어온 문서와의 상, 하 여백 결정
</FRMAMSET> : 분할된 화면의 크기를 설정합니다.
-rows : 세로로 화면을 분할하고 원하는 픽셀수나 비율(%)을 설정
-cols : 가로로 화면을 분할하고 원하는 픽셀수나 비율(%)을 설정
-border : 프레임의 경계선을 표시
yes 혹은 숫자 "1" : 프레임의 경계선을 표시
no 혹은 숫자 "0" : 프레임의 경계선을 표시하지 않을 때
-bordercolor : 프레임 경계선을 색상을 설정
-framespacing : 각 프레임 간의 간격을 픽셀수로 설정
* 프레임 문서에서의 하이퍼 타깃
<A href="파일 경로" target="프레임 이름/_top/_self_/_blank/_parent"> 내용... </A>
- target
1. 프레임 이름 : <FRAME> 태그의 name 속성에서 지정한 프레임 이름을 타깃으로 지정하면 지정한 프레임에
하이퍼링크 문서가 나타난다.
2. _top : 프레임 구조를 무시하고 전체화면 창으로 하이퍼링크 문서가 나타난다.
3. _self : 기본값으로 현재 프레임 화면에 하이퍼링크 문서가 나타난다.
4. _blank : 새로운 화면에 하이퍼링크 문서가 나타난다.
5. _parent : 프레임의 상위 프레임 세트에 하이퍼링크 문서가 나타난다. 복잡한 프레임 세트 구조에서 확인할수있다.
15. 그 밖의 태그들
<DFN></DFN> 정의되어지는 단어에 대한 것
<CITE></CITE> 책이나 사진 등의 제목
<SAMP></SAMP> 컴퓨터상에 메세지
<BASEPOINT>...</BASEPOINT> 기본적으로 미리 약속된 크기를 다시 정할때 사용
tyle="font-family: 나눔바른고딕; font-size: 12pt;">컴퓨터상에 메세지
<BASEPOINT>...</BASEPOINT> 기본적으로 미리 약속된 크기를 다시 정할때 사용
'COMPUTER > HTML' 카테고리의 다른 글
| 6. <div> 태그 -바닥부터 시작하는 HTML- (0) | 2016.12.04 |
|---|---|
| 5. <TABLE> 태그 -바닥부터 시작하는 HTML- (0) | 2016.12.02 |
| 4. 구문 사용의 기본및 속성 -바닥부터 시작하는 HTML- (0) | 2016.11.23 |
| 3. <!DOCTYPE> 선언 -바닥부터 시작하는 HTML- (0) | 2016.11.17 |
| 2. HTML의 구성 요소 -바닥부터 시작하는 HTML- (0) | 2016.11.16 |