(1)HTML5의 개념
(3)HTML - 테이블
(5)CSS - 텍스트, 컬러, 배경 표현
(7)JavaScript - 기본 구조
(9)JavaScript - 객체, 프로퍼티
(11)JavaScript - DOM, WINDOW, NODE, innerHTML
(13)JavaScript - 다양한 함수 (콜백-fillter, forEach, every, map, 재귀)
(15)JavaScript - 상속
(17) JavaScript - 라이브러리 jQuery
(19) HTML - 배너
(2)HTML - 섹션
(4)CSS - HTML과의 연동
(6)CSS -레이아웃 정렬
(8)JavaScript - 연산자, 조건문, 반복문
(10)JavaScript - 배열, 함수
(12)JavaScript - event API/전파
(14)JavaScript - 프로퍼티 모음 , prototype
(16)JavaScript - 라이브러리
(18) JavaScript - 페이지 작성 예
(20) HTML - 네비게이션
구조적 마크업 이해
마크업 언어 -
1.
구조적 마크업 - 구조정의
2.
표현적 마크업 - 외형정의
웹페이지의 디자인 요소 강화
•
문서의 구조와 표현 엄격히 분리
html - 문서 구조만 정의
css - 문서의 레이아웃과 디자인 정의
구조적, 표현적 혼용 문제 - (웹접근성 저해, 더높은 유지비용, 문서 크기 비대화)
블록레벨 요소 - 제목, 문단 , 줄바꿈이 일어나는 요소
인라인 요소 - 줄바꿈이 일어나지 않는 요소 (강조, 링크, 이미지 등)
세션 요소 -컨텐츠의 집합 - 하나의 독립적인 컨텐츠 단위
div 요소 - 아이디, 클레스 속성 적용
<section> - 범용섹션 (제목을 시작하는 컨텐츠)
<h1> <h1>
<nav>네비게이션링크로 구성 되는 섹션, 목록으로 작성 (목차로 사용)
<ul>...
<article> 기사등 독립적
<aside> 문서의 주요 콘텐츠와 별개의 영역 정의
<header> 페이지 머리글, 네비게이션 등 정의
<footer> 저작원 정보, 작성자, 링크 등
<hgroup> h1~h6까지 있음 (헤딩을 순서대로 사용하지 않아도 됨)
제목에 따른 섹션 분리
<address> article 또는 body 요소의 연락처 정보 의미
(가장 가까운 조상 요소)
<a herf >
그룹콘텐츠 요소
1.
문단가 인용
<p> 콘텐츠 문단 (시작과 끝에 사용)
저작권, 작성자 - footer
<blokquate cite = >
<pre>형식화 된 텍스트 블록 (공백을 포함한 입력한 텍스트가 그대로 웹 브라우저에 출력 됨
<hr>문단 레벨에서 주제의 분리 (단일요소)
문단안에서 주제의 분리를 나타냄
선을 긋는 목적으로 사용하지는 않기
순서가 있는 목록 : 순소가 바뀌면 의미가 바뀌는 목록
<ol>
<li> 숫자 또는 알파벳 (css를 통해 적용)
<ul> 순서 없는 목록 정의
정의 목록
<dl>
<dt><dd>
<dt><dd>
<figure> <img> <figcaption>
<div>구조적으로 의미없음, 스타일 또는 스크립트 분리 목적으로 사용
콘텐츠 요소
id : 코드내 유일한 식별자 (중복안됨)
id : 코드내 유일한 식별자 (중복안됨)
class :다수 가질수 있음 - css,자바스크립트의 적용을 위해 사용
title :요소의 조언정보를 나타냄, 웹브라우저에서 툴팁으로 표시
텍스트 관련 요소
<nav>
<a href="" target="_self"
_self: 현재의 웹브라우저 창에서 링크가 열림
_parent : 부모창이 있을 경우 부모창에서 링크가 열림
_top : 최상위 웹 브라우저 창에서 링크가 열림
_blank : 새로운 웹브라우저 창을 생성하고 링크가 열림
<em> 내용강조 (중첩해서 사용 가능)
<strong> 내용 중요 (중첩해서 사용 가능)
<q> 인용을 나태내는 인라인 요소 (blockquote0 soqn)
<cite> 인용 문구의 원문 주소)
<abbr>약어 및 두문자 (title속성을 통해 원형표시)
ex)IT "따움표가 생김"
<i> - 이탤릭체 (랭속성에 프랑스어 사용 정의)
<b> - 굵게
<sup> 위첨자
<sub> 아래첨자
<span> 컨텐츠 분리 (단락내에서)
<br> 단순 줄바꿈 (문단분리 x, 단독)
<img src = alt "로딩중 등 이미지 대체 " (단독 사용)