조은호 홈페이지 > 홈페이지 관련

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="~~~ " 목적지로 이동

title=" ~~~ " 링크의 설명

id="~~" 목적지

target="~~~ " 새창으로 열기등의 속성 * 4가지 속성.. _blink _paren _self, _top

>이후 생략..

_blink : 새 창을 띄워서 보여준다.

_parent : 자신을 불렀던 부모 프레임에 보여준다.

_self : 현재 창에 보여준다.

_top : 현재 폐이지를 무시하고 전체 폐이지에 보여준다.

ex> <a href="http://www.estudy.or.kr">

특정위치 이동시

음악도 연결시킬수 있다.

배경음악 지정

<bgsound> : 인터넷 익스플로러 웹브라우저에서만 가능

ex> <bgsound src = "음악 파일">

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>안에 넣어야 한다.

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> 엘리먼트에 추가

3. 모든 빈 태그들은 ">" 이 아닌 "/>"로 끝나야 한다.

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 : 표 경계선 굵기

프레임과 프레임 셋

<frame>

...

</frameset>

프레임셋의 속성 : head와 body사이에 들어가야 한다.

cols : 화면을 좌,우 프레임으로 나눈다. 속성값 : 픽셀, 백분율값

rows : 화면을 상,하 프레임으로 나눈다. 속성값 : 픽셀, 백분율값

framespacing : 프레임안의 내용과 프레임의 여백을 지정한다. 속성값 : 숫자

frameborder : 프레임의 테두리 표시 유, 무를 지정한다. 속성값 : 보임(1), 숨김(0)

noresize : 프래임의 크기 변경불가

name : 프레임의 이름을 나타낸다.

scrolling : 프레임의 스크롤바 유/무를 나타낸다.

src : 프레임에 표시될 문서의 경로, 주소를 나타낸다.

ex> <frameset rows="30%,*">