Contents
<br>은 닫는게 없다. 성능은 줄바꿈이다.
ex)<br/> 이렇게 쓸 수도있다.
<p>는 그 문장을 띄우는 성능인 거같다. blockTag라고 불린다.
<DIV> 다른 것들과 구분 짓기위해 쓰는 것이다.
<DIV>마바사아</DIV> ex)DIV안에 쓰는 마바사아: 엘리먼트라고 한다. 속성을 준다.
<b><b> = 두껍게 표시하라
<pre></pre>=입력한 내용을 그래도 표시
h1>h1입니다.(200%)</h1>
<h2>h2입니다.(150%)</h2>
<h3>h3입니다.(120%)</h3>
<div><b>h4입니다.(100%)<b></div>
<h5>h5입니다.(80%)</h5>
<h6>h6입니다.(70%)</h6>
<i></i>==는 기울임꼴
<em></em>=== 강조표시<p><i> i태그는 기울임꼴 입니다.</i></p>
<p><em>em 태그는 강조 표시를
합니다. </em></p><p><small> small 태그는 작은 글자를 표시합니다</small></p>
<p><mark> mark 태그는 음영</mark><p>
<p><strong>strong 태그는 문자를 강조합니다</strong></P>
<p>X<sub>2</sub>(아래점자)와
Y<sup>2</sup>(위첨자입니다.</p>
<p>ins 태그는 <ins>추가한 내용을 밑줄</ins>로 표시합니다</p>
<p><del> de 태그는 취소선을 표시합니다</del></p><h2>특수문자 표기</h2>
<p>space : (공백)</p>
<p>less than : </p>
<p>greater than : ></p>
<p>ampersand : &</p>
<p>cent : ¢</p>
<p>pound : £</p>
<p>yen :¥</p>
<p>euro : €</p>
<p>section : §</p>
<p>copyright : ©</p>
<p>registerd trademark: ®</p><p><span>span 태그</span>는 인라인 태그라고 합니다</p><h2>공간 분할 태그</h2>
<div style="border : 1px dotted red">
<h2>백두산 호랭이</h2>
<hr>
<p style = " color : blue;">높은 산의 숲이 우거진 곳에서 사는 고양잇과의 포유루로
<span style="color : red; font-weight : bold">한국 호랭이</span>라고도 한다.
</div><img src="img/123.jpg"
width="300"
height="200" alt="짱구사진">
</div>
<img src="img/123.jpg"
width="400"
height="300" alt="짱구사진">
<br>이미지를 표시합니다.<figure>
<img src="img/123.jpg" width="100" height="100" alt="강아지사진">
<figcaption>[사진1-짱구사진]</figcaption>
</figure><h1>목록 표시하기</h1>
<h3>순차적 목록(ordered List)<h3>
<hr>
<ol start="50" reversed>
<li> Cafe latte</li>
<li>Amricano</il>
<li>Espresso</li>
</ol>
</body>
</html><h1>목록 표시하기</h1> //역순
<h3>순차적 목록(ordered List)<h3>
<hr>
<ol type="a" reversed>
<li> Cafe latte</li>
<li>Amricano</il>
<li>Espresso</li>
</ol>
</body>
</html></tr></body>
</html></head>
<body>
<ul>
<li class="pink bgyellow">사과</li>
<li class="red">포도</li>
<li class="green">수박</li>
<li id="바나나">바나나</li>
</ul>
</body>
</html></body>
</html>----------<HTML>은 쌍으로 이룬다.시작해서 <HTML>로 끝난다.
.thm.
.html.
.txt.
<br>은 닫는게 없다. 성능은 줄바꿈이다. ex)<br/> 이렇게 쓸 수도있다. <p>는 그 문장을 띄우는 성능인 거같다. blockTag라고 불린다. <DIV> 다른 것들과 구분 짓기위해 쓰는 것이다. <DIV>마바사아</DIV> ex)DIV안에 쓰는 마바사아: 엘리먼트라고 한다. 속성을 준다. <b><b> = 두껍게 표시하라 <pre></pre>=입력한 내용을 그래도 표시 h1>h1입니다.(200%)</h1> <h2>h2입니다.(150%)</h2> <h3>h3입니다.(120%)</h3> <div><b>h4입니다.(100%)<b></div> <h5>h5입니다.(80%)</h5> <h6>h6입니다.(70%)</h6> <i></i>==는 기울임꼴 <em></em>=== 강조표시
<p><i> i태그는 기울임꼴 입니다.</i></p> <p><em>em 태그는 강조 표시를 합니다. </em></p>
<p><small> small 태그는 작은 글자를 표시합니다</small></p> <p><mark> mark 태그는 음영</mark><p> <p><strong>strong 태그는 문자를 강조합니다</strong></P> <p>X<sub>2</sub>(아래점자)와 Y<sup>2</sup>(위첨자입니다.</p> <p>ins 태그는 <ins>추가한 내용을 밑줄</ins>로 표시합니다</p> <p><del> de 태그는 취소선을 표시합니다</del></p>
<h2>특수문자 표기</h2> <p>space : (공백)</p> <p>less than : </p> <p>greater than : ></p> <p>ampersand : &</p> <p>cent : ¢</p> <p>pound : £</p> <p>yen :¥</p> <p>euro : €</p> <p>section : §</p> <p>copyright : ©</p> <p>registerd trademark: ®</p>
<p><span>span 태그</span>는 인라인 태그라고 합니다</p>
<h2>공간 분할 태그</h2> <div style="border : 1px dotted red"> <h2>백두산 호랭이</h2> <hr> <p style = " color : blue;">높은 산의 숲이 우거진 곳에서 사는 고양잇과의 포유루로 <span style="color : red; font-weight : bold">한국 호랭이</span>라고도 한다. </div>
<h2>이미지 표시하기</h2>
<hr>
<img src="123.jpg" alt="짱구사진">
<p>이미지를 표시합니다.</p>
<img src="img/123.jpg" width="300" height="200" alt="짱구사진"> </div> <img src="img/123.jpg" width="400" height="300" alt="짱구사진"> <br>이미지를 표시합니다.
<figure> <img src="img/123.jpg" width="100" height="100" alt="강아지사진"> <figcaption>[사진1-짱구사진]</figcaption> </figure>
<h1>목록 표시하기</h1>
<h3>순차적 목록(Unordered List)<h3>
<hr>
<ul>
<li> Cafe latte</li>
<li>Amricano</il>
<li>Espresso</li>
</ul>
</body>
</html>
<h1>목록 표시하기</h1>
<h3>순차적 목록(ordered List)<h3>
<hr>
<ol start="50">
<li> Cafe latte</li>
<li>Amricano</il>
<li>Espresso</li>
</ol>
</body>
</html>
<h1>목록 표시하기</h1>
<h3>순차적 목록(ordered List)<h3>
<hr>
<ol type="A" reversed>
<li> Cafe latte</li>
<li>Amricano</il>
<li>Espresso</li>
</ol>
</body>
</html>
<h1>목록 표시하기</h1> <h3>순차적 목록(ordered List)<h3> <hr> <ol start="50" reversed> <li> Cafe latte</li> <li>Amricano</il> <li>Espresso</li> </ol> </body> </html>
<h1>목록 표시하기</h1> //역순 <h3>순차적 목록(ordered List)<h3> <hr> <ol type="a" reversed> <li> Cafe latte</li> <li>Amricano</il> <li>Espresso</li> </ol> </body> </html>
<h2>링크 걸기(a 태그)</h2>
<hr>
<a href="www.w3schools.com">
학교가기
</a>
<a href="test2.html">
<h2>링크 걸기(anchor 태그)</h2>
<hr>
<a href="http://www.w3schools.com"
target="_ blank:>
학교가기
</a>
<br>
<a href="test2.html">
test2.html 파일 보여줘.....
tr은 행이다
tb는 열이다
<h1>테이블 만들기</h1>
<hr>
<table border="1">
<thead>
<tr>
<th>제목 1</th>
<th>제목 2</th>
</thead>
<tboby>
</tbody>
</tr>
<td>내용1</td>
<td>내용2</td>
</table>
<h1>테이블 만들기</h1>
<hr>
<table border="1">
<thead>
<tr>
<th>책제목 </th>
<th>지은이</th>
<th>출판사</th>
</thead>
<tboby>
</tbody>
</tr>
<tr>
<td>입속의 검</td>
<td>기형도</td>
<td>문학과 지성자</td>
</tr>
<tr>
<td>서른,잔치는 끝</td>
<td>최영미</td1>
<td>창작과비평사</td>
</tr>
<tr>
<td>서른,잔치는 시작</td>
<td>최앵미</td1>
<td>비평과창작사</td>
</tr>
<h1>테이블 만들기</h1>
<hr>
<table border="1">
<thead>
<tr>
<th>순번 </th>
<th>표지 </th>
<th>책제목 </th>
<th>지은이</th>
<th>출판사</th>
</thead>
<tboby>
</tbody>
</tr>
<td>1</td>
<td>2</td>
<td>3</td>
<thead>
<td>서른,잔치는 끝</td>
<td>최영미</td1>
<td>창작과비평사</td>
</thead>
<thead>
<td>서른,잔치는 시작</td>
<td>최앵미</td1>
<td>비평과창작사</td>
</table>
- ---------------------------------------------------------\ <h1>테이블 만들기(4행 3열)(열 합치기)</h1> <hr> <table border="1">
</tr>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td colspan="2">2행 2열</td>
</tr>
<tr>
<td colspan="2">3행 1열</td>
<td>3행 3열</td>
</tr>
<h1>테이블 만들기(4행 3열)(행 열 합치기)</h1>
<hr>
<table border="1">
</tr>
<tr>
<td rowspan="2">1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td colspan="2">2행 2열</td>
</tr>
<tr>
<td colspan="2">3행 1열</td>
<td>3행 3열</td>
</tr>
<h1>방송국 만들기(3행 tr(3개) 4열 td(4개)</h1>
<hr>
<table border="1">
<tr>
<td colspan="4">지상파 방송국</td>
</tr>
<tr>
<td rowspan="2">채널</td>
<td>mbc</td>
<td>kbs</td>
<td>sbs</td>
</tr>
<tr>
<td>11</td>
<td>9</td>
<td>5</td>
</tr>
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<html>
<body>
<h1>슬랭덤크</h1>
<hr>
<table border="1">
<thead>
<tr>
<th>순번 </th>
<th>표지 </th>
<th>책제목 </th>
<th>지은이</th>
<th>출판사</th>
</tr>
<td>1</td>
<td><a href="file:///C:/Users/GGG/Desktop/%EC%83%88%20%ED%8F%B4%EB%8D%94/%EC%8A%AC%EB%9E%91%EB%8D%A4%ED%81%AC%201%EA%B6%8C.html"><img src="img/s_01.jpg"></td>
<td><ins><a href="file:///C:/Users/GGG/Desktop/%EC%83%88%20%ED%8F%B4%EB%8D%94/%EC%8A%AC%EB%9E%91%EB%8D%A4%ED%81%AC%201%EA%B6%8C.html">슬램덩크 1권</ins></td>
<td>이노우에</td>
<td>대원</td>
</thead>
<thead>
<td>2</td>
<td>file:///C:/Users/GGG/Desktop/%EC%83%88%20%ED%8F%B4%EB%8D%94/%EC%8A%AC%EB%9E%91%EB%8D%A4%ED%81%AC%202%EA%B6%8C.html"><img src="img/s_02.jpg"></td>
<td><ins><a href="file:///C:/Users/GGG/Desktop/%EC%83%88%20%ED%8F%B4%EB%8D%94/%EC%8A%AC%EB%9E%91%EB%8D%A4%ED%81%AC%202%EA%B6%8C.html">슬램덩크 2권</ins></td>
<td>이노우에</td>
<td>대원</td>
</thead>
<thead>
<td>3</td>
<td><a href="file:///C:/Users/GGG/Desktop/%EC%83%88%20%ED%8F%B4%EB%8D%94/%EC%8A%AC%EB%9E%91%EB%8D%A4%ED%81%AC%203%EA%B6%8C.html"><img src="img/s_03.jpg"></td>
<td><ins><a href="file:///C:/Users/GGG/Desktop/%EC%83%88%20%ED%8F%B4%EB%8D%94/%EC%8A%AC%EB%9E%91%EB%8D%A4%ED%81%AC%203%EA%B6%8C.html">슬램덩크 3권</ins></td>
<td>이노우에</td>
<td>대원</td>
</thead>
</table>
</body>
</html>
form은 입력 양식이다...
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<html>
<body>
<form>
<input type="txt" value="홍길동">
</body> </html>
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<html>
<body>
<form>
이름:<input type="txt">
</body>
</html>
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<html>
<body>
<form>
이름: <input type="txt" placeholder="이름을 입력하세요">
<br>
전화번호: <input type="txt" placeholder="전화번호를 입력하세요">
<br>
<input type="button" value="등록">
</form>
</body>
</html>
<HTML>
<HEAD>
<TITLE>Test</TITLE>
</head>
<html>
<body>
<a href="test2.html>
test2.html로 가기
<form action = "test2.html">
<input type="txt" name="txt_name" placeholder="이름을 입력하세요"><br>
<input type="txt" name="txt_tel" placeholder="전화번호를 입력하세요"><br>
<input type="password" placeholder="패스워드를 입력하세요"><br>
당신이 속한 그륩을 입력하세요<br>
<input type="radio" name="group" value="A" checked>A그륩
<input type="radio" name="group" value="B">B그륩<br>
당신이 좋아하는 과일을 모두 선택하세요<br>
<input type="checkbox" name="favorite_fruits" value="apple">사과
<input type="checkbox" name="favorite_fruits" value="banana">바나나
<input type="checkbox" name="favorite_fruits" value="peach">복숭아
<input type="checkbox" name="favorite_fruits" value="mango">망고<br>
<input type="submit" value="등록">
<input type="reset" value="초기화">
</form>
</body>
</html>
<form action="file:///C:/Users/GGG/Desktop/%EC%83%88%20%ED%8F%B4%EB%8D%94/test2.html">
<input type="txt" name="txt_id" placeholder="아이디를 입력하세여" "=""><br>
<input type="txt" name="txt_pw" placeholder="패스워드를 입력하세요"><br>
당신의 성별을 체크하세여하세요<br>
<input type="radio" name="sex" value="남자">남자<br>
<input type="radio" name="sex" value="여자">여자<br>
당신이 좋아하는 취미을 모두 선택하세요<br>
<input type="checkbox" name="favorite_sports" value="baseball">야구
<input type="checkbox" name="favorite_sports" value="basketball">농구
<input type="checkbox" name="favorite_sports" value="football">축구
<input type="checkbox" name="favorite_sports" value="pingpong">탁구<br>
<input type="submit" value="등록">
<input type="reset" value="초기화">
</form>
<form action="서버주소(이동할 페이지)">
<input type="text">
<input type="text" name="id" value="aaa" readonly 속성을 부여하면 수정이 불가하다.
</form>
<a href="ex.html"></a> 링크 거는 것
radio는 하나만 선택할때 사용한다.
checkbox 여러개를 사용한다.
checked 하면 화면에 체크박스에 표시되어 있을거다.
element
<option value="010">010</option> 이름속성을 써야한다.
value를 써서 010을 전송하게 해야한다.
<select name="phone" 멀티플을쓰면 여러개 사용가능>
<style>
*{전체 선택자
color: blueviolet;
}
h1{태그 선택자
color: black; 글 색깔을 검은색으로 하고싶다.
background-color: yellow;
}
h3{
background-color: blanchedalmond;
}
div{
background-color: brown;
}
span
background-color: aqua;
}
#content2{ 설정한 이름값에 색표시
background-color: coral;
}
.blackfront{ 클래스 선택자(여려개를 묶어서 사용 할 때 쓴다.
color: black;
}
</style>
</head>
<body>
<h1 class="blackfront">제목입니다.</h1> //여기에 이렇게 하면 클래스가 선택된 곳에 색갈 표시
<hr>
<h3>소제목입니다.</h3>
<div = id="content1">
<span>내용</span>입니다.
</div>
<div = id="content2">또 다른 내용입니다.</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
background-color:darkorange
}
#바나나{
background-color: aqua;
color: blueviolet;
}
.pink{
color: pink;
}
.bgyellow{
background-color: tomato;
}
.green{
color: green;
}
</style>
</head> <body> <ul> <li class="pink bgyellow">사과</li> <li class="red">포도</li> <li class="green">수박</li> <li id="바나나">바나나</li> </ul> </body> </html>
<title>Document</title>
<style>
input :enabled{
background-color: aqua;
}
input :disabled{
background-color: gray;
}
input[type="text"]{
background-color: brown;
}
#green{
background-color: green;
}
</style>
</head>
<body>
<form>
<h2>사용가능</h2>
<input id="red" type="text" name="txt1">
<h2>사용불가능</h2>
<input id= "blue"type="text" name="txt2" disabled>
<h2>사용가능</h2>
<input id="green" type="password" name="pw">
</form>
</body>
</html>
/* css주석*/
/head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>홍길동/th>
</tr>
<tr>
<td>지역</td>
<td>조선 한양</td>
</tr>
</table>
</body>
</html>
중간에 티바디가 들어가서 >해도 포함이 안된다.
<style>
table > tr{
color: red;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>지역</th>
</tr>
<tr>
<td>홍길동</td>
<td>조선 한양</td>
</tr>
</table>
</body>
</html>
이렇게 tbody를 해주면 가능하다.
<style>
tbody > tr{
color:aqua
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>지역</th>
</tr>
<tr>
<td>홍길동</td>
<td>조선 한양</td>
</tr>
</table>
</body> </html>----------
<style>
h1+h2{형제 옆에 있는건
color: red;
}
h1~h2{모든것
background-color: yellow;
}
</style>
</head>
<body>
<h1>Have a nice day</h1>
<h2>Have a nice day</h2>
<h2>Have a nice day</h2>
<h3>Have a nice day</h3>
<h2>Have a nice day</h2>
Share article
