<p></p> : 간단한 출력양식 단락을 구분하는 태그로 줄을 삽입한다. 정렬을 지정할 수 있다.
ex> <p align="center">
<q></q> : 인용구 - 안의 문장을 " "(쌍따옴표)로 출력해준다. 인용구를 표현할 때 쓴다. 인라인형식으로 <p>안에 있어야 한다.
<blockquote></blockquote> : 독립적으로 쓰이는 단락구분 문단표시 이걸 이용하면 이 안의 내용이 따로 블락 처리 되며 이부분은 들여쓰기가 되어진다. 긴 인용구
<br> : 줄바꿈 /n 과 같다.
<u></u> : 밑줄을 긋는다. 허나 링크연결표시랑 헷갈려서 많이 사용하지 않는다.
<hr> : 제목이 없는 새로운 구획 같은 수평선을 만들어 라인 구분, 선을 그리는 태그, 정렬, 색상, 굵기, 가로길이를 지정할 수 있다.
ex> <hr align="right" color="red" size="10" width="300" >
<li></li> : List Item 리스트 항목을 표시해주는 엘리먼트
<ol></ol> : Ordered List 리스트 항목의 순서를 표시해줌
<ul></ul> : Unordered List 리스트 항목이 순서가 필요없을때
<ol>과<ul>은 <li>와 함께 쓰인다. 그래야 의미가 있으니까.. 또한 블록 엘리먼트 이다. 실수로 <p>와 같은 인라인 엘리먼트 안에 넣지 않도록 한다.
<dl></dl> : Definition List 정의된 리스트를 표현 항목을 설명하는 부수적인 리스트를 표현할때 쓰는 엘리먼트, 사전식 목록
<dt></dt> : 정의된 리스트 안의 항목을 나타낼때, 제목
<dd></dd> : 정의된 리스트 안의 항목을 설명해주는 엘리먼트, 설명
위의 3개 엘리먼트는 항상 같이 쓰인다.
> 의 약자 = > , <의 약자 = <
ex) "The <html> element rocks." => The <html> element rocks.
& 의 약자 = &
특수 문자 사이트 : www.w3schools.com/tags/ref_entities.asp or www.unicode.org/charts
<a></a> : 링크를 만들기 위한 엘리먼트
이 엘리먼트는 여러 속성이 있는데.. 이렇게 쓰인다.
<a href=".......">......</a>
그 외에 다른 속성도 추가 시킬수 있다.
<a href="~~~ " 목적지로 이동
title=" ~~~ " 링크의 설명
id="~~" 목적지
target="~~~ " 새창으로 열기등의 속성 * 4가지 속성.. _blink _paren _self, _top
>이후 생략..
_blink : 새 창을 띄워서 보여준다.
_parent : 자신을 불렀던 부모 프레임에 보여준다.
_self : 현재 창에 보여준다.
_top : 현재 폐이지를 무시하고 전체 폐이지에 보여준다.
ex> <a href="http://www.estudy.or.kr">
<a href="story.html">
특정위치 이동시
<a href="#story1"> <a name="story1">
<a href="http://www.estudy.or.kr" target="_blink">
음악도 연결시킬수 있다.
<a href=" 음악파일의 경로">텍스트나 이미지</a>
배경음악 지정
<bgsound> : 인터넷 익스플로러 웹브라우저에서만 가능
ex> <bgsound src = "음악 파일">
<embed> : 대부분의 음악과 동영상 재생가능
ex> <embed src = "멀티미디어 파일명">
<em></em> : 강조하고자 하는 텍스트에 사용
<strong> : 특별한 강조를 위해서 사용
<pre> : 타이핑한 형식 그대로 브라우저가 보여주기 원할때 사용
사진 파일 형식
jpeg : 사진이나 복잡한 그래픽
gif : 단색이나 로고 그리고 기하학적 모양의 이미지
png : jpeg 와 gif 둘다를 지원할 수 있는 가장 최신의 기술
<img> 사진을 보여주는 엘리먼트
src : 사진을 올림, 파일 경로 지정
alt : 이미지 정보를 보여줌, 마우스를 올렸을 때, 설명글
신뢰성 검사를 위한 strict시 img 엘리먼트는 alt 속성을 반드시 가져야 한다.
align : 이미지 정렬
border : 이미지에 테두리선을 지정
width/height : 이미지의 가로/세로 길이를 지정
hspace/vspace : 이미지좌우/상하의 여백을 지정
ex> <img src="img1.jpg" alt="그림설명" align="meddle" border="1" width="300" vspace="200" >
1인치(2.54cm)는 대략 72~120픽셀
3인치(7.62cm)는 대략 220 픽셀정도..
신뢰성 검사
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
// transitional 과도적..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
// strict 엄격한..
메타 데이터.. <head>안에 넣어야 한다.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
XML 1.0 으로의 변환
1. doctype 변환
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <head> 엘리먼트에 추가
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
3. 모든 빈 태그들은 ">" 이 아닌 "/>"로 끝나야 한다.
<link> 엘리먼트 파일 링크해서 같다 쓰기
<link type="text/css" rel="stylesheet" href="lounge.css" />
bgcolor : 배경색을 지정 기본은 흰색
ex> <body bgcolor="yellow"> <p bgcolor="#999999">
background : 배경에 이미지를 지정
ex> <body background="images/rose.jpg">
leftmargin, topmargin : 각각 왼쪽 위쪽 여백을 지정
ex> <leftmargin="100" > <topmargin="200">
<center>~</center> : 웹화면에서 택스트나 이미지를 가운데 정렬
: 공백을 만들어주는 태그, 키보드의 스페이스바와 같은 효과
font : 글자를 꾸밀 수 있는 태그 속성을 모양, 색, 크기 지정
ex> <font face="MD이솝체" color="#999999" size="5" >
marquee : 글자를 움직이는 태그 속성은 방향, 속도, 배경색, 움직이는 영역의 크기, 움직이는 영역의 반복횟수(default=무한)
ex> <marquee direction="left" scrolldelay="200" bgcolor="yellow" width="200" height="200" loop="5">텍스트, 이미지</marquee>
<table> 태그의 기본 구조
<table> : 표의 시작
<tr> : 줄의 시작
<td> : 칸의 시작
</td> : 칸의 끝
</tr> : 줄의 끝
</table> : 표의 끝
<colspan="2"> 가로 셀 합치기 여기선 두개
<rowspan="2"> 세로 셀 합치기 여기도 두개
align : 행 가운데 정렬
valign : 열 가운데 정렬
width : 너비
border : 표 경계선 굵기
프레임과 프레임 셋
<frameset>
<frame>
<frame>
<frame>
...
</frameset>
프레임셋의 속성 : head와 body사이에 들어가야 한다.
cols : 화면을 좌,우 프레임으로 나눈다. 속성값 : 픽셀, 백분율값
rows : 화면을 상,하 프레임으로 나눈다. 속성값 : 픽셀, 백분율값
framespacing : 프레임안의 내용과 프레임의 여백을 지정한다. 속성값 : 숫자
frameborder : 프레임의 테두리 표시 유, 무를 지정한다. 속성값 : 보임(1), 숨김(0)
noresize : 프래임의 크기 변경불가
name : 프레임의 이름을 나타낸다.
scrolling : 프레임의 스크롤바 유/무를 나타낸다.
src : 프레임에 표시될 문서의 경로, 주소를 나타낸다.
ex> <frameset rows="30%,*">
<frame src="a.html" name = "menu">
<frame ser="b.html" name = "main" >
</frameset>
target : 연결하고자 하는 폐이지로 연결
ex> <a href="main.html" target="mainframe">...</a>
<iframe> : body에 들어가야 한다.
<iframe align="center" width="380" height="270" scrolling="no" name="photo" frameborder="0" >
'Html & CSS' 카테고리의 다른 글
| CSS의 간단한 속성이나 팁 (0) | 2011.01.22 |
|---|