본문 바로가기

각종 Tip

[스크랩] 기본태그 Html 소스 사용법

모르면 마냥 두렵기만 한 태그 HTML 소스 사용법

기본 태그부터 응용태그까지 1시간이면 끝낸다!




 - HTML 이란 무엇인가?

HTML 이란 Hyper Text Markup Language 의 약자로써 월드와이드웹 문서를 작성하는 Markup Language 입니다. HTML 은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어 갈 수 있습니다. 인터넷문서는 Hyper Text 의 원리를 이용하여 여러 문서를 링크시켜 다양한 정보를 손쉽게 검색하여 볼 수 있게 만들어 줍니다.


HTML 기초 태그 모음 

◈ 글자 모양 관련 태그 ◈ 

굵은 글자(bold) <B>...</B> 

이탤릭(ItaLic) <I>...</I> 

밑줄(UnderLine) <U>...</U> 

강조(Strikeout) <S>...</S> 

아래첨자(Subscript) <Sub>...</Sub>

위첨자(Superscript) <Sup>...</Sup> 

타자기 스타일(Typewriter) <Tt>...</Tt>

내용표시(PreFormaTted) <Pre>...</Pre>

가운데 정렬(Center) <Center>...</Center> 

깜빡임(Blinking) <Blink>...</Blink>

글자크기(Font Size) <Font Size="글씨크기숫자">...</Font>

기본폰트 크기 정의(Base Font Size) <BaseFont Size="기본폰트크기"> 

글자색(Font color) <Font color="#6자리색상이름">...</Font> 

