* 주소 구성
http://localhost:8080/html5/hello.html
--> protocol://hostname:port/application/pathname
--> host = hostname:port
--> JavaScript의 location 객체에서 확인할 수 있음.
* URL: host + pathname
* Web Contents 종류
1. static: Web Application은 아님. 정적 컨텐츠 제공. Web Server에서 보통 제공
2. dynamic: Web Application.
* HTML 문서 제일 앞의 <!DOCTYPE html> --> 문서의 유형을 선언
* HTML 문서 구성
1. head: 문서에 대한 정보 제공. 사용할 수 있는 태그는 7가지임.
- meta: 정보 제공. 처리방식 지정
- title: 문서 제목
- link: 외부(혹은 내부) 리소스 연결. 필수요소: rel(형태), href(리소스 위치)
- style: CSS 형태의 View 형식 지정
- script: JavaScript 정의. body에서도 사용 가능
- noscript: JavaScript 사용이 Browser에서 disable 되어 있는 경우에 호출됨. JavaScript는 안된. body에서도 사용 가능.
- base: 로컬 서버 내 리소스의 기준 경로를 지정할 때 이용
2. body: 컨텐츠 제공.
* CSS 적용방식
1. External Style 적용
2. Internal Style 적용
3. Tag에서 Style 적용
--> 사용자 환경에 따른 선택적 View 제공
--> HTML은 View와 관련된 내용을 가지면 유지보수 및 다양한 사용자 환경을 지원할 수 없음.
* Multi-View 적용방법
1. Media Query
2. Navigator 객체 이용하여 user-agent의 정보를 활용함. 운영체제, Browser 정보, 단말기 이름 등.
* body 내 정의된 Script Tag는 정의된 순서에 따라 실행 순서가 결정됨. 해당 Tag Block이 로딩될 때 실행.
* Semantic Tag: header, footer, section, article, aside, nav. 문서의 구성(구조)할 때 사용.
- aside: 현재 컨텐ㅊ의 부가적인 정보 제공.
* Layout Tag: div, span
* href='#' --> dummy link 제공. 공백보다 #가 좋음
* 임의의 텍스트를 제공하는 사이트: http://lipsum.com/
* 대체 이미지 제공 사이트: http://place-hold.it/[width]x[height]
* 모든 Browser에서 제공하는 폰트: Serif, Sans-Serif, monospace
* Selector의 종류 56가지. 조합해서 사용가능.
* CSS 형태
- 선택자 { 스타일 } 과 같이 정의
- 배치나 Layout 관련된 Style은 개발자도 잘 알아야 함.
* 선택자 종류
- 태그 선택자: body, header, ...
- ID 선택자: #myFrom, ...
- Class 선택자: .myClass, ...
- 자손 선택자: body h1 --> 가운데 공백, body 및 body 자손 태그 밑에 있는 모든 h1 태그를 선택함.
- 자식 선택자: body > h1 --> body 바로 밑에 있는 h1 태그를 선택함.
* Web Font Service: 서버가 클라인언트에 제공하는 폰트. Browser에서만 사용되며 시스템에 설치되지는 않음.
* Style 지정 시 순서
margin: 1px 2px 3px 4px; --> top, left, bottom, right를 의미. top 부터 시계방향으로 지정됨.
margin: 0px auto; --> 상하, 좌우; auto는 좌우를 자동으로 조정하는 데 같이 맞추며 가운데로 배치되는 효과가 있음.
* display : [block | inline | none]
- block, inline 태그의 속성을 전환할 때 사용
- none 으로 지정하면 Web Page에서 제거됨. 영역 자체가 없어짐.
* block 요소 태그의 특징
- 특정 영을 갖는다. (사각형 형태)
- 기본적으로 좌우배치만 조정 가능하다.
- 다른 block 요소 태그와 순차적으로 수직 배열 된다.
- 수평 배치하려면 style 중 float: [left|right]를 이용함. float 속성 지정 시 width 속성도 같이 지정해야 함.
* float를 지정하면 이후에 나오는 모든 태그에 영향을 주므로 적당한 시점에 해제할 필요가 있음. clear: [left|right|both] 이용.
* inline 태그
- 자신만의 영역이 없다 --> width, height, layout 관련 속성 없음.
- 부모 태그의 영역에 종속됨.
* Web의 기본 폰트 크기: 16px --> 1em
- 하지만 16px는 너무 커서 12px를 주로 사용하며 0.75em 정도됨.
- 폰트의 크기를 지정할 때는 px 보다 em을 사용하여 사용자 환경에 대비할 수 있도록 해야 함.
* CSS의 vendor prefix
- 표준으로 받아 들여지기 전 각 Browser 벤더들이 정하여 사용하고 있는 스타일을 구분
- 형식: -[벤더 prefix]-
--> -ms- : Internet Explorer
--> -o- : Opera 계열
--> -webkit- : WebKit 엔진 이용. Chrome, Safari
--> -moz- : 모질라 계열. FireFox
- 표준으로 받아 들여진 경우 vendor prefix를 쓸 필요 없지만, Browser에 따라 구현 여부가 다르기 때문에 써 주는 것이 좋다.
* Flash 대체 기술
- canvas
- svg
- css3: 다음 세가지 이용 가능
--> transition
--> transform: rotate, scale,skew, translate
--> animation
* <table> --> <theader> <tbody> <tfooter>로 구분됨. 별도로 지정하지 않으면 <tbody>가 추가되어 입력된 내용 포함된.
* JavaScript에서 false인 것들: 0, '', NaN, null, undefined
* checkbox, radio --> name 속성이 같으면 같은 그룹으로 묶임
* boolean 속성: <input type='checkbox' checked ...>에서 checked같이 단독으로 쓰이는 애들을 말함. 즉, 값이 따로 지정되지 않으며, 속성값을 쓰면 true, 않쓰면 false임. HTML에서는 가능하지만 XML에서는오류이기 때문에 호환성을 위하여 checked='checked'와 같이 사용할 수 있음.
* JavaScript의 유사 배열 객체
- 배열의 성격을 가지고 있는 객체.
- document.querySelectorAll()의 반환 객체가 대표적임.
- 배열과는 다름. 배열인지 유사 배열 객체인지를 확인하려면 Array.isArray(object) 이용. true면 배열, 아니면 객체.
- 객체이기 때문에 for-in을 사용하면 (값이 아니라) 전체 속성값을 순회하게 됨.
- 따라서, 유사 배열 객체는 값을 순회하기 위하여 for-in을 사용할 수 없음.
- obj.length와 obj[index]을 이용해야 함.
* form의 필수 속성
- action: Action을 취할 대상 URL 지정. 지정하지 않으면 현재 page URL로 인식됨.
- method: 값 전달 방식 지정. get, post.
* default event 객체
- <a>, <form> 등에서 따로 지정하지 않아도 자동으로 실행되는 event 처리 루틴.
- 이를 무시하는 방법:
--> 핸들러 함수에서 false를 반환. 하지만 addEventListener()로 추가된 이벤트 핸들러는 안됨. 이 경우는 다음 방법을 이용.
--> function handler(event) 와 같이핸들러 함수 지정 후, event.preventDefault(); 호출
댓글 없음:
댓글 쓰기