About us
home

HTML STUDY

(1)HTML5의 개념
Loading PDF…
(3)HTML - 테이블
Loading PDF…
(5)CSS - 텍스트, 컬러, 배경 표현
Loading PDF…
(7)JavaScript - 기본 구조
Loading PDF…
(9)JavaScript - 객체, 프로퍼티
Loading PDF…
(11)JavaScript - DOM, WINDOW, NODE, innerHTML
Loading PDF…
(13)JavaScript - 다양한 함수 (콜백-fillter, forEach, every, map, 재귀)
Loading PDF…
(15)JavaScript - 상속
Loading PDF…
(17) JavaScript - 라이브러리 jQuery
Loading PDF…
(19) HTML - 배너
Loading PDF…
(2)HTML - 섹션
Loading PDF…
(4)CSS - HTML과의 연동
Loading PDF…
(6)CSS -레이아웃 정렬
Loading PDF…
(8)JavaScript - 연산자, 조건문, 반복문
Loading PDF…
(10)JavaScript - 배열, 함수
Loading PDF…
(12)JavaScript - event API/전파
Loading PDF…
(14)JavaScript - 프로퍼티 모음 , prototype
Loading PDF…
(16)JavaScript - 라이브러리
Loading PDF…
(18) JavaScript - 페이지 작성 예
Loading PDF…
(20) HTML - 네비게이션
Loading PDF…
구조적 마크업 이해 마크업 언어 -
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 "로딩중 등 이미지 대체 " (단독 사용)