(#6 은 헥사자리 색상이름이고 yellow등 대표적인 것은 영어이름으로 정의돼 있음.) 

◈ 문서 구분 관련 태그 ◈ 

문단 나누기(Paragraph) <P>...</P> 

문서 정렬(Align Text) <P Align="Left 또는 Right 또는 Center">...</P> 

수평선(Horizontal Paragraph) <Hr> 

Hr 정렬(Alignment) <Hr Align="Left 또는 Right 또는 Center"> 

Hr 두께(Thickness) <Hr Size="숫자"> 

Hr 폭-픽셀(Width) <Hr Width="숫자"> 

Hr 폭-퍼센트(Width Percent) <Hr Width="숫자%"> 

하일라이트 없는 수평선(Solid Line) <Hr Noshade> 

한줄 띄우기(Line Break) <Br> 

띄우기 방지(No Break) <Nobr></Nobr> 

◈ 배경 및 색 관련 태그 ◈ 

배경 이미지(Tiled Background) <BODY Background="이미지파일의 Url"> 

배경 색깔(Background color) <BODY Bgcolor="#6자리색상이름"> 

문서 전체 글자색(Text color) <BODY Text="#6자리색상이름"> 

하이퍼링크 색(Link color) <BODY Link="#6자리색상이름">

방문한 하이퍼링크 색(Visited Link) <BODY Vlink="#6자리색상이름"> 

활성화된 하이퍼링크(Active Link) <BODY Alink="#6자리색상이름"> 

◈ 하이퍼링크와 이미지 관련 태그 ◈ 

하이퍼링크(Link SomeThing) <A Href="Url"></A> 

책갈피가 있는 경우 <A Href="Url#책갈피이름"></A> 

타겟창을 지정한 링크 <A Href="Url" TARGet="타켓창이름"></A> 

(페이지가 프레임으로 나뉘어 있는경우 

해당 페이지내애서 어느 프레임인가를 표시) 

책갈피 정의(Define TarGet) <A Name="책갈피이름"></A> 

이미지 넣기(Display Image) <Img Src="이미지파일Url">

이미지 상하정렬(Alignment) <Img Src="Url" Valign="Top 또는 Bottom 또는 Middle"> 

이미지 좌우정렬(Alignment) <Img Src="Url" Align="Left 또는 Right 또는 Center"> 

이미지 대체 문자열(Alternate) <Img Src="Url" Alt="대체문자열"> 

(그림위로 마우스를 가져가면 Alt에 정의된 글씨가 표시된다. 

또한 그림이 안보이는 경우(유저가 그림이 안보이게 설정한경우, 그림파일이 삭제된경우...) 

그자리에 Alt에 정의된 글씨가 나온다.) 

이미지 크기 지정(Dimensions) <Img Src="Url" Width="넓이" Height="높이"> 

이미지 테두리(Border) <Img Src="Url" Border="테두리 두께"> 

이미지 맵 사용(ImageMap) <Img Src="이미지파일" Usemap="이미지맵이름"> 

이미지 맵 이름 정의(Map) <Map Name="이미지맵이름"></Map> 

이미지 맵 정의(Section) <Area Shape="Rect 또는 Circle 또는 Polly" Coords="이미지맵좌표" Href="이동할Url" 또는 NoHref> 

◈ 리스트 관련 태그 ◈

순서 없는 리스트(Unordered List) <Ul><Li>...</Ul> 

불릿 모양(Bullet Type) <Ul Type="Disc 또는 Circle 또는 Square"> 

<Li Type="Disc 또는 Circle 또는 Square"> 

순서 있는 리스트(Ordered List) <Ol><Li>...</Ol> 

순서 숫자 붙이는 방법(Numbering Type) <Ol Type="A 또는 a 또는 I 또는 i 또는 1"> 

<Li Type="A 또는 a 또는 I 또는 i 또는 1"> 

시작 숫자(Starting Number) <Ol Value="시작숫자"> 

<Li Value="시작숫자"> 

정의 리스트(Definition List) <Dl><Dt>...<Dd>...</Dl> 

메뉴 리스트(Menu List) <Menu><Li>...</Menu> 

디렉토리 리스트(DiRectory List) <Dir><Li>...</Dir> 

◈ 특수문자 관련 태그 ◈ 

& → & 

& nbsp; → Space 

& lt; → < 

& gt; → > 

※ 더 많은 특수문자가 필요하면 ◈ 여기를 ◈를 클릭. 

※ '&'와 문자 사이는 공간없이 붙여 쓴다. 

※ HTML에서는 위의 특수문자가 특별한 용도로 사용되므로 특수문자를 표시하려면 위와 같이 표기해 주어야 합니다. 

◈ 테이블 관련 태그 ◈ 

테이블 정의(Define Table) <Table>...</Table> 

테이블 테두리(Table Border) <Table Border="숫자"></Table>

테이블 폭(Desired Width) <Table Width="숫자 또는 %"> 

셀과 셀사이 간격(Cell Spacing) <Table Cellspacing="숫자"> 

셀과 내용사이 간격(Cell Padding) <Table Cellpadding="숫자">

테이블 가로줄 정의(Table Row) <Tr>...</Tr> 

가로줄 정렬(Alignment) <Tr Align="Left 또는 Right 또는 Center" Valign="Top 또는 Middle 또는 Bottom"> 

테이블 셀 정의(Table Cell) <Td>...</Td> 

셀 정렬(Alignment) <Td Align="Left 또는 Right 또는 Center" Valign="Top 또는 Middle 또는 Bottom"> 

줄 띄기 없음(No LineBreaks) <Td Nowrap> 

세로 병합(Columns to Span) <Td Colspan="병합할 셀 수"> 

가로 병합(Rows to Span) <Td Rowspan="병합할 줄 수"> 

셀 너비(Desired Width) <Td Width="숫자 또는 %"> 

테이블 머릿말(Table Header) <Th>...</Th> 

머릿말 정렬(Alignment) <Th Align="Left 또는 Right 또는 Center" Valign="Top 또는 Middle 또는 Bottom"> 

테이블 주석(Table Caption) <Caption>...</Caption> 

정렬(Alignment) <Caption Align="Top 또는 Bottom"> 

◈ 프레임 관련 태그 ◈ 

프레임 문서(Frame nUll) <Frameset></Frameset> 

가로로 프레임 나누기 <Frameset Rows="높이,높이,높이"></Frameset> 

세로로 프레임 나누기 <Frameset Cols="너비,너비,너비"></Frameset> 

프레임 정의(Define Frame) <Frame> 

문서 표시(Display nUll) <Frame Src="프레임에 표시될 Url"> 

프레임 이름(Frame Name) 정의 <Frame Name="프레임이름 또는 _blank 또는 _self 또는 _parent 또는 _Top"> 

프레임 좌우 여백(Margin Width) <Frame MarginWidth="숫자"> 

프레임 상하 여백(Margin Height) <Frame MarginHeight="숫자"> 

스크롤 바가 필요한가? <Frame Scrolling="Yes 또는 No 또는 Auto"> 

크기 변경 불가(Not Resizable) <Frame Noresize> 

◈ CGI관련 태그 ◈ 

폼 정의(Define Form) <Form Action="자료를 처리할 CGI의 Url" Method="Get 또는 Post"></Form> 

입력 방법 정의(Input Field) <INPUT Type="Text 또는 Password 또는 Checkbox 또는 Radio 또는 Image 또는 Hidden 또는 Submit 또는 Reset"> 

입력 필드 이름(Field Name) <INPUT Name="입력필드이름"> 

입력 필드의 기본값(Field Value) <INPUT Value="기본값"> 

체크박스 체크표시(Checked) <INPUT Type="Checkbox 또는 Radio" Checked> 

입력필드의 크기(Field Size) <INPUT Type="Text" Size="숫자"> 

최대 입력 크기(Max LengTh) <INPUT MaxlengTh="숫자"> 

선택 리스트(Selection List) <Select><Option>...</Select> 

리스트 이름(Name of List) <Select Name="리스트이름"><Option>...</Select> 

옵션의 숫자(# of Options) <Select Size=?></Select> 

리스트 항목(Option) <Option Value="항목값"> 

자동표시될 항목(Default Option) <Option SelectED> 

입력 박스 크기(Input Box Size) <TextArea Rows="줄수" Cols="줄당입력수"></TextArea> 

입력 박스 이름(Name of Box) <TextArea Name="입력박스이름"></TextArea> 

◈ 기타 태그 ◈ 

주석(Comment) <!-- 주석내용 --> 

기본 윈도우 이름(Base Window Name) <Base tarGet] 

◈ 팝업 되는 페이지 맨 위(앞)에 나오도록 하기 ◈

팝업 페이지에서 BODY 부분에 <BODY onblur='self.focus()'>와 같이 blur태그를 넣는다.

[ 스크랩 ] http://7times.tistory.com/

'각종 Tip' 카테고리의 다른 글

영화파일 화질의 종류에 대해서...  (0) 2009.08.10
책 가격비교 사이트  (0) 2009.06.07
변리사  (0) 2009.06.03
'지방' 쓰는 법  (0) 2009.05.26
장기기증  (0) 2009.05.22