노력과 삽질 퇴적물

HTML: html태그 기초 본문

프로그래밍note/언어. 스크립트 계열

HTML: html태그 기초

MTG 2012. 8. 1. 12:33


* 추천링크

HTML Tutirial   http://www.w3schools.com/html/default.asp

태그랑 홈만들기   http://skin011.com.ne.kr/HOME/homelesson1.html





01. HTNL기본 구조 및 태그옵션

 01. 태그 기본구조 및 옵션 예시

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>


<BODY>

</BODY>

</HTML>

-> body영역 : 화면에 띄워질 내용구현

-> HTML태그는 대소문자 구분은 없다.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>html태그 기초 CH01_01</title>

</head>



<body bgcolor="#000000" text="#FFFFFF">

html태그 기초 CH01_01<br><br>

<!-- 주석예시 -->

(br) BR태그는 LineBreak 줄 바꿈 태그<br/>

(&nbsp)띄어쓰기 연습,&nbsp;웹프로그래미&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;잉<br/>

<p align="center">

P태그에 옵션을 준 예시.<br/>

P태그 정렬에는 좌/중앙/우 맞춤(Justify) 정렬이 있다.

</p>

DIV태그와 SPAN태그 차이점<br/>

<div style="color:white;background:gray;" align="center">

DIV태그<br/>

이 영역을 보시기 바랍니다.<br/>

DIV태그는 단락을 나눌떄 사용하는 태그입니다.<br/>

</div>

<span style="background:blue;color:white">SPAN태그, 첫번째 영역</span>

<span style="background:red;color:white">SPAN태그, 두번째 영역</span>

<span style="background:green;color:white">SPAN태그, 세번째 영역</span>

</body>

</html>




 02. 많이 쓰이는 태그 (1)

-> HR태그

-> 테이블태그

padding 콘텐츠와 경계선 사이의 여백

margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백

-> H태그

-> 글꼴태그

-> marquee태그

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>html태그 기초 CH01_02</title>

</head>


<body>

HR태그-가로 분할선<br>

<hr width="150" color="#FF0000"><br>

HR태그-전체화면 20% 크기, 가로분할 선<br>

<hr width="20%" align="left" size="5" noshade><br>

<table border="1" align="center" cellpadding="1" cellspacing="0" bordercolor="blue">

<thead>

<tr>

<th colspan="3">테이블내 H태그삽입</th> <!-- 가운데 정렬, 진하게. 행내 3칸 확장 -->

</tr>

</thead>

<tr padding="3px"> <!-- 테이블 1행 -->

<td>

<h1>H1태그</h1> <!-- 테이블 1행 1열 -->

</td>

<td>

<h3>H3태그</h3> <!-- 테이블 1행 2열 -->

</td>

<td>

<h5>H5태그</h5> <!-- 테이블 1행 3열 -->

</td>

</tr>

<tr margin="3px"> <!-- 테이블 2행 -->

<td colspan="3" align="center"> <!-- 테이블내 행확장 -->

<font size="6">FONT태그. 사이즈는 1~6</font><br>

<font size="3" color="#55AADD" face="휴먼옛체">FONT태그. 사이즈는1~6</font>

</td>

</tr>

</table>

<br>

글꼴서식 태그<br>

<b>B태그, 굵게</b><br>

<i>I태그, 이탤릭</i><br>

<u>U태그, 밑줄</u><br>

<br>

<p align="center">

marquee를 이용한 문자열 움직임.<br>

<marquee direction="right">1. 오른쪽으로만</marquee>

<marquee direction="right" behavior="alternate">2. 우측부터 횡단왕복</marquee>

<marquee direction="right" scrolldelay="200">3 오른쪽으로 느리게</marquee>

<marquee direction="up">위로</marquee>

<marquee direction="down">아래로</marquee>

</p>

</body>

</html>




 03. 많이 쓰이는 태그 (2)

-> 들여쓰기 태그

-> 목차 태그

-> 순번 태그

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>html태그 기초 CH01_03</title>

</head>


<body>

<p align="center">

<b>목록만들기, 들여쓰기</b>

</p>

<dl>

<dt>대분류1</dt>

<dd>소분류1</dd>

<dd>소분류2</dd>

