- WWW(World Wide Web)
§ 인터넷, 컴퓨터, 웹 브라우저(web browser)를 통해 글자, 이미지, 동영상, 음성
등의 데이터를 사용자에게 제공하거나, 사용자와 컴퓨터 또는 사용자 상호 간
에 소통하게 해주는 서비스
§ 마이크로소프트의 인터넷 익스플로러(Internet Explorer), 구글의 크롬(Chrome),
애플의 사파리(Safari), 모질라재단(Mozilla Foundation)의 파이어폭스(Firefox) 등
- 서버와 클라이언트
① 클라이언트가 웹 페이지의 주소(URL, uniform resource locator) 입력
② 서버는 요청을 받은 데이터를 클라이언트의 컴퓨터에 전송
③ 클라이언트의 웹 브라우저는 서버가 전송한 데이터를 해석하여 화면에 표시
문서편집기 : 메모장, Sublime Text, Acroedit, edit plus, VScode
Sample 1>
<!DOCTYPE html>
<html lang="ko">
<body>
<h1>웹 문서 만들기</h1>
<h2>안녕하세요<br>하위</h2>
<p/> 이건?
</body>
</html>
실행화면>
sample 2>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset ='utf-8'>
<title>HTML 태그 속성</title>
</head>
<body>
<a href="http://www.naver.com" target="_blank"> 네이버로 이동</a><br>
<a href="http://www.daum.net" target="_self"> 다음으로 이동</a>
</body>
</html>
실행화면>
하이퍼링크를 클릭하게 되면 링크된 해당 사이트로 이동
태그
<h1>~<h6>: 제목을 표현하기 위해 사용
<br> : 줄 바꿈을 할 때 사용
 : 공백을 나타낼 때 사용 (띄어쓰기)
<p> : 단락을 구분할 때 사용
<ul><li> : 순서가 없는 목록 나타낼 때 사용
<ul><oi> : 순서가 있는 목록 나타낼 때 사용
<dl>,<dt>,<dd> : 정의 목록을 나타낼 때 사용
<a> : 링크태그
<q> : 인용 내용표시를 위해 사용
<em>,<i>: 이텔릭체 사용
<strong>,<b> : 강조
<mark> : 형광펜 효과
<span>,<div> : 영역 묶기
<!-- 내용 --> : 주석문
HTML 에서의 특수문자 표기방식
시멘틱태그
<div> :글자나 사진등 콘텐츠들을 묶어 css 스타일을 적용시킬때 사용
<nav> :사이트간에 서로 연결하는 링크의역할을 담당
<header> :머리말, 제목을 작성하기 위해 사용
<section> : 본문 컨텐츠를 담고있음
<footer> :화면의 구조중 가장 아래 위치하고, 회사소개, 저작권, 약관등을 넣음
<article> :section 안에서 실질적인 내용들을 넣음
표 <table>
<table border = '1'> :굵기 1의 테이블 보더 생성
<caption>: 테이블에 제목을 넣을 수 있음
<th>: 표 내에 강조 내용작성
<td>: 열을 나타낼 때 사용
<tr>: 행을 나타낼 때 사용
<<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<table border='1'>
<colgroup>
<col style="width:100px;">
<col style="width:300px;">
<col style="width:100px;">
<col style="width:300px;">
</colgroup>
<tr>
<th>이름</th><td></td>
<th>연락처</th><td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
실행화면 >
예제 2>
<<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<table border="1">
<caption>제주특별자치도 학교현황</caption>
<thead>
<tr>
<th>구분</th>
<th>학교 수</th>
<th>학급 수</th>
<th>학생 수</th>
<th>교원 수</th>
</tr>
</thead>
<tbody>
<tr>
<th>유치원</th>
<td>117</td>
<td>252</td>
<td>5,547</td>
<td>474</td>
</tr>
<tr>
<th>초등학교</th>
<td>111</td>
<td>1,720</td>
<td>37,686</td>
<td>2,632</td>
</tr>
<tr>
<th>중학교</th>
<td>44</td>
<td>699</td>
<td>21,274</td>
<td>1,412</td>
</tr>
<tr>
<th>고등학교</th>
<td>29</td>
<td>676</td>
<td>22,019</td>
<td>1,433</td>
</tr>
<tr>
<th>특수학교</th>
<td>3</td>
<td>90</td>
<td>428</td>
<td>160</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>300</td>
<td>3,437</td>
<td>86,954</td>
<td>6,111</td>
</tr>
</tfoot>
</table>
</body>
</html>
실행결과>
예제>
<<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>수습 국원 모집</h1>
<h2>방송에 관심 있는 새내기 여러분 환영합니다.</h2>
<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부와 전공은 상관없습니다. <br>
방송에 관심 있는 여러 학우의 지원 바랍니다.</p>
<ul>
<li>
<b>모집기간</b> : 3월2일 ~3월 11일
</li>
<li><b>모집 분야</b>: 아나운서, PD, 엔지니어</li>
<li><b>지원방법</b>: 양식 작성 후 이메일 접수</li><br>
<em>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</em>
</ul>
<h3>혜택</h3>
<ul>
a.수습기자 활동 중 소정의 활동비 지급<br>
b. 정기자로 진급하면 장학금 지급
</ul>
<img src="C:\Users\Admin\Desktop\Web\exam02\camera.png"></img>
</body>
</html>
실행결과>
'Web' 카테고리의 다른 글
| [jQuery]_#1 (0) | 2021.07.02 |
|---|---|
| HTML_5일차 [JavaScript] (0) | 2021.07.02 |
| HTML_4일차 [JavaScript] (0) | 2021.07.01 |
| HTML_3일차 (0) | 2021.06.30 |
| HTML_2일차 (0) | 2021.06.29 |
