파일명을 정할 때, 요즘은 언더바보다 하이픈을 많이 씀 ex) exam01-시맨틱태그.html
<!-- html의 주석 -->
<!--
웹 표준화 국제 기구인 월드 와이드 웹 콘소시엄(w3c: World Wide Web Consortium)에서 웹 콘텐츠 접근성 지침을 정한다. 2014년 웹 표준 지침 제정. 2017년 HTML5.2 표준 지침 제정
태그는 웹 콘텐츠(비디오, 이미지, 텍스트, 오디오)를 저장할 용도로 사용하며, 대부분 시작태그와 끝태그로 구성되지만 시작태그만 있는 단일태그들도 있다.
시작태그와 끝태그가 있는 태그들은 시작태그와 끝태그 사이에 웹 콘텐츠를 작성하여 저장하며, 단일태그는 경로를 사용하여 웹 콘텐츠를 저장한다.
웹표준(Web Standard)
1. 관련 기술
1-1. HTML5(Hyper Text Markup Language: structure구조)
목차에 연결된 문자 데이터(Hyper Text), 정보를 표현하는 언어(Markup Language)
1-2. CSS3(Cascading Style Sheet: Style표현)
CSS에서는 레이아웃(요소의 배치), 여백, 폰트, 색상 등을 자유롭게 지정할 수 있는 기능을 제공한다.
1-3. JavaScript and jQuery (furctionally기능: UI요소에 동적 효과)
요소를 객체화해서 동작을 제어한다. jQuery는 자바스크립트 라이브러리(기능의 묶음)이며, 요소를
DOM(Document Object Model)으로 변경하여 동적인 효과를 적용할 수 있다.
2. 웹 표준의 장점
2-1. 웹 접근성 수준의 향상
2-2. 구조와 표현, 기능의 분리 (모듈화)
2-3. 손쉬운 유지 보수 및 비용 절감 효과
2-4. 웹 호환성 확보
3. HTML 기본 문서
3-1. HTML 문서는 선언문으로 HTML 문서임을 지정(<!DOCTYPE html>)하고 <html>로 문서의 처음과 끝을 지정한다. <html>는 내부에 <head>와 <body>를 포함한다.
3-2. <head>
a. <meta>는 웹 페이지의 정보를 전달한다.
b. <title>는 웹 페이지의 제목을 나타낸다(웹 브라우저의 제목표시줄에 제목이 표시된다.)
c. <link>는 웹 페이지에 스타일 시트 파일을 추가한다.
d. <script>는 웹 페이지에 자바스크립트 파일을 추가하거나 스크립트 코드를 추가한다.
e. <style>는 웹 페이지에 스타일 시트 코드를 추가한다.
3-3. <body>
<body>는 웹 문서로 표현될 실제 내용(UI 요소)을 지정한다.
4. HTML5는 body 요소 내부에 지침을 정함
4-1. 시맨틱 태그
시맨틱(semantic: 의미론적인) 태그를 사용하여 개발한 웹사이트를 시맨틱 웹이라고 하며, 웹 브라우저가 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 말한다.
4-2. 인터프리터(interpreter: 웹 브라우저 해석기)
body 요소에 태그의 종류, 목적, 콘텐츠의 내용을 미리 제공(시맨틱 태그로 제공)하면 식별이 빨라지고 검색 속도에 도움을 준다.
사람의 언어(영어)를 컴퓨터 언어(기계어: 0과 1로 구성)로 통역하고, 컴퓨터 언어를 사람의 언어로 통역하는 엔진에는 인터프리터와 컴파일러가 있다.
a.인터프리터: 코드를 읽으면서 해석한다.
b.컴파일러: 코드를 모두 읽은 후에 해석한다.
4-3. 시맨틱 태그의 종류
시맨틱 태그는 주로 부모 요소(자식 요소를 묶음)로 사용한다.
a. header(머릿말): 로고, 검색 입력폼, 탑메뉴(로그인, 회원가입, 언어선택)등의 UI 요소로 구성
b. nav(내비게이션 바):메인메뉴(서브메뉴) UI 요소로 구성. header 안에 들어가기도, 밖으로 나오기도함.
c. section: 본문의 내용을 묶어놓은 영역(행)
d. article: section 내부에서 독립적으로 구성된 내용을 묶어놓은 영역(열)
e. aside: 본문 내용과 연관성이 없는 내용을 묶어놓은 영역(광고배너, 서브메뉴)
f. footer(꼬리말): 회사정보, 저작권, SNS 버튼
-->
<!DOCTYPE html>
<html lang="ko"> <!-- en(영어), zh(중국어), ja(일본어) -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- 메타 태그를 사용하여 인터넷 익스플로러의 버전으로 Edge를 사용한다라는 뜻이다. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 다양한 디바이스(단말기)의 화면의 크기에 맞춰지도록 제어한다. 초기 줌 사이즈를 1:1로 맞춘다 >반응형 웹을 제작하기 위해서 설정한다.
단말기의 디스플레이 해상도는 FHD(1920px*1080px)이지만 웹 브라우저의 해상도는 디스플레이 해상도와 다르다. -->
<title>HTML5 기본 문서 구조</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/custom.js"></script>
<style>
/* 주석: 인터프리터가 해석하지 않는 영역을 지정
스타일시트 코드해석 */
.youtube { width: 1200px; height: 600px; }
/* youtube 라는 이름으로 요소를 선택한다. 요소를 선택할 때 사용하는 것을 선택자라고 한다.
{}:스타일블록 (스타일속성: 스타일값;) */
</style>
<script>
// 자바스크립트 코드 한줄 주석
</script>
</head>
<body>
<header>
<h1>LOGO</h1>
<ul> <!-- 메뉴(목록)요소 저장: 목록(ul), 항목(li) 태그
앵커태그에 href속성에 값으로 사용한 #은 더미링크라고 한다.
-->
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
</ul>
<!-- a태그와 link태그의 필수속성은 href, img태그와 video태그의 필수속성은 src
="url경로(속성값)"
attribute(속성)는 시작태그에 작성한다.
경로(URL)
절대경로와 상대경로가 있다
※ 절대경로: 루트 디렉토리(도메인)에서 시작하는 경로이다.(ex. http://www.naver.com/style.jpg, /imgs/style.jpg)
※ 상대경로: 현재 파일에서 시작하는 경로이다.(ex. ./style.jpg, ./imgs/style.jpg, ../imgs/style.jpg)
url(Uniform Resource Locator) 경로 작성법:
1.절대경로: /
2.상대경로: 실행하는 파일에서 시작하는 경로 ./ 실행하는 파일의 부모요소 경로 ../ 부모요소의 부모요소 ../../
서버IP=도메인=root directory > web server
아이피주소는 DNS(Domain Name Service) 서버를 통해 도메인주소로 바뀜-->
</header>
<nav>
<ul>
<li><a href="http://www.google.com">about us</a></li>
<li><a href="./exam01.html">products</a></li>
<li><a href="./exam02.html">contact us</a></li>
</ul>
</nav>
<section>
<article></article>
<h3>title</h3>
<p>content</p>
<a href="#">button</a>
</article>
<article>
<h3>title</h3>
<p>content</p>
<a href="#">button</a>
</article>
<article>
<h3>title</h3>
<p>content</p>
<iframe class="youtube" src="https://www.youtube.com/embed/i1FMogUYWig" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- class는 컨텐츠의 이름을 정하는 태그-->
<a href="#">button</a>
<article></article>
</section>
<section></section>
<aside>
</aside>
<footer>
<h6>foot-logo</h6>
<address> </address>
<ul>
<li><a href="#">facebook</a></li>
<li><a href="#">twitter</a></li>
</ul>
</footer>
</body>
</html>