<dd>소분류3</dd>

<dt>대분류2</dt>

<dd>소분류1</dd>

<dd>소분류2</dd>

<dd>소분류3</dd>

</dl>

<ol type="i" start="i"> <!--  순번있는 목차 -->

<li>TYPE a</li>

<li>TYPE A</li>

<li>TYPE i</li>

<li>TYPE I</li>

</ol>

<br>


<ul type="square"> <!--  순번없는 목차 -->

<li>TYPE SQUARE 검은색 네모</li>

<li>TYPE CIRCLE 검은색 테두리 원</li>

<li>TYPE DISC 별다른 속성이 없으면 기본 디폴트로 적용</li>

</ul>

</body>

</html>






02. 삽입태그

 01. 리소스 삽입태그(?)

-> 임베디드/OBJECT 태그)

-> IMG태그. 참고로 프로젝트 폴더내 경로일때는 [../WebContent_이미지폴더/파일명.확장자]로 지정하면 된다.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>html태그 기초 CH02_01</title>

</head>


<body>

IMG 태그 예시<br>

프로젝트내 리소스나 웹상의 주소값을 이용해서 삽입이 가능하다.<br>

<img src="https://t1.daumcdn.net/cfile/tistory/1806B7375018EE0633"/><br><br>


embeded 태그 예시<br>

<embeded src="http://video.ted.com/assets/player/swf/EmbedPlayer.swf" width="400" height="300" hidden="false" autostart="false"></embeded>


i프레임 태그예시<br>

<iframe src="http://www.youtube.com" width="400" height="300"></iframe>


CSS삽입&연결 태그예시<br>

<link rel="stylesheet" type="text/css" href="mystyle.css">



프레임 태그예시1<br>

<frameset cols="20%"/>

<frame src="left.html" name="left"/>

<frame src="right.html" name="right"/>

</frameset>


프레임 태그예시2<br>

<frame src="bottom.html" name="bottom"/>

</body>

</html>




 02.. HREF, 페이지 이동태그

   <a href="http://www.________">특정 웹페이지로 이동</a>


   <a name="태그명">태그명(이동태그가 오는곳)</a>

   <a href="#태그명">여기를 누르면 태그명 지정이 있는쪽으로 스크롤</a>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>html태그 기초 CH02_02</title>

</head>


<body>

<a href="http://analog-green.tistory.com/">노력과 삽질 퇴적물 메인으로</a><br/>

<!-- 프로젝트내 소스파일과도 연결이 가능하다 -->

<a href="html01.html">예제1</a><br/>

<br/>

<a name="top">장르별 역대영화 Best3</a><br/>

<a href="#fantasy">[판타지]</a><br/>

<a href="#sf">[SF]</a><br/>

<a href="#action">[액션]</a><br/>

<a href="#comedy">[코메디]</a><br/>

<a href="#animation">[애니메이션]</a><br/>

<br/><br/><br/>

<a name="fantasy">판타지장르</a>

<ol>

<li>해리포터</li>

<li>반지의 제왕</li>

<li>후크</li>

</ol>

<a href="#top">[상단으로 가기]</a><br/>

<br/><br/><br/>

<a name="sf">SF장르</a>

<ol>

<li>쥬라기공원</li>

<li>제 5원소</li>

<li>백튜더 퓨처</li>

</ol>

<a href="#top">[상단으로 가기]</a><br/>

<br/><br/><br/>

<a name="action">액션장르</a>

<ol>

<li>인셉션</li>

<li>배트맨</li>

<li>터미네이터2</li>

</ol>

<a href="#top">[상단으로 가기]</a><br/>

<br/><br/><br/>

<a name="comdedy">코메디장르</a>

<ol>

<li>마스크</li>

<li>찰리 채플린</li>

<li>고스트 버스터즈</li>

</ol>

<a href="#top">[상단으로 가기]</a><br/>

<br/><br/><br/>

<a name="animation">애니메이션 장르</a>

<ol>

<li>슈렉</li>

<li>마당을 나온 암탉</li>

<li>센과 치히로의 행방불명</li>

</ol>

<a href="#top">[상단으로 가기]</a><br/>

<br/><br/><br/>

</body>

</html>






