HTML (HyperText Markup Language)
<html> </html> ㅡ>시작을 알리므로 항상 처음에 열고 끝에닫음.
<head> </head> ㅡ>html문서에 대한 정보를 입력, 출력은 되지않음. title이 들어감.
<basefont> ㅡ> 전체의 글씨를 지정한다.
종료태그는 없음. <body>부분에 입력.
ex) <basefont size=12 color = green>
<title> 제목 </title> ㅡ> 제목을 입력함. 창위에 뜨는거.
<!-- 주석내용 --> ㅡ>주석을 달때 사용.
ㅡ> 스페이스바를 의미. 한 칸 띄기
<body> </body> ㅡ> 실제적인 내용 기술.
body태그 안에서 사용되는 속성들
ex) <body bgcolor = "색상명 또는 16진수 형태의 #RGB값">
|
속성 |
설명 |
|
bgcolor="#RGB" |
배경색상 지정 (색상명/ 색상코드) |
|
background = "이미지 파일경로" |
배경으로 사용할 이미지 파일의 경로 지정(이미지 경로지정 : URL) |
|
bgproperties=fixed |
브라우저 창에 상하 좌우 어느 쪽으로 스크롤해도 배경 이미지가 고정된 상태로 움직이지 않음 |
|
text ="#RGB" |
문자의 기본 색상 지정(색상명/ 색상코드) |
|
link ="#RGB" |
링크된 문자의 색상지정 (색상명/ 색상코드) |
|
alink ="#RGB" |
링크된 텍스트를 눌렀을때의 문자 색상지정(색상명/ 색상코드) |
|
vlink ="#RGB" |
링크된 텍스트를 방문한 후의 문자 색상지정(색상명/ 색상코드) |
|
topmargin="픽셀" |
문서의 위쪽 여백을 지정(숫자) |
|
leftmargin="픽셀" |
문서의 왼쪽 여백을 지정(숫자) |
<pre> </pre> ㅡ> 자바 주석달때 배운거, 이안에서는 스페이스나 특수문자를 원래대로 인식해준다. 그러나 다른 태그들은 이안에서 먹히지 않는다.
<hr> ㅡ> 수평선을 그려줌. <hr> 태그를 사용하게 되면 자동 줄 바꿈이 실행되기 때문에 문단을 구분하는 용도로도 사용됨.
ex) <hr width = "길이" size = "두께" align = "정렬방식">
|
속성 |
설명 |
|
width |
수평선의 길이를 지정(pixel 또는 %) |
|
size |
수평선의 두께를 지정(pixel) |
|
align |
수평선의 정렬방법(left/center/right) |
|
color |
수평선의 색상지정(색상명/ 색상코드) |
|
noshade |
선의 입체감을 제거하여 평면 느낌으로 적용 |
<hn> 제목 </hn> ㅡ> n(1~6까지)에 따라 글씨 크기 바뀜. 적을수록 커진다 . ㅡ> 이것두 align은 이용하여 위치지정할수있음.
<p> </p> ㅡ> 단락이 시작하는 곳이나 단락이 끝나는 곳에 넣어서 단락을 구분하는 역할. <p>태그는 </p>태그를 사용하지 않아도 상관 없다.
<p> 안에서도 align을 쓸수있다.
ex) <p align="정렬방식">텍스트</p>
정렬방식 ㅡ> left, center, right
</br> ㅡ> lin break의 약자로 라인을 바꿔주는 역할을 함.
단독으로 쓰이기 때문에 </br> 로 써준다.
<nobr> </nobr> 보통 창의 폭에 맞추어서 텍스트를 자동적으로 줄에 맞게 바꾸지만 <nobr>을 사용하면 그 안에 입력된 텍스트는 줄이 바뀌지 않고 한 줄로 표시된다.
<p> 와 <br>의 차이점으론, <br>은 단순히 줄만 바꾸지만, <p>는 줄바꿈과 동시에 빈칸 한줄을 생성하여 단락 구분까지 해준다. 따라서 <br>태그를 2번 사용한 효과를 볼수있다. 그러나 <p>는 한번만 인식되고, <br>은 단순 줄바꿈이기 때문에 여러번 사용해도 먹힌다.
align = "left" or "right" or "center" ㅡ> 표(table)의 셀안에 위치하는 글자나 이미지 등의 내용의 수평위치 조절. default값은 center임.
ex) <h2 align = "center">
<center> </center> ㅡ>문단을 가운데로 정렬시키는 기능.
</center>태그를 만날 때까지 모두 가운데로 정렬.
<div> </div> ㅡ> 블록 안 컨텐츠의 위치를 지정.
<div> 태그로 감싼 블록에 align 속성을 적용하면 블록 안에 텍스트나 이미지 등의 위치를 left(왼쪽 정렬/기본값) , center(가운데 정렬), right(오른쪽 정렬) 중 어느 하나로 지정할 수 있다.
ex) <div align = "left"> 이것은 문단 전체가 왼쪽으로 간다. </div>
<TABLE> </TABLE> : 이 태그들은 테이블의 영역을 선언하는 태그로서 테이블의 처음과 끝을 지정. 실제로 테이블의 모양을 만드는 태그들은 이 블록의 내부에 포함되어야 함.
<tr> </tr> ㅡ> 표안에 행의 시작과 끝을 정의
<tr>은 행이므로 정렬방식은 valign = "top" "middle" "bottom"
★★★★★★★★★★★★중요한 정보★★★★★★★★★★★★★★
만약 td안에서 테이블을 하나만든후 그냥 글씨는 왼쪽에 정렬하고
테이블은 오른쪽에 정렬하면 글씨가 위로 쫌 뜬다.
그래서 middle을 이용해 문자를 중간으로 하고싶어도
그안에 테이블이 있다면 테이블만 먹혀버린다.
따라서 그냥 셀안에 글씨는 middle을 이용하여 가운데 정렬 할 수 있지만,
테이블과 같이 있을땐 글씨는 먹히지 않는다.
<td> </td> ㅡ> 행안에 칸을 정의
<td>는 열이므로 정렬방식은 align = "left" "center" "right"
<th> </th> ㅡ><td>와 같은기능으로 행안의 열을 정의하고(칸의 개수), 다른점은 굵은 문자열을 출력한다.
★★★★★★★★★★★★중요한 정보★★★★★★★★★★★★★★
<tr>태그와 <td>태그에 서로 모두 height, width속성이 지정되어 있으면 <td>속성 값이 저용됨. 이유는 <td>태그가 더 안쪽에 있으므로 더 나중에 적용되기 때문.
때문에 혼란을 일으킬 수 있으므로 width와 height 속성은 <td> 태그에만 사용하는 것이 좋다.
border ㅡ> 표의 테두리를 결정한다. 숫자를 할당하면 해당 숫자의 테두리가 그려진다.
width ㅡ> 표 전체 혹은 각 셀의 폭을 정한다. (퍼센테이지 쓰면 해당 테이블 안에서의 점유율이됨. )
height ㅡ> 표 전체 혹은 각 셀의 높이를 정한다.
cellspacing ㅡ> 셀과 셀 사이의 여백을 정한다.
cellpadding ㅡ> 셀 안의 내용과 셀의 경계와의 여백을 정한다.
align ㅡ> 표 혹은 셀 내용의 정렬 위치를 정한다. (left /light / center)
bordercolor ㅡ> 표 혹은 셀의 테두리 색을 정한다.
bordercolorlight ㅡ> 표 혹은 셀의 테두리에 입체감 효과를 넣는다. 위쪽과 오른쪽의 테두리에 영향을 준다.
bordercolordark ㅡ> 표 혹은 셀의 테두리에 입체감 효과를 넣는다. 왼쪽과 아래쪽의 테두리에 영향을 준다.
bgcolor ㅡ>표 혹은 셀의 배경색을 정한다.
background ㅡ> 표 혹은 셀의 배경그림을 지정한다. 그림의 경로를 적어준다.
valign ㅡ> 셀 내용의 상,하 정렬위치를 정한다. top, middle , bottom이 있다.
rowsapn ㅡ> 한 행 이상의 셀을 합칠때 사용.
colspan ㅡ> 한 열 이상의 셀을 합칠때 사용.
nowrap ㅡ> 이 속성을 주면 자동 줄바꿈을 하지 못한다.
----------------table 바깥 테두리의 표시 방법---------------------
|
void |
바깥 테두리 없음 (기본값) |
|
above |
위만 |
|
below |
아래만 |
|
hsides |
상하만 |
|
vsides |
좌우만 |
|
lhs |
좌측만 |
|
rhs |
우측만 |
|
box |
바깥 테두리 모두 |
|
border |
바깥 테두리 모두 |
---------------------------table 셀 경계선 표시 방법----------------------------------
|
none |
경계선 없음 (기본값) |
|
groups |
thead, tfoot, tbody, colgruop,col의 경계선 |
|
rows |
행 사이의 경계선 |
|
cols |
열 사이의 경계선 |
|
all |
모든 경계선 |
groups(이 값은 thead를 지정하지 않으면 효과가 없다.)
여기서 tip!!!!!!!!!!!
테이블의 테두리의 선을 바깥 위아래만 지정하고싶다면,
frame의 hsides와 rules의 none을 같이 사용하면 됨!!!
ex) <table frame = "hsides" rules = "none">
-----------------------<font>-----------------------
|
속성 |
설명 |
|
face |
글꼴 이름을 지정 |
|
size |
글자 크기를 1 ~ 7사이의 숫자로 지정
1이가장 작고 7이 가장크다!! |
|
color |
글자의 색상을 지정 |
|
title |
글꼴의 설명 텍스트를 지정 |
|
용도 |
태그 |
설명 |
|
진하게 |
<b> </b>
<strong></strong> |
강조하고자 하는 텍스트를 다른 글자보다 굵게 표현 |
|
이탤릭체 |
<i></i>
<em></em> |
태그안에 글자를 이탤릭체로 표현 |
|
밑줄 |
<u> </u> |
태그안에 글자를 밑줄 친 글자로 표현 |
|
아래 첨자 |
<sub> </sub> |
태그 안에 글자를 아래 첨자로 표현 |
|
위 첨자 |
<sup> </sup> |
태그 안에 글자를 윗 첨자로 표현 |
|
조금 더 크게 |
<big> </big> |
태그 안에 글자를 현재 설정된 크기보다 2포인트 정도 크게 표현 |
|
조금 더 작게 |
<small> </small> |
태그 안에 글자를 현재 설정된 크기보다 2포인트 정도 작게 표현 |
|
취소선 |
<strike></strike> |
태그안에 글자에 삭제 표시를 나타냄 |
|
타자기 체 |
<tt> </tt> |
가로 세로 비율이 고정되어 있는 글꼴로 표현 |
<blockquote> 들여쓸 내용 </blockquote> ㅡ> 다른글보다 들여써짐.
<address> 제작자의 정보나 주소 </address> ㅡ>이태릭체로(기울어져서) 나타남.
-------목록에 관련된 태그------
|
태그 |
설명 |
|
<ul> |
순서가 없는 목록 (Unordered List) |
|
<ol> |
순서가 있는 목록 (Ordered List) |
|
<dl> |
정의 목록 (Definition LIst) |
이들에 대한 실제 내용을 나타낼 때 사용하는 태그는 <li>이다.
----------------------------<ul>------------------------------
사용법.
<ul type = "circle">
<li> 고양이
<li> 바둑이
<li> 거북이
</ul>
|
속성 |
속성값 |
설명 |
|
type |
disc |
검은 원 |
|
circle |
흰 원 |
|
square |
사각형 |
--------------------------<ol>-------------------------
사용법.
<ol type = "a" start = "2">
<li>바둑이
<li>고양이 ㅡ> a,b,c로 종류로 갈껀데
<li>거북이 b부터 시작하겠단뜻.
</ol>
<ol type ="I">
<li value = "2"> 사과
<li> 포도 ㅡ>로마 대문자로 갈껀데 시작을 II로 하겠단 뜻.
<li>바나나
</ol>
|
속성 |
속성값 |
설명 |
|
type |
1 |
기본값으로 숫자로 나타낸다. |
|
a |
영어 소문자 |
|
A |
영어 대문자 |
|
i (소문자 아이) |
소문자 로마 숫자 |
|
I(대문자 아이) |
대문자 로마 숫자 |
|
disc |
검은 원 |
|
circle |
흰 원 |
|
square |
사각형 |
|
start |
숫자 |
type 속성이 1이나 i나 I인 경우
시작할 숫자 지정 |
-----------------------------용어의 정의를 목록으로---------------------
<dl>~</dl> 정의할 부분 전체 설정
<dt>~</dt> 정의하고자 하는 용어를 감싼다.
<dd>~</dd> 용어의 설명을 감싼다.
ex)
<dl>
<dt>인터넷</dt>
<dd>알파넷에서 시작된 세계 최대 규모의 컴퓨터 통신망 </dd>
</dl>
-------------------------------img------------------------------
이미지 태그.
형식 ㅡ>
<img src = "경로">
이때 경로에는 상대경로와 절대경로가 있는데, 상대경로는 해당 html 문서가 있는 디렉토리에
이미지 파일이 있을 경우 <img src = "첫박.jpg"> 이런식으로 입력하면 되고,
절대경로는 디렉토리를 하나하나 다 써주어야 한다.
<img src ="C:\Users\김창호\Desktop\네이트\첫박.jpg"> 이런식으로 입력하면 된다.
이미지에 설명을 나타내는 속성 alt
<img src = "C:\Users\김창호\Desktop\네이트\첫박.jpg" alt = "네이트입니다.">
라고 입력하였을 경우, 첫박 이미지에 마우스를 갖다대면, '네이트입니다' 라는 조그만 박스가 뜬다.
이미지 또한 border를 이용하여 두께를 지정해 줄수 있다.
|
태그 |
속성 |
속성값 |
설명 |
|
IMG |
src |
이미지 파일 경로 |
HTML 문서에 표시할 이미지 파일의 경로를 지정 |
|
align |
문자열 |
이미지 정렬 방식을 지정 |
|
alt |
문자열 |
이미지 설명 문장을 지정 |
|
width |
숫자 |
이미지 폭 지정 |
|
height |
숫자 |
이미지 높이 지정 |
|
border |
숫자 |
이미지 테두리 두께 지정 |
|
hspace |
숫자 |
이미지 좌우 여백 지정 |
|
vspace |
숫자 |
이미지 상하 여백 지정 |
align에는 top/middle/bottom 과 left/right가있는데 left/right는 말그대로 이미지의 위치가
왼쪽끝 오른쪽끝으로 지정되고, top/middle/bottom같은 경우는 그림의 맞추어 옆에 글씨가 어디에 쓰여지는지 지정된다.
---------------------------HyperLink------------------------
|
태그 |
속성 |
속성값 |
설명 |
|
A |
href |
문자열 |
하이퍼링크 연결로 이동하고자 하는 곳의 위치를 지정 |
|
name |
문자열 |
하이퍼링크에 이름을 지정 |
|
target |
문자열 |
하이퍼링크를 클릭했을 때 href 속성에 지정된 URL이 보여질 위치를 지정 |
|
title |
문자열 |
하이퍼링크에 대한 설명을 표시 |
사용법,
<a href = http://www.naver.com> 네이버로 가기</a>
이경우 '네이버로 가기' 란 글이 뜨고, 이 글을 누르면 naver로 가는것.!
'네이버로 가기' 부분에는 이미지도 들어갈수있고, 파일도 들어갈수있음!!
----------------------------링크의 색상 지정---------------------------------
링크의 색상은 <ody>부분에 지정하는것!!!!!
<body link = "색상" vlink ="색상 alink ="색상"></body>
link = 누르기 전 색상(원래 색)
vlink = 방문 후 색상 (한번이라도 방문하면 바뀌는 색상)
alink = 마우스를 누르고 있는 상태에서의 색상.
------------------현재 html문서의 지정된 위치로 링크를 설정하는 name 속성---------------
<a href = "#핸드폰">간략 단어 (핸드폰)</a>
<a name ="핸드폰"> 핸드폰에 대한 자세한 설명으로 이동하였음. </a>
<a name ="핸드폰"> </a>
-----------------------------href taget-----------------------
링크 결과를 다른 창에 열기.
원래 href는 현재 창이 링크된 창으로 바로 넘어가지만,
target을 이용하면 현재 창에서 또 다른 창을 띄어 링크된다.
사용법,
<a href = "link.html" target = "_blank"> 이동하기 </a>
