hengki.net (9 Page)

03_웹앱 개발> HTML, CSS, JAVASCRIPT

Hengki's WebApp 2013. 9. 16. 12:40 |

- 모바일웹 : 기존 웹형태에서 모바일에서 볼수 있게 페이지를 작성한 형태 (풀브라우징/페이지 이동)
- 웹앱 : 웹으로 앱을 개발하는 것. 웹앱은 모바일웹 보다 좀더 모바일에 최적화된 웹 (단일페이지)
- 결론은 기본 웹개발을 할수 있어야 합니다.

1. 웹 하면 생각나는 HTML
: HTML을 자세하게 알고 싶으신 분은 http://opentutorials.org/course/11/ 를 참고하세요.

1.1 HTML의 역할
: HTML은 화면의 레이아웃(뼈대) 를 구성합니다.

1.2 HTML 구조

-. <!DOCTYPE html> : dtd 이문서를 어떤 규약에 맞게 해석할지를 결정
-. <html> </html> : html 문서 임을 명시함
-. <head></head> : 문서를 정의 하는 데이터가 위치함
-. <body></doby> : 문서에 표시되는 컨텐츠가 위치함

-. 태그의 형식1 : <태그명 속성명1="속성값1"> 컨텐츠 </태그명>
└> 보통의 태그 태그를 열었으면 뒤에 꼭 닫아 줘야 한다.
└> ex> <a href="page.html">페이지이동</a>, <div>레이아웃</div>

-. 태그의 형식2 : <태그명 속성명1="속성값1"/>
└> 빈요소 일경우 마지막에 / 를 써준다.
└> ex> <br/> <img/> <input/>

-. 테그는 반드시 구조화 되어야 함. (마지막에 정의한 테그를 가장 먼저 닫아야 합니다.)
└> 잘못된예 : <div><a>Hengki</div></a>
└> 잘된예 : <div><a>Hengki</a></div>

1.2 HTML 테그 요소들
-. http://opentutorials.org/course/8 참고하세요. 공동 번역 해주신 여러분들 감사해요!!

2. HTML을 보기 좋게 꾸며보자 CSS
: CSS를 자세하게 알고 싶으신 분은 http://opentutorials.org/course/4 를 참고하세요.

-. CSS를 사용하는 이유 : HTML과 디자인을 분리하여 HTML를 수정하지 않고 디자인을 변경 할 수 있다. (테마적용가능)

-. 스타일시트 3가지 적용 방법
(1) 직접 적용

(2) Head에 적용

(3) 외부 파일을 링크

-. 선택자 ID, Class, Tag Name
(1) ID : 페이지에 유일한 요소 지정
- 선택자 : #

(2) Class : 페이지에서 다중으로 사용되는 요소
- 선택자 : . <-점있어요

(3) Tag 전체에 적용

(4) 선택자를 중첩해서 지정가능
-. id hello 안의 h1의 색을 파란색으로 칠해라

(5) 식별자가 중첩될 경우 나중의 속성으로 변경 되서 적용된다.
: 기존의 속성은 남으며 재정의 한것만 바뀜

(6) CSS 요소들도 HTML 요소들 처럼 많은 것들이 있습니다. 주로 사용하는 것 위주로 익숙해 지셔야 합니다. 많이 보는것도 중요합니다.

3. 웹을 동적으로 바꿔보자 JavaScript
: JavaScript를 자세하게 알고 싶으신 분은 http://opentutorials.org/course/49를 참고하세요.

3_1 자바스크립트의 이해
-. 자바스크립트는 자바랑 아무 상관 없는 언어 입니다. 자바 스크립트는 웹 브라우저에서 동작하는 스크립트 언어 입니다.
-. 자바스크립트는 웹 브라우저에서 동작합니다.
-. 정적인 웹에서는 서버에서 받은 HTML/CSS를 그대로 화면에 출력하는 반면 자바 스크립트를 이요시 이미 서버에서 다운 페이지를 변경할수 있습니다.
-. WEB2.0, RIA, HTML5 이런 키워드 들은 HTML/CSS/JavaScript 를 두고 하는 말입니다. 제 생각엔 특히 JavaScript를 두고 하는 말처럼 보입니다.

3_2 자바 스크립트 언어
-. 변수, 연산자, 조건문, 반복문, 함수, 배열… 모두 C계열과 비슷합니다. (C/C++/JAVA)

3_3 자바스크립트도 CSS처럼 BODY사이, HEAD사이, 외부파일에 작성 할 수 있습니다.