HTML
1. 구조
<html>
<head>
<title></title> // 웹페이지 이름 정의
</head>
<body>
</body>
</html>
2. Tag들
<pre></pre> // html문서를 워드처럼 사용
ex> 안녕하세요. 나는 나예요.
<h1 align = "center"></h1> // 주제 삽입(크기는 숫자가 작을수록 큼 1~6까지 있음). 옵션은 중앙정렬
ex> <h1>졸려 자고싶다.</h1>
<hr noshade size = "3" color = "red" width = "30%"> // 수평선 긋기 noshade옵션은 수평선에 음영넣지 않기. 크기는 3 색깔은 빨강.
ex> <hr noshade size = "3">
<p align = "right"></p> 단락나누기 PS. 문단 위아래로 <br> 효과가 들어감.
ex> <p>대성이짱</p>
<b></b> 글자 굵게하기 이렇게
ex> <b>4조 화이팅</b>
<i></i> 이탤릭체. 글자 기울게하기 이렇게
ex> <i>글자가 기운다</i>
<u></u> 글자에 밑줄긋기 이렇게
ex> <u>밑줄을 그어라~</u>
<s></s> 글자 중간으로 밑줄긋기
스페이스바 효과 한칸 뛰기
< p > < p > 을 나타낸다.
<blockquote> 단락 들여쓰기
ex> <blockquote><p>자야지</p></blcokquote>
<TT></TT> 타자체로 출력되도록 지정
<SUB></SUB> 아래첨자로 출력되도록 지정
<SUP></SUP> 위 첨자로 출력되도록 지정
<center></center> 센터 정렬시 사용
<big></big> 글자를 한단계 크게함. 중첩가능
<small></small> 글자를 한단계 작게함. 중첩가능
<font color = "red" face = "돋음" size = "5" weight = "100~900">
<body background = "kosta.jpg" bgcolor = "black" text = "yellow" link = "green" alink = "red" vlink = "magenta">
<span></span> span 사이의 문자열 영역에 style지정 가능. <div></div>도 같은 효과
ex> <span style = "color:red">red</span>
<img src = "bed.jpg" align = "center" border = "1" height = "50%" width = "500">
align : left, right, left, right, bottom PS. center 는 에러!
<ol start = "c || ii || 3" type = "a || i || 1"></ol>
<ul type = "circle || square || disc"></ul>
<li value = "5">
<table align = "left || right" bgcolor = "red" border = "1" height = "500" width = "500"
cellpadding = "0" cellspacing = "0" bordercolor = "red">
PS. cellpadding // 셀 내의 여백 크기 지정 , cellspacing // 셀외곽 크기지정
<tr align = "center || right || left" valign = "top || middle || bottom" bgcolor = "red">
<td(th) align = "center || right || left" valign = "top || middle || bottom" bgcolor = "red"
height = "500" width = "500" colspan = "2" rowspan = "2" nowrap>
PS. nowrap // 셀 내의 내용은 다음 라인으로 넘어갈 수 없음을 지정
<bgsound balance = "-10000 || 10000" loop = "-1 || 0 || n" src = "text.mid" volume = "-10000 || 0">
<a name = "앵커이름"></a>
<a href = "#앵커이름 || URL || URL#앵커이름" target = "_top || _blank || _self || _parent"></a>
이미지 맵 영역을 나눠서 링크 꾸미기
<img src = "1-28.jpg" usemap = "#mainmap">
<map name = "mainmap">
</map>
<frameset cols = "30%,*" rows = "30%,*" border = "20" bordercolor = "red" frameborder = "yes"></frameset>
frameborder // 프레임 사이의 경계선의 존재 여부 지정 yes , no
border // 프레임 사이의 경계선의 굵기 지정
<frame bordercolor = "red" frameborder = "yes" marginheight = "100" marginwidth = "100" name = "daesung"
PS. 프레임은 바디 안에서 사용할 수 없다. 바디 안에서 사용가능 한건 iframe-x
<iframe-x bordercolor = "red" frameborder = "yes" marginheight = "100" marginwidth = "100" name = "daesung"
<form action = "1-28.htm" method = "get || post" name = "fm" enctype = "encodingType" target = "windowName"></form>
enctype // 폼의 데이터 전송 시 암호화 방법 지정.
target // CGI 프로그램에 의하여 전송되는 데이터를 출력할 윈도우 지정.
<input type = "text || password" maxlength = "8" name = "son" size = "10" value = "초기값지정">
<input type = "button || submit || reset || image" name = "son" value = "버튼이름">
PS. 이미지 버튼 만들기
ex> <input type = "image" src = "button.gif" name = "son" value = "전송">
<button name = "button1" type = "reset"><img src = "button.gif" align = "middle">reset</button>
<input type = "checkbox || radio" checked name = "son" value = "이름">
// 그룹으로 묶고 싶은 것끼리는 네임을 같게 해주어야한다.
<select name = "son" multiple size = "1"> // multiple 여러개 지정가능 size 보일 수 있는 항목 수
<option value = "값" selected> // 초기 선택 값
</select>
<textarea cols = "30" rows = "20" name = "son" wrap = "off || hard || soft">
// cols, rows 텍스트 영역의 세로 가로 길이 wrap 텍스트의 자동 줄바꿈 처리지정.
******************** 참고 사항 ***********************
meta태그
ex> <meta http-equiv = "refresh" content = "3; url = hello.html">
3초 후에 hello.html 파일로 이동합니다.
★marquee태그
<html>
<head><title>marquee</title></head>
<body>
<h3>marquee</h3>
<marquee direction=up width=200 height=60 scrollamount=1 onmouseover="this.stop()" onmouseout="this.start()">
<!-- 마퀴태그 안에 정의한 내용이 위로 1씩 올라간다, 마우스를 올리면 멈추고, 떼면 다시 움직인다 -->
<table width=200 border=0 cellspacing=3 cepllpadding=0>
<tr>
</tr>
<tr>
</tr>
</table>
</marquee>
</body>
</html>
**********************************************************
CSS
css 사용예1
<head>
<style>
h4 { color:red; font-style:oblique }
</style>
</head>
css 사용예2
<body>
<h4 style = "color:red; font-size:20pt"></h4>
</body>
css 사용예3
<head>
<style>
.help { color:blue; font-size:20pt }
h2.myclass { color:yellow; font-size:40pt }
</style>
</head>
<body>
<p class = "help"></p>
<h2 class = "myclass"></h2>
</body>
css 사용예4
<head>
<style>
#help { color:blue; font-size:20pt }
#myclass { color:yellow; font-size:40pt }
</style>
</head>
<body>
<p id = "help"></p>
<h2 id = "myclass"></h2>
</body>
css 사용예5
sheet.css
body { background:yellow; }
<head>
<style>
@import url(sample.css); or @import "sheet.css"
</style>
</head>
or
<head>
<link rel = "stylesheet" type = "text/css" href = "sheet.css">
</head>
*********** 스타일은 상속된다!!!!!!!!!!!
<html>
<head><title>예제 2-8</title>
<style type="text/css">
body {color:blue;font-size:30pt}
p {color:inherit; font-size:50%}
</style>
</head>
<body>
<h3>스타일 상속 예제2</h3>
<hr noshade>
<p>15pt 글자 </p>
<p style="font-size:30pt">30pt 글자</p>
</body>
</html>
*******************************************
body{ margin: 2em } // 전체적용
body{ margin: 1em 2em } // 1em: top,bottom 2em: left, right
body{ margin: 1em 2em 3em } // 1em: top 2em: left, right 3em: bottom
body{ margin: 1em 2em 3em 4em } // 1em: top 2em: right 3em: bottom 4em:left
ex>
ul{ background:blue;
margin:12px;
padding:3px 6px 9px 12px;
}
li{ color : black;
background: yellow;
margin:12px;
padding:12px 0px 12px;
list-style:none; //리스트 스타일 o ㅁ 등을 없애준다. list-style:square
}
li.withborder{ border-style:dashed;
border-width:thick;
border-color:red;
}
</style>
</head>
<body>
<h3>박스모델예제</h3>
<ul>
<li>보더가없는 요소</li>
<li class="withborder">보더가 있는 요소</li>
</ul>
</body>
</html>
*************************************************
★cursor
<html>
<head><title>예제 2-16</title></head>
<body>
<h3>커서 예제</h3>
<hr noshade>
<p style="cursor:crosshair">여기에 커서가 오면 십자모양이 됩니다.</p>
<p style="cursor:hand">여기에 커서가 오면 손모양이 됩니다.</p>
<p style="cursor:help">여기에 커서가 오면 도움말 커서가 됩니다.</p>
</body>
</html>
***************************************************
<style type="text/css">
body{ color:RGB(255,255,0); // 글자색
background-color:black; // 배경 검은색
background-image:url("binu.jpg"); // 배경이미지
background-attachment:fixed; // 배경 고정
background-position:center; // 배경 위치 중앙
background-repeat:repeat-y; // 배경 세로로 반복
}
p{ color:white; background-color:blue }
</style></head>
* 글자색 지정은 font-color:red -> color:red 을 사용한다.
기타 알아야할 스타일들..
z-index = 1 // 숫자가 큰 객체가 제일 앞으로 오고 작은게 제일 뒤로간다.
visibility = visible | hidden | collapse // 객체를 보이게 하거나 안보이게한다. collapse는 테이블의 열이나 행 전체가 안보이게한다.
position = absolute | fixed | relative // fixed는 절대위치고정 absolute도 절대 위치 고정 relative는 상대위치고정(프레임을움직이면 위치가 변함)
ex> position : absolute;
left:0px; top:80px; width:100px; height:40px;
border-style = inset | outset | dotted | dashed // 보더 스타일을 지정한다.
border-color = red // 보더 색깔을 지정한다.
border-width = thick | thin // 보더 굵기를 지정한다. thick 굵게 thin 얇게
*********************************************************************************
<style type="text/css">
.alpha { font:inherit; background:yellowgreen;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=5,finishopacity=100,style=1);
} // 이미지를 흐려지게 하는 효과
.basicimage { font:inherit; background:yellowgreen; width:inherit;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=1, mirror=0, invert=0, opacity=0.15, rotation=0);
} // x-ray, 반사, 투명도, 보색 효과 등의 효과
.blur {
font:inherit; width:inherit;
filter: progid:DXImageTransform.Microsoft.Blur(Strength=7, Direction=0);
} 번지게 하는 효과
.dropshadow {
font:inherit; width:inherit;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=10, Color='Tomato', Positive='true');
} 입체적인 효과
.emboss {
font:inherit; background:yellowgreen; width:inherit;
filter:progid:DXImageTransform.Microsoft.Emboss();
} gray 스케일로 엠보싱(양각) 효과
.engrave {
font:inherit; background:yellowgreen; width:inherit;
filter:progid:DXImageTransform.Microsoft.Engrave();
} gray 스케일로 음각 효과
.glow {
font:inherit; width:inherit;
filter:progid:DXImageTransform.Microsoft.Glow(color=red, Strength=10);
} 불타는 듯한 효과
.fliph {
font:inherit; background:yellowgreen; width:inherit;
filter: fliph();
} 좌우 대칭 효과
.flipv {
font:inherit; background:yellowgreen; width:inherit;
filter: flipv();
} 상하 대칭 효과
.shadow {
font:inherit; width:inherit;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=gray, Direction=135, Strength=32);
} 그림자 효과
.wave {
font:inherit; background:yellowgreen; width:inherit;
filter: progid:DXImageTransform.Microsoft.Wave(Add=false, Freq=2, LightStrength=5, Strength=5);
} 물결치는 효과
.xray {
font:inherit; background:yellowgreen; width:inherit;
filter: Xray();
} x-ray 사진 효과
</style>
</head>
<body>
<hr noshade>
<div class="alpha">Alpha Filter</div><br>
<div class="basicimage">BasicImage</div><br>
<div class="blur">Blur</div><br>
<div class="emboss">Emboss</div><br>
<div class="engrave">Engrave</div><br>
<div class="dropshadow">DropShadow</div><br>
<div class="fliph">FlipH</div><br>
<div class="flipv">FlipV</div><br>
<div class="glow">Glow</div><br>
<div class="shadow">Shadow</div><br>
<div class="wave">Wave</div><br>
<div class="xray">Xray</div><br>
</body>
</html>
댓글을 달아 주세요