HTML 인터넷
전 세계를 연결하는 국제 정보 통신망으로, 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 사람들이 정보를 공유 할 수 있는 공간
하이퍼링크
인터넷에서 문서 사이를 쉽게 이동할 수 있는 기능
W3C
HTML 표준을 비롯한 웹 표준안을 제작하거나 제안하는 일을 한는 국제적인 웹 표준화 단체
플러그인
사용자 PC에 프로그램을 추가로 설치해 웹 브라우저의 기능을 확장하는 방법
웹 동작 웹
웹은 요청과 응답이라는 간단한 형태로 동작 웹에서 어떤 대상을 구분하는 주소를 URL이라고 함 URI는 웹에서 어떤 대상을 구분하는 방법을 총칭한 것
웹 서버
웹 서버는 치킨집과 같은 느낌 클라이언트(사용자)가 request(요청, 주문)을 하면 치킨집에서는 response(응답, 배달)을 하는 형태 요청하는 쪽은 클라이언트(사용자)라고 하며, 응답하는 쪽은 서버(제공자)라고 함
서버 프로그램
서버 프로그램은 클라이언트 요청에 따라 적절한 파일과 데이터를 제공 서버에서 실행되는 프로그램은 서버 프로그램(백엔드 프로그램) 클라이언트에서 실행되는 프로그램(프론트엔드 프로그램)
클라이언트 프로그램
HTML로 요소를 생성하고 CSS로 디자인해서 자바스크립트로 프로그래밍 요소를 부여함
웹 표준 기술 HTML5 + CSS3 + 자바스크립트
HTML5
html5는 큰 의미로 웹 표준 기술을 총칭한다, CSS와 자바스크립트를 모두 포함해서 이야기함
작은 의미로는 웹 페이지를 구성하는 HTML 마크업 언어 그 자체를 뜻함
마크업은 웹 페이지의 서식이나 구조를 표한하는 정보를 나타냄
CSS
HTML 페이지에 스타일을 지정하는 스타일시트를 작성할 때 사용하는 언어
자바스크립트
HTML 페이지에서 사용자 반응 등을 처리하는 스크립트를 작성하는 언어 자바스크립트의 표준 명칭은 ECMAScript
HTML5 기본 용어 태그, 요소, 속성 속성
속성은 태그에 추가 정보를 부여할 때 사용하는 것 < h1 title(속성 이름) ="header" (속성 값) > (속성 블록)HELLO HTML5(내부 문자)</ h1 > < img src(속성 이름) ="image.png" (속성 값) >
주석
프로그램 실행에 영향을 미치지 않고 설명용으로 사용하는 코드 <!-- 주석 -->
HTML5 페이지 구조 html:5 -> visual studio code
<!DOCTYPE html>
(웹 브라우저에 HTML5 문서라는 것을 알리기 위함)
<html lang="en">
(모든 HTML 페이지의 기본 요소로 모든 태그는 이 html 태그 내부에 작성)
<head>
(body 태그에 필요한 스타일시트와 자바스크립트를 제공)
<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>
(웹 브라우저에서 표시하는 제목 지정)
</head>
<body>
(사용자에게 실제로 보이는 부분을 작성하는 곳)
</body>
</html>태그
lang 속성 -> 언어 ex) ko 는 한국어, en은 영어 meta = 웹 페이지에 추가 정보 전달 title = 페이지 제목 지정 script = 웹 페이지에 스크립트 추가 link = 웹 페이지에 다른 파일 추가 style = 웹 페이지에 스타일시트 추가 base = 웹 페이지의 기본 경로 지정
글자 태그
제목 글자 (h1, h2, h3, h4, h5, h6) 본문 글자 (p = 본문 문단 생성, br = 줄 바꿈, hr = 수평 줄 삽입) 공백 =
목록 태그
ul = 순서가 없는 목록 ol = 순서가 있는 목록 li = 목록 요소 생성
테이블 태그
table = 표 삽입 tr = 표에 행 삽입 th = 표의 제목 셀 생성 td = 표의 일반 셀 생성
테이블 태그의 속성
table - border = 표의 테두리 두께 지정 th,td - colspan, rowspan = 셀의 너비 지정, 셀의 높이 지정
이미지 태그 (img, audio, video)
입력 양식 태그 (form)
form안에 input태그를 넣어 만듬 form태그는 method 속성의 방식으로 action 속성 장소에 데이터를 전달 < form action ="전송 위치" method ="전송 방식" > </ form >
GET, POST 전송 방식
GET 방식은 주소에 데이터를 입력해서 전달 ( '파일 이름?search=rint' ) POST 방식은 비밀스럽게 데이터를 전달해서 데이터 용량에 제한이 없음
입력 양식 종류
form = 보이지 않음, 입력 양식의 시작과 끝 표시 input
text button checkbox file hidden image password radio reset submit
textarea
select, optgroup, option fieldset, legend
공간 분할 태그
div = 블록 형식으로 공간 분할 span = 인라인 형식으로 공간 분할
시맨틱 태그 (HTML5의 가장 큰 변화)
시맨틱 태그 로 만든 웹 페이지 시맨틱 웹이라고 표현 시맨틱 웹은 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 의미
시멘틱 태그 구성
header = 머리말 nav = 하이퍼링크들을 모아 둔 내비게이션 aside = 본문 흐름에 벗어나는 노트나 팁 section = 문서의 장이나 절에 해당하는 내용 article = 본문과 독립적인 콘텐츠 영역 footer = 꼬리말
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>종합 예제</title>
</head>
<body>
<div id="HTML-page-wrapper">
<header id="main-header">
<hgroup>
<h1 class="master-title">HTML5 Example Preview<br></h1>
<h2 class="master-description">hyovvely</h2>
</hgroup>
</header>
<nav id="main-navigation">
<div class="pull-left">
<ul class="outer-menu">
<li class="outer-menu-item">
<span class="menu-title">HTML5</span>
<ul class="inner-menu">
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
</ul>
</li>
<li class="outer-menu-item">
<span class="menu-title">CSS3</span>
<ul class="inner-menu">
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
</ul>
</li>
<li class="outer-menu-item">
<span class="menu-title">JavaScript</span>
<ul class="inner-menu">
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
<li calss="inner-menu-item"><a href="#">데이터</a></li>
</ul>
</li>
</ul>
</div>
<div class="pull-right">
<div class="search-bar">
<form>
<input type="text" class="input-search">
<input type="submit" class="input-search-submit" value="검색">
</form>
</div>
</div>
</nav>
<div id="content">
<section id="main-section">
<article>
<div class="article-header">
<h1 class="article-title">HTML5 개요와 활용</h1>
<p class="article-date">2019년 02월 14일</p>
</div>
<div class="article-body">
<img src="http://placehold.it/430x280">
<br>
<br>
<p>오늘도 배웠다..</p>
<br>
<p>앞으론 id와 class 잘 쓰고 문단 구성 확실히 하자..</p>
</div>
</article>
<article>
<div class="article-header">
<h1 class="article-title">article, section 차이</h1>
<p class="article-date">20122년 02월 01일</p>
</div>
<div class="article-body">
<img src="http://placehold.it/430x280">
<br>
<br>
<p>
article 요소<br>
article 요소는 내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담습니다.<br>
주로 블로그 글, 포럼 글, 뉴스 기사 등을 article로 묶을 수 있습니다
</p>
<br>
<p>
section 요소<br>
section은 서로 관계 있는 문서를 분리하는 역할을 함.<br>
주로, 문서를 다른 주제로 구분짓기 위해 사용됨
</p>
</div>
</article>
</section>
<aside id="main-aside">
<div class="aside-list">
<h3>카테고리</h3>
<ul>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</div>
<div class="aside-list">
<h3>최근 글</h3>
<ul>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</div>
</aside>
</div>
<footer id="main-footer">
<a href="#">화이팅 !!!</a>
</footer>
</div>
</body>
</html>
