퍼블리싱_초급 doc

HTML

1. 시맨틱마크업 html5 테그

<header>	머리말 (섹션해더)
<article>	본문 (독립섹션)  문서에서 독립적인 하나의 콘텐트를 구분하는데 사용한다.  뉴스 항목, 블로그 본문과 같이 자체적으로 배포될 수있는 독립된 영역을 지정한다.
<aside>	(보조섹션)   문서의 주요 콘텐트와는 별개의 영역을 정의하는데 사용한다.  광고 블럭과 같이 주변의 콘텐트와 별도로 다뤄지는 영역을 지정한다
<section>	글 영역  사전적 의미 그대로 웹 문서의 한 부분, 한장을 구분하는데 사용한다 문서 내영역의 범위를 한정하며 문서의 아웃라인을 구성한다.
<nav>	네비게이션(탬색 링크의 섹션 정의)
<menu>	메뉴(도구모음 및 목록 양식 컨트롤, 명령)
<hgroup>	문서의 제목을 그룹화 하는데 사용한다.  예를 들어 제목과 부제가 동시에 존재하는 문서의 경우 <h1>요소와 <h2> 요소로 제목, 부제목을 정의하며 이들 제목들은 <hgroup>로 그룹화 된다. 이렇게 하여 여러개의 제목을 묶어 하나의 제목으로 취급할 수 있다
<address>	문서를 제공하는 필자의 연락처 정보 등의 부가 정보를 표현한다
<footer>	꼬리말(섹션푸터)

 

2. 물리적 , 논리적 스타일 태그

<b>	진하게(볼드체)	<strong>	강조하는 특정 부분표시
<i>	이탤릭체로 표시	<cite>	참고자료 표시(이텔릭체)
<s>	글자 가운데에 줄을 그어 표시	<em>	강조하는 내용표시(이텔릭체)
<u>	밑줄을 그어 표시	<del>	삭제된 텍스트 (취소줄)
<tt>	고정폭 (타자기)글골로 표시	<code>	컴퓨터 코드 표시
<sup>	위첨차	<samp>	프로그램 셈플 코드 표시
<sub>	래첨자	<var>	변수표시(이텔릭체)
<big>	글자를 더 크게 표시	<dfn>	용어에 대한 정의 표시
<small>	글자를 더작게 표시	<abbr>	축약형 표시
		<address>	문서와 관련된 연락 정보 표시
		<q>	인용한 단어 등을 표시 긴 인용구 <blockquote>

 

3. 홀태그 목록

source

link

meta

img

br

input

hr

col

 

4. 리스트테그

ul>li (순서 없는 리스트)  ol>li (순서 있는 리스트) , dl>dt&dd (정의리스트)

 

 

5. table 태그

<table></table>

테이블 시작과 끝을 알림

<tr></tr>

테이블의 한줄(행)을 나타냄

<th></th>

td 의 제목 태그 사용

<td></td>

테이블의 한칸(열)을 나타냄

<colgroup></colgroup>

테이블 속성을 공통으로 주기위한 구릅 <colgroup><col width="300"><col width="100"></colgroup>

<col></col>

각 공통으로 들어갈 td, th의 속성 설정을 위한 태그

<thead></thead>

테이블 머리 말 태그 지정 (구릅핑)

<tbody></tbody>

테이블 내용 (구릅핑)

<tfoot></tfoot>

테이블 꼬리말 (구릅핑)

6. input, textarea 태그

 

공통속성

placeholder	기본적으로 표시되는 글, 실제 값이 아니기 때문에 사용자가 입력하면 사라진다. 보통 예시를 보여줄 때 많이 사용한다. <input type="text" placeholder="소문자로 작성하시오">
value	기본적으로 표시되는 글이다. placeholder와 차이점은, placeholder는 사용자가 입력하면 사라지지만, value는 실제값이기 때문에 사용자가 커서를 놓아도 사라지지 않는다. <input type="text" value="한국">
readonly	요소의 텍스트 입력 영역이 읽기 전용임을 명시함.
disabled	요소가 비활성화됨을 명시함.

 

jQuery

1. jQuery 메서드 (문서 객체 다루기)

$()	문서 객체를 생성함   => $('<h1></h1>');  => $('<h1></h1>').html('내용');  => $('<h1></h1>').html('내용').addendTo('body');    // 태그와 내용을 body 에추가
addClass()	문서 객체의 클래스 속성을 추가 함. => $('선택').addClass('정의한 클래스이름');
removeClass()	문서 객체의 클래스 속성을 제거 함. => $('선택'). removeClass ('삭제할 클래스이름');
attr()	속성과 관련되 모든 기능을 수행함.  1. 이미지태그의 경로 속성값 알아내기    => $('img').attr('src');  2. 속성 값추가   => $(selector).attr(속성이름 , 속성값);  => $(selector).attr(속성이름  , function( 속성각각의 index값  ,attr ){} );  => $(selector).attr(object);    => $('<img />').attr('src', 'image.jpg').appendTo('body'); // body 에 img태스생성  => $('<img />' , {src:''image.jpg, width:350, height:250}).appendTo('body');
css()	스타일과 관련된 모든 기능 수행  1. 스타일 속성값 가져오기    => $('h1').css('color')  // h1 태그의 색상값   2. 속성 값 추가   => $(selector).css(name , value);   => $(selector).css(name , function(속성 각각의 index값 ,style){} );   => $(selector).css(object);
html()	문서 객체 내부의 글자와 관련된 모든 기능을 수행함 (html 태그인식)  1. 값 가져오기   => $('h1').html();   // 맨처음 h1 태그 값만 출력 2. 값 추가  => $(selector).html(value);  => $('div').html('<h1> 내용  </h1>');   // 태그인식
text()	문서 객체 내부의 글자와 관련된 모든 기능을 수행함 1. 값 가져오기    =>  $('h1').text();  // 모든 h1태그 값을 출력 2. 값 추가  => $(selector). text (value);  => $('div'). text ('<h1> 내용  </h1>');   // 정규표현식 으로 표현

 

2. jQuery 이벤트

이벤트 메소드

$(document).ready(function(){ ... })  or (function(){ ... })	html 문서가 다불러와지면 실행
one(event)	이벤트를 한번만 연결함
on(event)	이벤트를 연결함, 아래 이벤트열결을 대체함   ( delegate 대체함 version:1.7 )  => bind() :       $(selector).on(eventName , eventHandler)  => live() :        $(document).on(eventName , selector, eventHandler)  => delegate() : $(selector).on(eventName , selector , eventHandler)
off(event)	이벤트를 제거함  => unbind() :       $(selector).off(eventName[, eventHandler])  => die() :            $(document).off(eventName , selector[, eventHandler])  => undelegate() : $(selector).off(eventName , selector[, eventHandler])
toggle(function(event){...}, ... , function(event){...} )	click 이벤트를 여러 이벤트 핸들러를 번갈아가며 실행할 수있게 연결함
trigger(event)	이벤트를 강제 발생   => $(selector).trigger(eventName)  => $(selector).trigger(eventName, data)

 

마우스 이벤트

click	마우스를 클릭할 때 발생함.
mousedown	마우스 버튼을 누를 때 발생함.
mouseup	마우스 버튼을 뗄 때 발생함.
mouseenter	마우스 요소의 경계 외부에서 내부로 이동할 때 발생.
mouseleave	마우스 요소의 경계 내부에서 외부로 이동할 때 발생.