<!DOCTYPE html>
<html>
<head>
<title>page</title>
<style>
p{color: red;}
</style>
</head>
<body>
<p>Hello world</p>
<!-- 만약 하나의 문서안에 <html>요소가 또 있다면 -->
</body>
</html>
<html>
<head>
<!-- 타이틀요소는 첫번째 지정한 것만 적용됨 -->
<title>page2</title>
<!-- style은 차례대로 적용됨 [결국 화면엔 파랑] -->
<style>
p{color: blue;}
</style>
</head>
<body>
<p>Nice to meet you</p>
</body>
</html>
<!-- html태그 밖에 그냥 글씨를 쓰면? 그대로 나옴-->
good job!
<!-- html 밖에 있어도 태그문은 인식할까? 인식함 -->
<h1>HTML5</h1>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text element</title>
</head>
<body>
이곳에 글씨를 쓰면 브라우저에 보입니다.
두번째 줄입니다. 띄어쓰기도.. 어차피 하나로만 인식
특수문자 : ~!@#$%^&*()_+| 다 잘나오지만..
다만, 주의할 것.. < >이런태그 기호는 오류의 가능성 있음.
<!-- 특수기호를 위한 표기법 : 엔티티코드 -->
&¥<>©
<p>단락요소는 자동으로 한줄을 차지하게 됩니다.</p>
<p>당연하게 <br>이것은 두번째 <p>단락이므로</p> 자동 다음 줄임</p>
<pre>
이 안에서는 쓴데로 보여짐.
이렇게 줄바꿈도 바로 보임
이게 좋지는 않아요. 검색기능에도 제한이 있고 글꼴도 이상함.
</pre>
<h1>This is Heading element</h1>
<h2>This is Heading element</h2>
<h3>This is Heading element</h3>
<h4>This is Heading element</h4>
<h5>This is Heading element</h5>
<h6>This is Heading element</h6>
<!-- 없는 태그를 쓰면.. 그냥 무시함.-->
<h7>This is Heading element</h7>
<p>텍스트 서식 <strong>강하게</strong> 입니다.</p>
<p>텍스트 서식 <em>강조</em> 입니다.</p>
<!-- 수평실선 -->
<hr>
<!-- 책 p.33 예제만들기 ex.01 coffee.html-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list, anchor, image</title>
</head>
<body>
<!-- 1. list -->
<ul>
<li>aaa</li>
<li>bbb</li>
<li>bbb</li>
</ul>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>bbb</li>
</ol>
<dl>
<dt>aaa</dt>
<dd>이것은 Definition Data 입니다.</dd>
<dt>bbb</dt>
<dd>이것은 Definition Data 입니다.</dd>
<dt>ccc</dt>
<dd>이것은 Definition Data 입니다.</dd>
</dl>
<hr>
<!-- 2. anchoor요소 -하이퍼링크 -->
<br>
<a href="./02_text.html" target="_blank">상대주소: 같은 폴더안에 있는 문서</a>
<br>
<a href="#help">도움말 위치로 이동</a>
<br>
<br>
<h4 id="help">도움말</h4>
<!-- 줄바꿈을 매번 <br>을 추가하기 보다는 ..<p>단락요소 안에 <a>를 배치 -->
<p> <a href=""></a> aaa</p>
<p> <a href=""></a> bbb</p>
<!-- 당연히 다른 요소안에도 배치 가능함 -->
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
<!-- 이메일 링크 -->
<p><a href="mailto:lej950118@gmail.com">lej950118@gmail.com</a></p>
<!-- 이미지 보기 -->
<p><a href="./쿠로미.jpeg" target="_blank">이미지 링크</a></p>
<!-- 다운로드 링크 -->
<hr>
<!--3. 이미지 요소 -->
<img src="./쿠로미.jpeg" alt="쿠로미">
<img src="./쿠로미.jpeg" alt="쿠로미" width="200" height="200" border="3"> <!--권장안함.-->
<img src="./쿠로미.jpeg" width=50%>
<img src="./aaa.jpg" alt="aaa">
<!-- 이미지+앵커 -->
<a href="./쿠로미.jpeg"><img src="./쿠로미.jpeg" alt="쿠롬"width=150></a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
</head>
<body>
<table border="1">
<tr>
<th>no</th>
<th>name</th>
<th>message</th>
</tr>
<tr>
<td>1</td>
<td>sam</td>
<td>hello web</td>
</tr>
<tr>
<td>2</td>
<td>robin</td>
<td>nice to meet you</td>
<td>2023-10-24</td>
</tr>
</table>
<hr>
<!-- 셀병합 -->
<table border="2">
<tr>
<td rowspan="2">111</td>
<td colspan="3">222</td>
<td>333</td>
</tr>
<!-- rowspan, colspan은 여러줄.. 즉, 비교 대상이 있을때만 적용됨 -->
<tr>
<td>444</td>
<td>555</td>
<td>666666666666666666</td>
</tr>
<!-- 테이블의 제목 -->
<caption>테이블 제목</caption>
<!-- 작성위치와 상관없이 표의 상단에 놓여짐. css를 통해 위치변경 가능!! -->
</table>
<hr>
<!-- 테이블의 <td>요소안에 다른 요소를 넣기</td> -->
<table border="1" width="100%">
<tr>
<td width="30%">
</td>
<td>
<ul>
<li>aaa</li>
<li>bbbb</li>
<li>ccc</li>
</ul>
</td>
</tr>
<tr>
<td>
<!-- 한글은 단어의 띄어쓰기와 상관없이 자동 줄 바꿈 -->
<p>테이블 안에는 어떤 요소든 넣을 수 있음.</p>
<!-- 하지만 영어는? -->
<p>dfgsdfgdfgdfg dfgdsfsfdfsdf</p>
</td>
<td>
<img src="./쿠로미.jpeg" alt="쿠로미" width="70%" height="150">
</td>
</tr>
</table>
</body>
</html>
'HTML' 카테고리의 다른 글
| HTML-D02 (0) | 2023.10.26 |
|---|---|
| HTML-01.ex1 (0) | 2023.10.26 |
| html//01 (0) | 2023.08.30 |