[기본예제 2-1] 내부 스타일
style 태그를 이용해 html 코드에 직접 입력
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
<style>
h1{
color: white;
background: black;
}
</style>
</head>
<body><h1>Hello World..!</h1></body>
</html>
[기본 예제 2-2] 외부 스타일시트
css파일에 별도 작성하고 link 태그로 불러옴
h1{
color:white;
background:black;
}Style.css
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
<link rel="stylesheet" href="Style.css">
</head>
<body><h1>Hello World..!</h1></body>
</html>html
[기본 예제 2-3] 내부/외부 자바스크립트 작성
1. <script> html 내부에 태그로 작성
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
<script>
alert('아하기싫어');
</script>
</head>
<body></body>
</html>
2. <script> 태그로 외부 js 파일 불러옴
alert('outer java');<!DOCTYPE html>
<html>
<head>
<title>HTML5 Basic</title>
<script src="javaTest.js"></script>
</script>
</head>
<body></body>
</html>
[기본예제 3-1] 제목 <h1>
<!DOCTYPE html>
<html>
<head>
<title>HTML5+CSS3 Text</title>
</head>
<body>
</body>
<h1> 제목 글자 태그 1 </h1>
<h2> 제목 글자 태그 2 </h2>
<h3> 제목 글자 태그 3 </h3>
<h4> 제목 글자 태그 4 </h4>
<h5> 제목 글자 태그 5 </h5>
<h6> 제목 글자 태그 6 </h6>
</body>
</html>
[기본 예제 3-2] <h1> 제목 <p> 본문
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
</body>
<h1> 제목</h1>
<p> 아너무하기싫다,,,.. 자꾸한글이깨짐.... 이유가머임? </p>
<p> 크롬으로켜도.. utf8로바꿔도.. 깨질때가있음.. 이유가머임? </p>
<p> 빨리배워서 재밌는거 만들고싶다.. 기본예제 너무 재미없어요.. </p>
</body>
</html>
[기본예제 3-3] <hr> 줄로 단락 구분, <br> 공백으로 단락 구분
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
<h1> 홍차</h1>
<hr>
<h2> 정의 </h2>
<p> 아너무하기싫다,,,.. 자꾸한글이깨짐.... 이유가머임? </p>
<br>
<h2> 등급</h2>
<p> jdfskafjdkqgljgkqljgklsjgkwqjgsjlkfjslkag</p>
<p> - dsjfkldsajgksdlag;jaqwjgklwjg</p>
<p> - dsjfkldsajgksdlag;jaqwjgklwjg</p>
<p> - dsjfkldsajgksdlag;jaqwjgklwjg</p>
</body>
</html>
[기본예제 3-4] 앵커 태그
1. 절대 경로
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
<a href="http://www.naver.com"> 네이버 </a><br>
</body>
</html>
2. 아이디 경로
#alpha => id가 alpha인 태그 위치로 이동
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
<a href="#alpha"> Alpha 부분 </a>
<a href="#beta"> Beta 부분 </a>
<a href="#gamma"> Gamma 부분 </a>
<hr>
<h1 id="alpha">Alpha</h1>
<p> djfdsakfdsjlf</p>
<h1 id="beta">Beta</h1>
<p> djfdsakfdsjlf</p>
<h1 id="gamma">Gamma</h1>
<p> djfdsakfdsjlf</p>
</body>
</html>
[기본예제 3-5] 다양한 글자
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
<h1><b> 오잉ㅇ123abc볼드 </b></h1>
<h1><i> 오잉123abc이탤릭 </i></h1>
<h1><small> 작은글씨 </small></h1>
<h1> 아래 <sub> 첨자 </sub></h1>
<h1> 윗 <sup> 첨자 </sup></h1>
<h1><ins>밑줄</ins></h1>
<h1><del>취소선</del></h1>
<hr>
<b>작은볼드?</b><br>
<i>작은이탤릭</i><br>
<small>더작은글씨</small><br>
</body>
</html>
[기본 예제 3-6] 목록 태그
1. 번호가 없는 목록 <ul>
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
</body>
</html>
2. 번호가 있는 목록 <ol>
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
</body>
</html>
3. 중첩 목록
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
<ul>
<li>
<b>과일</b>
<ol>
<li>딸기</li>
<li>메론</li>
<li>바나나</li>
</ol>
</li>
<li>
<b>채소</b>
<ol>
<li>토마토</li>
<li>토마토</li>
<li>토마토</li>
</ol>
</li>
</ul>
</body>
</html>
[기본예제 3-7] 시간표 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<table border="1">
<thread>
<tr>
<th></th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thread>
<tbody>
<tr>
<td>1교시</td>
<td>영어</td>
<td>국어</td>
<td>과학</td>
<td>미술</td>
<td>기술</td>
</tr>
<tr>
<td>2교시</td>
<td>도덕</td>
<td>체육</td>
<td>영어</td>
<td>수학</td>
<td>사회</td>
</tr>
</tbody>
</table>
</body>
</html>
[기본예제 3-8] 행열 병합 표 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">지역별 홍차</th>
</tr>
<tr>
<th rowspan="3">중국</th>
<td>정산소종</td>
</tr>
<tr>
<td>기문</td>
</tr>
<tr>
<td>운남</td>
</tr>
<tr>
<th rowspan="4">인도 및 스리랑카</th>
<td>아삼</td>
</tr>
<tr>
<td>실론</td>
</tr>
<tr>
<td>다질링</td>
</tr>
<tr>
<td>닐기리</td>
</tr>
</table>
</body>
</html>
[기본예제 3-9] 멀티미디어 삽입
1. 이미지 삽입하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<img src="http://www.hanbit.co.kr/images/common/logo_hanbit.png" alt="펭귄" width="300">
<img src="Nothing" alt="그림이 존재하지 않습니다." width="300">
</body>
</html>
2. 음악 삽입하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<audio src="Grace Behind the Curtain.mp3" controls="controls"></audio>
</body>
</html>
3. 동영상 삽입하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<video controls="controls">
<source src="IMG_0124.mp4" type="video/mp4">
</video>
</body>
</html>
4. 동영상을 불러오는 동안 다른 이미지 보여주기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<video controls="controls" poster="http://placehold.it/640x360">
<source src="IMG_0124.mp4" type="video/mp4">
</video>
</body>
</html>
'웹프로그래밍' 카테고리의 다른 글
| [javascript] 생활코딩 3~7 (0) | 2023.06.09 |
|---|---|
| [CSS] 다양한 레이아웃의 구성과 기능 (0) | 2023.05.27 |
| [CSS] css 속성 (0) | 2023.05.21 |
| [CSS] 기초 선택자와 단위 (0) | 2023.05.14 |
| [HTML] 입력 양식 태그와 구조화 태그 (2) | 2023.05.10 |
