반응형
# Html이란
Hyper Text Markup Language
웹브라우져에 그림이나 텍스트를 표현할 수 있도록 해주는 언어이다.
# html파일 작성하기
[ex]
<html>
<head><title>제목</title></head>
<body>
내용1
내용2
</body>
</html>
# 태그란
'<' 와 '>'로 묶인 명령어를 의미
<태그명 속성="값" 속성="값"> 적용하려는문장 </태그명>
# 태그의 종류
줄바꿈 <br>
단락구분 <p>
글꼴관련 <font color="red" size="1~7" face="궁서체">
배경색상 <body bgcolor="green">
단락제목 <h1> ~ <h6>
문단정렬 <태그명 align="left|center|right">
가운데정렬 <center>
선긋기 <hr>
입력한대로보여주기 <pre>
이미지 <img arc="이미지파일명">
목록 <ol> <li> <ul>
연결 <a href="url|파일명">
테이블 <table> <tr> <td>
화면나누기 <frame>
화면속의화면 <iframe>
# 줄바꿈 <br> , 단락구분 <p>
[ex]
<html>
<head><title>제목</title></head>
<body>
내용1<br>
내용2
내용3<p>
내용4
</body>
</html>
# 글꼴관련 <font color="red" size="1~7" face="궁서체">
배경색상 <body bgcolor="green">
[ex]
<html>
<head><title>제목</title></head>
<body bgcolor="skyblue">
<font color="red">내용1</font><br>
<font size="7">내용2</font><br>
<font face="궁서체">내용3</font><br>
<font color="green" size="7" face="궁서체">내용4</font>
</body>
</html>
# RGB색상
Red Green Blue 빛의 3요소라 불리는 세가지 색상을 혼합시켜 만든 색상
16진수로표기
표현방식은 '#'기호를 붙이고 각 색상을 ff로 표현해서 모든색상을 혼합시키면 흰색이
#ffffff
모든색상이 0이면 검정색을 표현할 수 있다.
#000000
[ex]
<html>
<head><title>제목</title></head>
<body>
<font size="7" color="#ff0000">내용1</font><br>
<font size="7" color="#00ff00">내용2</font><br>
<font size="7" color="#0000ff">내용3</font><br>
</body>
</html>
# 단락제목 <h1> ~ <h6>
[ex]
<html>
<head><title>제목</title></head>
<body>
<h1>내용1</h1>
<h2>내용2</h2>
<h3>내용3</h3>
<h4>내용4</h4>
<h5>내용5</h5>
<h6>내용6</h6>
</body>
</html>
# html의 주석문 <!-- 주석처리문장 -->
[ex]
<html>
<head><title>제목</title></head>
<body>
<h1>내용1</h1>
<h2>내용2</h2>
<!-- <h3>내용3</h3> -->
<h4>내용4</h4>
<h5>내용5</h5>
<h6>내용6</h6>
</body>
</html>
# 문단정렬 <태그명 align="left|center|right">
[ex]
<html>
<head><title>제목</title></head>
<body>
<h1>내용1</h1>
<h2 align="center">내용2</h2>
<h3 align="right">내용3</h3>
</body>
</html>
[ex]
<html>
<head><title>제목</title></head>
<body>
내용1<br align="center"> <!-- 적용이 되질 않는다. -->
내용2<p align="center">
내용3
내용4
</body>
</html>
#가운데정렬 <center>
[ex]
<html>
<head><title>제목</title></head>
<body>
<center>
<h1>내용1</h1>
<h2>내용2</h2>
<h3>내용3</h3>
<h4>내용4</h4>
<h5>내용5</h5>
<h6>내용6</h6>
</body>
</html>
# 입력한대로보여주기<pre>
[ex]
<html>
<head><title>제목</title></head>
<body bgcolor="gray">
<pre>
<h1>
<font color="brown">@(..)@</font> <font color="pink">()()</font>
<font color="brown"> ( Y )</font> <font color="pink">(_._)</font>
</h1>
</pre>
</body>
</html>
# 테이블 작성하기
선두께 <table border="선두께">
선색상 <table bordercolor="색상">
테이블배경색상 <table bgcolor="색상">
테이블가로 <table width="크기">
테이블세로 <table height="크기">
테두리와 칸과의 간격 <table cellspacing="간격">
[ex]
<html>
<head><title>제목</title>
</head>
<body>
<table bgcolor="black" border="2" cellspacing="0" width="300" height="300">
<tr><td>1<td>2</tr>
<tr><td>3<td>4</tr>
<tr><td>5<td>6</tr>
</table>
</body>
</html>
# 칸합치기 <td colspan="칸수">
[ex]
<html>
<head><title>제목</title>
</head>
<body>
<table bgcolor="black" border="2" cellspacing="0" width="300" height="300">
<tr><td colspan="2">1</tr>
<tr><td>2<td>3</tr>
<tr><td>4<td>5</tr>
</table>
</body>
</html>
# 줄합치기 <td rowspan="줄수">
[ex]
<html>
<head><title>제목</title>
</head>
<body>
<table bgcolor="black" border="2" cellspacing="0" width="300" height="300">
<tr><td rowspan="2">1<td>2</tr>
<tr><td>3</tr>
<tr><td>4<td>5</tr>
</table>
</body>
</html>
# CSS
[sy] <style type="text/css">
태그명 { 속성:값; 속성:값; ... }
.클래스명 { 속성:값; 속성:값; ... }
</style>
css속성들
테두리두께 border-width:두께;
테두리색상 border-color:색상;
테두리모양 border-style:solid;
가로 width:크기;
세로 height:크기;
글자색상 color:색상;
글자정렬 text-align:center;
배경색상 background-color:색상;
[ex]
<html>
<head>
<title>제목</title>
<style type="text/css">
td {
border-width:2;
border-color:green;
border-style:solid;
width:50;
height:50;
color:green;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr><td>1<td>2</tr>
<tr><td>3<td>4</tr>
<tr><td>5<td>6</tr>
</table>
</body>
</html>
반응형
'공부거리 > HTML' 카테고리의 다른 글
| input 박스 숫자만 입력받기 (0) | 2011.12.23 |
|---|---|
| [Script]팝업 띄우기 (0) | 2011.12.08 |
| 스크립트로 추정되는 정규식(?) (0) | 2011.11.10 |
| [JavaScript] 알아두면 좋은 함수 (0) | 2011.11.10 |
| html 태그 정리 (0) | 2011.11.07 |