03. 입력

 01. INPUT태그 + @

-> input type="text"

-> input type="hidden"

-> input type="password"

-> input type="checkbox"

-> input type="button"

-> input type="submit"

-> input type="reset"


-> select & option

Input tag
Text Type
Hidden Type
PW Type
라디오 버튼 A형 B형 AB형 O형
체크박스 타입 자바 JSP I폰
버튼 타입 누르세요
드롭박스
파일타입 찾아보기
SUBMIT

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>html태그 기초 CH03_01</title>

</head>


<body>

<table cellpadding="1" cellspacing="0" align="center">

<caption><b>Input tag</b></caption>

<tr>

<td>Text Type</td>

<td><input type="text" name="id" value="example"></td>

</tr>

<tr>

<td>Hidden Type</td>

<td><input type="hidden" name="id2" value="example"></td>

</tr>

<tr>

<td>PW Type</td>

<td><input type="password" name="pass" maxlength="5" value="1234"></td>

</tr>

<tr>

<td>라디오 버튼</td>

<td>

<input type="radio" name="gender" value="A형" checked>A형

<input type="radio" name="gender" value="B형" >B형

<input type="radio" name="gender" value="AB형" >AB형

<input type="radio" name="gender" value="O형" >O형

</td>

</tr>

<tr>

<td>체크박스 타입</td>

<td>

<input type="checkbox" name="subject" value="java" checked>자바

<input type="checkbox" name="subject" value="JSP">JSP

<input type="checkbox" name="subject" value="iPHONE">I폰

</td>

</tr>

<tr>

<td>버튼 타입</td>

<td>

<input type="button" name="bt" value="누르세요">누르세요

</td>

</tr>

<tr>

<td>드롭박스</td>

<td>

<select name="과일">

<option value="사과">사과</option>

<option value="바나나">바나나</option>

<option value="복숭아">복숭아</option>

</select>

</td>

</tr>

<tr>

<td>파일타입</td>

<td>

<input type="file" value="찾아보기">찾아보기

</td><!-- -->

</tr>

<tr>

<td>SUBMIT</td>

<td>

<input type="submit" value="전송"><!-- 한페이지에 submit은 딱1개만 -->

<input type="reset" value="취소">

</td>

</tr>

</table>

</body>

</html>






04. CSS

 1. 형식과 연결

-> 기존의 태그나 사용자 정의 태그를 정의해서 HTML등에서 사용할수 있다.

<!--html basis CH04_01.css-->

body

{

background-repeat:repeat;

background-position:left center;

background-attachement:fixed;

color:red;

}


textarea

{

background-color:red;

color:blue;

}

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<link rel="stylesheet" type"text/css" href="html basis CH04_01.css">

<title>html basis CH04_01</title>

</head>


<body>

<textarea width="300">

노력과 삽질 퇴적물

</textarea>

</body>

</html>




 2. CSS태그 선언 유형

#CSS_태그ID

.클래스형_CSS_태그명

#myLayer1

{

z-index:1;

}

#myLayer2

{

z-index:2;

}


.myLayer3

{

position:absolute;

background-color:red;

top:100px;

left:100px;

width:100px;

height:100px;

}

.myLayer4

{

position:absolute;

background-color:blue;

top:150px;

left:150px;

width:150px;

height:150px;

}

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<link rel="stylesheet" type"text/css" href="html basis CH04_02.css">

<title>html basis CH04_02</title>

<style type="text/css">

<!--css파일을 별도로 안하고, style태그내에 선언/정의도 가능-->

</style>

</head>


<body>

<div id="myLayer1" class="myLayer3">레이어1</div>

<div id="myLayer2" class="myLayer4">레이어2</div>

</body>

</html>

저작자표시 비영리 변경금지

'프로그래밍note > 언어. 스크립트 계열' 카테고리의 다른 글

파이썬: 기초정리 (2)  (0) 2013.05.08
파이썬: 기초정리 (1)  (2) 2013.05.07
JS: 자바스크립트 관련 링크모음  (0) 2011.08.11
JS: 기본요소  (0) 2011.08.09
JS: html구조와 자바스크립트  (0) 2011.08.09
'프로그래밍note/언어. 스크립트 계열' Related Articles more