첫번째
Web이란?
-> 웹이란 사전적인 의미로 거미줄이란 뜻으로 IT에서는 WWW(world wide web)이라는 말의 줄임말이다. 전세계의 컴퓨터들을 연결하여 정보공유를 하는데 주 목적이 있다.
프로토콜(Protocol) : 네트워크상에서 약속한 통신규약 (Http, FTP, SMTP, POP, DHCP)
IP : 네트워크상에서 컴퓨터를 식별할 수 있는 주소
DNS : IP주소를 인간이 쉽게 외우도록 맵핑한 문자열
Port : IP주소가 컴퓨터를 식별할 수 있게 해준다면, Port번호는 해당컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호
HTML
-> Hyper Text Markup Language의 약자로서 웹문서를 기술하는 언어이다.
웹문서를 표준하기 위한 태그들로 구서오디어 있다.
CSS
-> Cascading Style Sheets의 약자로, HTMl문서를 디자인적으로 예쁘게 만들어 정보전달을 좀더 효율적으로 하기 위해 만들어진 문서이다. HTML은 정보를 가지고 있고, CSS는 화면상의 레이아웃들을 컨트롤 하는 문서라고 생각하면 된다.
-----------------------------------------------------------
두번째
태그의 의미
-> HTML 문서를 구성하고 있는 요소이다. 태그에는 이름과 속성이 있다.
<>이걸 태그라고 한다. -> 열린태그
</> -> 종료태그 라고 한다.
종료태그 중 안써도 되는 것도 있다.
<a href=.............../><img src=.........> </a>
가 있다면 a라는건 태그 이름이고 src라는 속성이 있는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
안녕하세요
</body>
</html>
이게 기본 타입이다!!
<!DOCTYPE html>같은경우는 이 문서는 html이라고 말해주는 것이다.
</br> -> 개행할 때 쓰는 태그이다.
-----------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>
<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
<p><h3>주로 본문에 사용되는 태그로서 단락을 구분합니다.<br/>행바꿈 태그입니다.</h3></p>
<p><a href="http://www.google.com">구글 웹 사이트로 이동</a></p>
<p><i>KOREA</i></p>
<p>KOREA <sup>SEOUL</sup></p>
<p><ins>KOREA</ins></p>
<p><del>DELETE</del></p>
</body>
</html>
-----------------------------------------------------------------------------
세번째
리스트 태그
->리스트를 표현하는 가장 많이 사용되고 있는 태그들 중 하나입니다.
ex) ul,li,ol
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--br태그는 줄 단위로 엔터역할을 담당하고 <p>같은경우는 단락 단위로 엔터 역할을 한다.p태그써서 진하게 하였다. -->
<p><h2>메뉴 리스트</h2></p>
<ul><!-- ul태그는 리스트를 하는데 점으로 표시를 한다. -->
<li>menu1</li><!-- 안에 있는 내용을 하나하나 쓰기위해 이렇게 한다. -->
<li>menu2</li><!-- 안에 있는 내용을 하나하나 쓰기위해 이렇게 한다. -->
<li>menu3</li><!-- 안에 있는 내용을 하나하나 쓰기위해 이렇게 한다. -->
<li>menu4</li><!-- 안에 있는 내용을 하나하나 쓰기위해 이렇게 한다. -->
<li>menu5</li><!-- 안에 있는 내용을 하나하나 쓰기위해 이렇게 한다. -->
</ul><!-- 리스트 태그인 ul태그를 닫아준 것이다. -->
<p>지역 리스트</p><!-- p태그여서 단락 단위로 엔터역할을 담당했다. -->
<ol><!-- ol태그도 리스트역할인데 이건 숫자로 표시를 한다. 안에 li가 많아질수록 숫자는 늘어간다. -->
<li>서울</li>
<li>경기</li>
<li>충청</li>
<li>전라</li>
<li>경상</li>
<li>강원</li>
</ol><!--리스트 태그인 ol태그가 닫힌것이다. -->
<p>검색 사이트 와 종규사이트</p><!-- p태그여서 단락 단위로 엔터역할을 담당했다. -->
<ol><!-- 리스트태그인 ol태그이므로 숫자로 표시될 것이다. -->
<li><a href="http://www.google.com" target="_blank">google</a></li><!--blank일경우엔 새로운 창으로 열린다. -->
<li><a href="http://jongkyu.tistory.com" target="_self">종규티스토리</a></li><!-- self인경우엔 그창에 그대로 열린다. -->
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<dl><!-- list역할을 한다. -->
<dt>메뉴 리스트</dt>
<dd>menu1</dd>
<dd>menu2</dd>
<dd>menu3</dd>
<dd>menu4</dd>
<dd>menu5</dd>
<br/>
<dt>지역 리스트</dt>
<dd>서울</dd>
<dd>경기</dd>
<dd>인천</dd>
<dd>충청</dd>
<dd>강원</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 테이블 구조를 만들기 위해 사용하였다. -->
<table border="10"><!-- 테이블의 테두리의 굵기를 말하는 것이다. -->
<tr>
<td rospan="2">중간고사 성적</td><!-- rospan은 세로병합이다. -->
</tr>
<tr>
<td>국어</td>
<td>영어</td>
<td>수학</td>
</tr>
<tr>
<td>100</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">평균</td>
<td>80</td>
</tr>
</table>
<table border="5px solid blue">
<tr>
<td rowspan="2">201호</td><!-- 가로로 합친 것이다. -->
<td>202호</td>
<td>203호</td>
</tr>
<tr>
<td>주인집1</td>
<td>주인집2</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p><img src="image.photo1.jpg" alt="종규 이야기"></p>
<p><img src="https://t1.daumcdn.net/cfile/tistory/99AFF7475B8CEAA005" alt="종규 이야기"></p>
<p><img src="image.photo1" alt="종규 이야기" width="500"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<audio src="image.tata.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
</body>
</html>
속성
-> 태그에 추가 정보를 부여 할 EO 사용
-> 내부 문자를 가질 경우
<h1 title=“header”>Hello HTML5</h1>
여기서 tile은 속성이름
“header”은 속성값
Hello HTML5은 내부문자이다.
-----------------------------------------------------------
주석
-> 프로그램 실행에 영향을 미치지 않고, 설명을 위한 목적으로 사용하는 코드
ex)
<!-- title 태그 -->
-----------------------------------------------------------
iDOCTYPE html 태그
-> 웹 브라우저에 HTML5 문서임을 알려줌
-> 문서의 첫 행에 표기
-----------------------------------------------------------
html 태그
->모든 html 페이지의 루트(기본) 요소
-> lang 속성 입력가능
<html lang=“ko”>
lang속성
언어 | 속성 값 | 언어 | 속성 값 |
한국어 | ko | 영어 | en |
일본어 | ja | 러시아어 | ru |
중국어 | zh | 독일어 | de |
-----------------------------------------------------------
head와 body 태그
-> body 태그 : 사용자에게 실제로 보여지는 부분
-> head 태그: body 태그에서 필요한 스타일시트와 자바스크립트를 제공하는데 사용
head 태그 내부에 넣을 수 있는 태그
태그 이름 | 설명 |
meta | 웹 페이지에 추가 정보 전달 |
title | 웹 페이지의 제목 지정 |
script | 웹 페이지에 스크립트 추가 |
link | 웹 페이지에 다른 파일 추가 |
style | 웹 페이지에 스타일시트 추가 |
base | 웹 페이지의 기본 경로 지정 |
-----------------------------------------------------------
title 태그
-> 브라우저에 표시하는 제목을 지정하는 태그
익스플로러 옆에 나타나는걸 의미한다.
-----------------------------------------------------------
CSS3의 종류와 기본 작성법
내부 스타일시트
-> 스타일 시트를 가장 손쉽게 사용할 수 있는 방법
-> style 태그 사용
외부 스타일시트
-> 프로젝트의 규모가 큰 경우
-> link 태그의 href 속성을 통해 HTML 페이지로 불러옴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Basic</title>
</head>
<body>
<h5>종규</h5>
<style>
h5{
color: blue;
background:green;
}
</style>
</body>
</html>
이건 내부 스타일 시트 적용이다.
-----------------------------------------------------------------------
자바 스크립트
-> 웹 페이지에서 사용자 반응 등을 처리
내부 자바 스크립트
-> HTML 페이지 내부에 자바스크립트 코드를 바로 입력
-> script 태그 사용
외부 자바 스크립트
-> script 태그의 src 속성에 파일의 경로 입력
----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Basic</title>
</head>
<body>
<script>
//경고창을 출력한다.
alert('Hello JavaScript')
</script>
</body>
</html>
Tip!!
외부 스타일시트를 추가할 때는 link 태그 사용
외부 자바스크립트 파일을 추가할 때는 script 태그 사용
-------------------------------------------------------
제목 글자 태그
-> 문서의 제목을 표현할 때 사용
-> h : Heading을 의미
제목 글자 태그
태그 이름 | 설명 |
h1 | 첫 번째로 큰 제목 글자 태그 |
h2 | 두 번째로 큰 제목 글자 태그 |
h3 | 세 번째로 큰 제목 글자 태그 |
h4 | 네 번째로 큰 제목 글자 태그 |
h5 | 다섯 번째로 큰 제목 글자 태그 |
h6 | 여섯 번째로 큰 제목 글자 태그 |
-------------------------------------------------------
NOTE_특수문자 표기
연속된 공백을 모두 표시하려면   사용한다.
특수문자의 종류
특수문자 | 출력 문자 |
| 공백 |
< | < |
> | > |
& | & |
-------------------------------------------------------
p 태그
-> Paragraph를 의미하며 문단 하나를 생성
-> 제목 다음에 나오는 본문 입력시 주로 사용
-> 문단을 뛰는것과 같다.
-------------------------------------------------------
br 태그
-> 다른 글자 내부에 삽입 가능
hr 태그
-> 다른 글자 내부에 삽입 불가능하나 정상적으로 출력됨
태그 이름 | 설명 |
br | 개행 태그 |
hr | 수평 줄 태그 |
-------------------------------------------------------
하이퍼텍스트
-> 사용자의 선택에 따라 관련된 특정 정보로 이동할 수 있도록 조직된 문서
-> a태그 사용
a태그
-> Anchor를 의미
-> 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용
href 속성의 여러 경로
-> 절대 경로 : 현재 웹 페이지의 위치와 상관없이 웹 페이지 또는 파일의 위치를 나타내는 경로
-> 상대 경로 : 현재 웹 페이지의 위치에 따라 결정되는 웹 페이지 또는 파일의 경로
-> 아이디 경로 : 현재 웹 페이지 내부에 있는 다른 태그의 id 속성
-> 메일 경로 : 메일 주소
글자 모양 태그
태그 이름 | 설명 |
b | 굵은 글자 태그 |
i | 기울어진 글자 태그 |
small | 작은 글자 태그 |
sub | 아래 첨자 태그 |
sup | 위 첨자 태그 |
ins | 밑줄 글자 태그 |
del | 가운데 줄이 그어진 글자(취소선) 태그 |
글자 모양 태그의 특징
-> 글자 모양 태그는 모두 단독으로 사용 가능
-> 제목과 본문 글자 모양 태그 내부에 입력 가능
-> 글자 모양 태그 내부에 다른 글자 모양 태그를 삽입 가능
-> 글자 모양 태그 내부에 제목과 본문 글자 태그는 사용 불가능
네비게이션 목록
-> 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼을 모아둔 것
글머리 기호 목록
태그 이름 | 설명 |
ul(unordered list) | 글머리 기호 목록 태그 |
li(list item) | 목록 요소 |
순서 번호 목록
태그 이름 | 설명 |
o(ordered list) | 순서 번호 목록 태그 |
li(list item) | 목록 요소 |
테이블 태그의 종류
태그 이름 | 설명 |
table | 표(table) |
thead | 표의 머리(table head) |
tbody | 표의 본문(table body) |
tfoot | 표의 꼬리(table foot) |
tr | 표의 행(table row) |
th | 표의 제목 요소(table header) |
td | 표의 일반 요소(table data) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th></th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thead>
<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>
colspan과 rowpan 속성
태그 이름 | 설명 |
colspan | 셀의 너비 지정 |
rowspan | 셀의 높이 지정 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">지역별 홍차</th><!-- 2개를 합침 -->
</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>
</body>
</html>
-------------------------------------------------------
이미지 태그
-> img 태그 사용
-> 단독으로 사용
img 태그의 속성
태그 이름 | 설명 |
src | 이미지의 경로 지정 |
alt | 이미지가 없을 때 나오는 글자 지정 |
width | 이미지의 너비 지정 |
height | 이미지의 높이 지정 |
이미지나 파일을 HTML페이지와 같은 폴더에 둔다. ->아닐 경우 폴더를 만들어 경로 설정을 해준다.
공간을 분할 하는 이유
-> CSS로 원하는 레이아웃을 구성할 수 있기 때문이다.
div
-> 대표적인 공간 분할 태그
div 태그
-> 공간을 블록 형식으로 분할
-> 한행을 모두 분할 가능하다.
span 태그
-> 공간을 인라인 형식으로 분할
-> 글자 크기만큼 분할이 가능하다는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<div>div 태그 - block 형식</div>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
<span>span 태그 - inline 형식</span>
</body>
</html>
시맨틱
-> semantic : 의미론적인 의미이다.
시맨틱 웹
-> 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹이다.
-> 사람이 보는 페이지와 컴퓨터가 보는 페이지를 다르게 보여준다.
HTML5 시맨틱 태그
태그 이름 | 설명 |
header | 헤더 |
nav | 내비게이션 |
aside | 사이드에 위치하는 공간 |
section | 여러 중심 내용을 감싸는 공간 |
article | 글자가 많이 들어가는 부분 |
footer | 푸터 |
audio 태그
-> img 태그와 달리 시작 태그와 끝, 태그 모두 사용
audio 태그의 속성
속성 이름 | 설명 |
src | 음악 파일의 경로 지정 |
preload | 음악을 재생하기 전에 데이터를 모두 불러올지 여부 지정 |
autoplay | 음악의 자동 재생 여부 지정 |
loop | 음악의 반복 여부 지정 |
controls | 음악 재생 도구 출력 여부 지정 |
video 태그의 속성
속성 이름 | 설명 |
src | 비디오 파일의 경로 지정 |
poster | 비디오 준비 중일 때 표시할 이미지의 파일 경로 지정 |
preload | 비디오를 재생하기 전에 데이터를 모두 불러올지 여부 지정 |
autoplay | 비디오의 자동 재생 여부 지정 |
loop | 비디오의 반복 재생 여부 지정 |
controls | 비디오 재생 도구의 출력 여부 지정 |
width | 비디오의 너비 지정 |
height | 비디오의 높이 지정 |
-----------------------------------------------------------------------
form태그
-> 입력 양식 생성 코드와 실행 결과
form 태그의 속성
속성 이름 | 설명 |
action | 전송 위치(데이터를 잔달할 목적지) |
method | 전송 방식 |
- action 속성 : 주소
- method 속성 : 일반 편지와 택배
form 태그의 데이터 전송 방식
전송 방식 | 설명 |
GET | 주소에 데이터를 직접 입력해 전달합니다. |
POST | 별도의 방법을 사용해 데이터를 해당 주소로 전달합니다. |
입력 양식 태그
태그 이름 | 속성 | 설명 |
form | 안보임 | 입력 양식의 시작과 끝 표시 |
input | text | 글자 입력 양식 생성 |
button | 버튼 생성 | |
checkbox | 체크 박스 생성 | |
file | 파일 입력 양식 생성 | |
hidden | 해당 내용 표시 안함 | |
image | 이미지 형태 생성 | |
password | 비밀번호 입력 양식 생성 | |
radio | 라디오 버튼 생성 | |
reset | 초기화 버튼 생성 | |
submit | 제출 버튼 생성 | |
textarea | cols | 여러 행의 글자 입력 양식 생성 |
rows | cols는 너비, rows는 높이 지정 | |
select |
| 선택 양식 생성 |
optgroup | 옵션 그룹화 | |
option | 옵션 생성 | |
fieldset |
| 입력 양식의 그룹 지정 |
legend | 입력 양식 그룹의 이름 지정 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<!-- 사용자가 입력하는 입력 양식 -->
<input type="text" name="text" value="text" /><br /><input
type="password" name="password" value="password" /><br /><input
type="file" name="file" value="file" /><br /><input
type="checkbox" name="checkbox" value="checkbox" /><br /><input
type="radio" name="radio" value="radio" /><br />
<!-- 보이지 않는 입력 양식 -->
<input type="hidden" name="hidden" value="hidden" /><br />
<!-- 버튼 -->
<input type="button" value="button" /><br /><input type="reset"
value="reset" /><br /><input type="submit" value="submit" /><br />
<input type="image" src="http://placehold.it/100x100" />
</form>
</body>
</html>
------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<table>
<tr>
<td><label for="username">이름</label></td>
<td><input id="username" type="text" name="username" /></td>
</tr>
<tr>
<td>성별</td>
<td><input id="man" type="radio" name="gender" value="m" /><label
for="man">남자</label><input id="woman" type="radio" name="gender"
value="w" /><label for="woman">여자</label></td>
</tr>
</table>
<input type="submit" value="가입" />
</form>
</body>
</html>
'IT일반과목 > HTML5+CSS3' 카테고리의 다른 글
| 20180907 멀티미디어태그 (이미지의 부분마다 경로지정하기) (0) | 2018.09.07 |
|---|---|
| 20180907 학원수업 영역태그, 이미지삽입 등 (0) | 2018.09.07 |
| 20180906 (HTML 글자태그, HTML 목록태그,실습) (0) | 2018.09.06 |
| 20180905 학원수업 과제1 (0) | 2018.09.06 |
| 20180905 학원수업 HTML개요,헤드,글자태그 (0) | 2018.09.06 |
