제이쿼리

• 자바스크립트의 라이브러리

제이쿼리 모바일

• jQuery를 확장한 프레임워크
• HTML5 태그 기반 개발 방식으로 배우기 쉬움
• 대부분의 모바일 플랫폼을 지원
• 폰갭과 조합이 용이함

부트스트랩은 pc, mobile 어느 장비에서나 화면을 편리하게 볼 수 있도록 하는 것 but 제이쿼리 모바일은 모바일만의 특성을 참고하여 만든 것

제이쿼리가 아니라 css가 모바일에 맞게 구성되어 있다고 생각하면 됨

프레임워크(라이브러리) 연결 방식

CDN(Contents Delivery Network) 방식

• 일정 서버에 이 파일을 두고 필요할 때 끌어다 쓰는 방식
• 자동으로 가장 가까운 서버에서 다운받도록 하는 기술
• 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라진다.
• 해당 서버와 웹사이트를 제공하는 서버에서 병행 다운로드가 가능하기 때문에 모든 page에서의 지연을 줄여 준다. 하지만 로컬에서 호스팅될 때는 오히려 지연시간이 늘어날 수도 있다.
• 인터넷과 연결이 되어 있어야만 나온다.
• 주소가 바뀌면 사용 불가능
• 항상 library 버전의 의존성(?)을 설정해주어야 한다. (jQuery에서는 자주 일어나는 일은 아니지만, 가능성은 있다) ```HTML

### 다운로드 방식
- 일반적으로는 많은 경우 다운로드 방식을 사용한다.
```HTML
<link rel="stylesheet" href="jquery.mobile.1.4.5.min.css" />

어떤 것을 다운받든 간에 라이브러리 페이지에 가 보면 보통 두 가지의 버전이 존재한다.

1. 최신 버전
2. stable 버전

다운받을 때 웬만하면 stable 버전을 다운받을 것

일반적으로 IE6 혹은 예상치 못한 오류에 대비하기 위하여 이렇게 쓸 수 있다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery-1.4.2.min.js"><\/script>')</script>

jQuery도 자바스크립트 파일이므로 </body> 앞에 삽입할 것

CSS3 파일, 제이쿼리 스크립트 파일, 제이쿼리 모바일 스크립트 파일 순으로 HTML5 마크업에 포함되어야 한다.

프레임워크 기본 구성 형식

• data- : 커스텀 데이터 속성으로, HTML5 마크업 안에서 제이쿼리 모바일 기능을 호출하기 위한 방법 제이쿼리 모바일 프레임워크가 이를 해석하고 자동으로 HTML5의 구조를 변경하여 페이지를 화면에 표시
• data-role="page" : 페이지 컨테이너(page container) 정의
• data-role="header"
• ‘data-role=”content”’
• ‘data-role=”footer”’

커스텀 데이터 속성은 HTML5의 표준속성이 아닌, 제이쿼리 모바일 프레임워크와 이를 사용하는 사용자 사이의 미리 정의된 약속이다. HTML5 비호환 브라우저에서 커스텀 데이터 속성을 해석하지 못하더라도 오류 없이 동작한다. 필여할 경우 개발자도 직접 data-로 시작하는 속성 이름을 정의하고 필요한 속성 값을 지정할 수 있다.

화면 구성 및 페이지 연결

• 단일 페이지 템플릿 : 하나의 HTML 문서 안에 하나의 페이지를 정의
• 다중 페이지 템플릿 : HTML 문서 안에 둘 이상의 페이지를 정의 첫 페이지 외의 다른 페이지들은 숨겨져 있다가 페이지 링크를 통해 화면이 전환되면서 표시된다.

다중 페이지 템플릿은 초기에 모든 페이지를 읽어 들이는 부담이 있지만 한번 로드된 후에는 페이지 연결 속도가 매우 빠르다. -> 순차적으로 읽어야 하는 페이지나 자주 함께 사용되는 페이지들은 다중 페이지 템플릿으로 구성하는 것이 좋다. 단일 페이지 템플릿은 첫 페이지는 빨리 보여주지만 요청할 때마다 페이지를 매번 읽어와야 하므로 응답 시간은 늦어진다.

페이지 연결 방식

• 일반적으로 웹앱은 여러 화면[페이지]들이 유기적으로 연결됨
  1. 내부 페이지 연결 방식
  2. 외부 페이지 연결 방식

내부 페이지 연결

• 하나의 HTML 파일 안에 여러 페이지를 명세하여 서로 연결
• 각 내부 페이지들은 Ajax를 통해 내부 링크 방식으로 연결된다.
• 같은 HTML 파일 안에 함께 정의된 페이지들은 항상 내부 페이지 연결 방식을 취한다.
• 제이쿼리 모바일은 페이지를 이동할 때마다 화면 전환 효과를 자동으로 적용한다.
• 비동기 방식으로 페이지 일부만 대체함으로써 빠른 응답과 자연스럽고 부드러운 사용자 경험을 제공
• 내부 링크로 연결되는 내부 페이지와 외부 페이지는 브라우저에 의해 하나의 DOM 트리 객체로 관리된다.

외부 페이지 연결

• 여러 HTML 파일 안에 페이지들을 나누어 명세하고 서로 연결
• 이전 페이지를 메모리에서 제거하고 새 페이지로 새롭게 대체한다.

페이지 도메인 링크 방식

• 내부 페이지 연결 방식은 항상 내부(도메인) 링크 방식

외부 페이지의 내부 링크 방식

• 기본적으로 하나의 HTML 문서는 하나의 DOM 트리를 구성
• 제이쿼리 모바일은 내부(도메인) 링크 방식으로 연결하면 DOM 트리를 새롭게 생성하는 것이 아니라 연결된 외부 페이지를 현재의 DOM 트리에 추가
• DOM 트리에서 중복되는 엘리먼트 노드만 제거된다.
• 물리적으로는 다른 파일 안에 있더라도 내부 링크 방식으로 연결된 페이지들은 하나의 DOM 트리를 구성 -> Ajax에 의해 자연스러운 화면 전환 애니메이션을 사용 가능

외부 페이지의 외부 링크 방식

• Ajax를 사용하지 않음
• 풀페이지(full-page) 링크 방식
• 기존 DOM 트리는 제거하고 새로운 페이지로 DOM 트리가 구성됨 -> link에 의한 예상치 못한 변경을 차단 가능

Ajax를 통한 페이지 이동은 웹 서버를 통해 페이지를 읽어 올 경우에만 동작한다. (내 웹 페이지 -> google 페이지로 이동할 경우 동작하지 않음)

• rel="external" : ajax를 사용하지 않고 일반 HTTP 요청 형태로 페이지를 읽어 오도록 한다. 다른 웹 사이트나 다른 도메인 안에 위치한 페이지를 링크할 때 사용한다.
• data-ajax="false" : ajax를 사용하지 않고 일반 HTTP 요청 형태로 페이지를 읽어 오도록 한다. 같은 도메인 내에 존재하는 페이지를 읽어올 때 사용한다.

다른 페이지의 다른 자바스크립트 라이브러리 간에 링크 과정에서 충돌이 발생할 수 있다. 이를 피하기 위해 외부 도메인 링크를 설정함으로써 제이쿼리 모바일의 자바스크립트 실행을 중지하기도 한다.

페이지 전환

페이지 전환 효과

• CSS3의 transition 스타일 속성에 기반
• <a> 링크 태그 안에 data-transition 속성값을 설정하면 된다.
  • side : 왼쪽으로 수평이동 (기본 효과)
  • ‘sideup’ : 위쪽으로 수직이동
  • ‘sidedown’ : 아래쪽으로 수직이동(sideup의 반대효과)
  • sidefade : 수평 이동 후 서서히 나타남
  • flip : 페이지 회전(페이지 중앙 Y축 기준)
  • fade : 페이드인(서서히 나타남)
  • pop : 페이지 확장(화면 중앙에서 확대됨)
  • turn : 페이지 뒤집기
  • flow : 페이지 축소 후 좌우이동
  • ‘none’ 또는 공백 : 미적용 (전환효과 적용하지 않음)
• data-direction="reverse" : 역방향이나 반대 애니메이션 효과가 적용됨
• data-rel="back" : 이력 정보를 통해 바로 이전 페이지로 되돌아간다. 링크 없이도 가능. 이때 href 속성값은 무시되며 자동으로 역방향의 페이지 전환 효과가 적용된다. 하지만 브라우저에 따라 제이쿼리 모바일이 지원되지 않는 경우도 있으므로 href 속성이 단순 페이지 링크로 처리될 경우를 대비해 정확한 이전 페이지 ㄹ이크를 항상 설정해두는 것이 좋다.

외부 프로그램 링크

모바일 응용 프로그램과의 링크도 지원한다.

<!-- 이메일 -->
<a href="mailto:1002galaxy@gmail.com">
<!-- 전화번호 -->
<a href="tel:01012345678" target="_blank">
<!-- SMS -->
<a href="sms:01012345678" target="_blank">
<!-- 맵(위성좌표) -->
<a href="http://maps.google.com/maps?q=37.511611,127.098293&hl=ko" target="_blank">
<!-- 맵(주소) -->
<a href="http://maps.google.com/maps?q=대한민국+서울특별시+강남구+삼성1동+159-1&hl=ko" target="_blank">

참고

• jQuery 코드 html에 넣는 방법과 위치
• jQuery 적용(다운로드, CDN)
• Benefits vs. Pitfalls of hosting jQuery locally
• jQuery Mobile Demos

뷰포트(Viewport)

• 보여지는 창문이라는 뜻
• 화면에 보여지는 요소
  1. 레이아웃 뷰포트 (layout viewport) : 장치의 전체 화면 해상도에 해당하는 영역
  2. 비주얼 뷰포트 (visual viewport) : 전체 화면 중 현재 화면에 보이는 영역
• 스마트폰은 모바일 브라우저 창의 크기가 화면 최대 크기로 고정됨 -> 비주얼 뷰포트 = 레이아웃 뷰포트
• 각 스마트폰 브라우저별로 실제보다 훨씬 큰 크기의 뷰포트가 설정되어 있다. <- 모바일에 최적화되지 않은 페이지도 모두 볼 수 있도록
• 이 뷰포트를 기준으로 글자 크기를 표시 -> 글자 크기가 작아진다.

뷰포트 메타 태그

• <meta> 태그를 이용하여 뷰포트 정보를 제공

• 화면 해상도에 따른 최대, 최소 너비를 지정할 수 있게 한다.

• width : 뷰포트의 너비 예) 480px, device-width
• ‘height’ : 뷰포트의 높이 예) 800px, device-height
• initial-scale : 초기 화면 확대 비율 예) 1.0
• minimun-scale : 화면 축소 최대 비율 예) 0.5
• ‘maximum-scale’ : 화면 확대 최대 비율 예) 2.0
• ‘user-scalable’ : 사용자의 확대 혹은 축소 가능 여부 예) yes(default), no

뷰포트 선언의 예

<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=no"/>

일반적인 뷰포트 선언

<meta name="viewport" content="width=device-width; initial-scale=1.0"/>

CSS -> 화면 구성이나 표현 형식 등 디자인 부분을 HTML 대신 CSS에 위임함으로써 문서 구조와 문저 표현을 분리할 수 있다 -> 확장성, 재사용성

h1
  {
    color: blue;
    background: gray;
  }

선택자

• * : 전체 선택자 <- 별로 사용하지 않는다. 모든 태그에 동일한 스타일을 적용하는 경우는 거의 없다.
• 태그명 : 태그 선택자
• .클래스명 : 클래스 선택자 -> Jquery에서도 똑같이 사용한다.
• #아이디명 : 아이디 선택자
• 계층 선택자
  • 선택자 > 태그명 : 자식 선택자
  • 선택자 + 태그명 : 형제(근접후행) 선택자
  • 선택자 ~ 태그명 : 형제(후행) 선택자
• 상태 선택자 : 특성 상태 조건을 충족하는 선택자
  • 링크선택자
    • 선택자:link
    • 선택자:visited
  • 반응선택자
    • 선택자:hover (마우스 포인터가 올라가 있는 상태)
    • 선택자:active (클릭하고 있는 중)
  • 부정선택자
    • 선택자:not

/* 태그 선택자 */
p { background-color: blue; border: red; }
/* 복수 태그 선택자 */
h1, h3, p { background-color: yellow; }
/* 아이디 선택자 */
#id1 { border: solid red; }
/* 클래스 선택자 */
.class1 { border: solid purple; }

• 실무에서는 일반적으로 아이디와 클래스를 둘 다 쓰고, 이름을 동일하게 해 준다. <- Jquery에서 둘 다 쓰기 때문에.

스타일 적용의 우선 순위

1. 인라인 방식
2. 내부 방식
3. 외부 방식
4. 임포트 방식

제일 좋은 건 외부 방식을 주로 쓰고 꼭 필요한 경우에 인라인 방식을 추가로 사용하는 것

1. 아이디 선택자
2. 클래스 선택자
3. 계층 선택자
4. 태그 선택자

보통 가장 우선순위가 높은 것을 맨 밑에 쓴다.

CSS 속성값의 단위

• 상대 단위 : %, em, ex, px
• px, %, em 등이 가장 많이 쓰인다.

박스 모델

• 엘리먼트들을 박스로 간주한다 -> 박스 모델

• display 속성에서 none으로 하여 엘리먼트를 숨길 수 있다.

Web Application Server(WAS)

• Apache Tomcat
• 웹 서버

맥북에서 tomcat 설치 및 서버 실행

1. brew를 이용하여 설치 brew install tomcat
2. tomcat 폴더로 이동하여 실행 cd /usr/local/Cellar/tomcat/9.0.34/bin ./catalina start

localhost:8080 에 접속하면 실제로 실행되고 있는 것을 볼 수 있다. catalina stop 을 입력하면 서버가 종료된다.

tomcat 폴더 아래 bin, webapps 폴더를 가장 많이 건드리게 될 것 webapps 폴더에 우리가 만든 소스를 넣어 실행한다.

맥북에서 ip 주소 확인하기

ipconfig getifaddr en0

이렇게 얻어진 ip 주소 + port 번호를 입력하면 해당 페이지를 볼 수 있다.

웹 주소

주소는 ip로 구성되고, Ipv6이 나와 있기는 하지만 일반적으로 Ipv4 사용

• 예) 192.168.0.1
• http://` : 프로토콜 -> 일반적으로 생략됨
• www.naver.com : host (도메인)
• :8080 : 포트 번호
• /index.html : URI (주소식별자)

http vs https : 이론/기술적으로는 차이가 많다. https가 보안적으로 플러스가 되어 있다.

주소:포터/세부내용의 형식으로 이루어진다. -> 어떤 언어를 사용하면 어떤 주소로 가라.

웹브라우저를 통해 웹을 볼 수 있다. 그런데 인터넷 익스플로러가 웹 분야를 더럽혀 놓음(?)

사용자는 더 간편하게 사용하기를 원하고 있고 개발자의 부담이 증가 (다양한 플랫폼에서의 개발)

• 웹사이트에 가입하면 가입환영이메일을 받는데, 이 이메일의 표준이 각 웹사이트나 웹브라우저마다 다름.

예전에는 html 자체가 만들어놓으면 읽어와라 하는 게 web이었지만 웹의 패러다임이 진화하면서 서로 실시간 소통을 원하는 사람들이 많아짐

현재는 소통, 플랫폼 중심의 웹 3.0을 사용하는 시대

웹 언어의 발전

알아두면 좋음

SGML

• 가장 처음
• 상당히 복잡하고 여러가지 기능들을 전부 넣어놓은 표준 문서.
• 구조, 내용에 대한 상당히 상세한 표준
• but 이것을 초반에 쓰다가 너무 복잡해서 HTML이 탄생

HTML

• 화면에 어떤 내용을 보일 것인가!
• 내용 위주, 표현 위주.
• 의미적 관점에서의 단점 부각

XML

• html은 화면에 어떻게 보이면 된다는 것만 나타냄. 이것만 가지고 있다 보니까 이것은 내가 어떠한 것을 나타내는지 의미를 모르겠다. 형식을 어떻게 나타내야할지 모르겠다. -> 좀더 구조화시키겠다 해서 나온 게 XML.
• XML은 현재도 많이 사용 (문서를 왔다갔다할때)

XHTML

• HTML + XML 현재 진행이 중단됨.
• 이도저도 안됨. -> HTML 따로 XML 따로 사용.

HTML5

• • HTML4의 영역과 XHTML 1.1을 합쳐서 만든 마크업 언어 기존의 HTML 확장 현재 우리가 사용하는 언어의 대부분은 HTML5
• 물론 예전에 만들어져 있는 웹 페이지들 보면 HTML4도 많음

인터넷 익스플로러가 웹 표준을 어기기 시작하면서 웹이 복잡해진 것. 위의 웹 언어의 발전도 인터넷 익스플로러 때문.

인터넷 익스플로러가 SGML을 무시하고 사용해도 화면에 표시될 수 있도록 해놓음. 개발자가 개발하기 어려운 부분들을 익스플로러가 넘어가도 되도록 해줌. 개발자는 개발하기 쉬워졌는데 언어가 지저분해짐.

###HTML5

요즘 웹브라우저의 특징 : HTML5 표준을 따라간다. HTML5 는 기존 웹 표준을 반드시 지켜야함. 기존보다 웹 표준이 강화됨

장애인, 노약자 등에 대한 보편적인 웹 접근성이 지원된다. -> 웹 접근성 표준 장애인이나 노약자 등이 좀더 사용하기에 편하도록 어떤 태그들이 어떻게 사용되어야 하고 꼭 어떻게 써야 한다라고 하는 것 그래서 웹 접근성을 평가해주는 업체도 따로 있음. 특히 구청, 시청 등 관공서들은 웹 접근성을 따라야 한다.

시맨틱 태그를 추가하여 기존의 태그들의 의미를 강화시킴 기존 태그들이 표현만 하는 거라고 하면 시맨틱 태그라는 개념을 추가하여 시맨틱 웹 기능을 제공

플러그인이 없어도 이미지나 mp4 파일 등을 플레이할 수 있도록 제공 -> 웹 페이지 하나가 하나의 어플리케이션이 될 수 있는 환경이 되었음.

###웹앱

native 어플리케이션까지는 못 가더라도 웹앱 수준에서 어느 정도 모바일을 지원함 아까 본 웹앱이 이정도 -> 이메일, 전화, gps 기능 등이 가능

웹 브라우저

웹 브라우저가 상당히 많은 이슈가 되어가고 있음. 지금 많은 사용자들이 인터넷 익플에서 크롬으로 넘어가는 추세

단순한 viewer로서의 예전 개념이 아니라 프로그램 자체를 실행하는 플랫폼화되어가고 있다. 데이터베이스 지원, 플레이어 지원 등!

웹 브라우저 자체가 플랫폼이 된다.

웹의 목표 : web for everything! 웹에서 모든 것을 사용할 수 있다.

인터넷 익스플로러가 시장을 점유하는 동안 비호환성 문제가 심화되어 웹브라우저 전쟁이 일어남 크롬이 가장 증가세가 뚜렷. 모바일에서 파이어폭스가 상당히 올라가 있음 오페라는 피씨에서 쓰는 사람들이 꽤 있음

웹브라우저는 단순한 번역기에서 벗어나 플랫폼화 되어가고 있다.

DOM : 트리를 구성한다. document object model

웹브라우저는 MVC 구조를 그대로 따른다. model과 data를 가지고 화면(view)로 분리됨 model -> HTML view -> CSS controller -> Javascript

네이티브앱, 웹앱, 하이브리드앱

• 네이티브앱 : 네이티브로 실행
• 웹앱 : 브라우저로 실행
• 하이브리드앱 : 모바일 기기에 설치 but 내부적으로는 웹 기술로 구현

##HTML5 기초

HTML5 문서의 구조

1. DOCTYPE 문서 유형 선언 <!DOCTYPE html>
2. html 태그
   • head : 머리글, 문서 설명 정보
   • body : 실질적인 문서의 영역

DOCTYPE을 제외한 거의 모든 태그는 쌍을 가진다. <html></html> <body></body> <div></div>

HTML은 태그로 시작해서 태그로 끝난다. 태그 이름은 대소문자를 구별하지 않지만, 일반적으로 DOCTYPE을 제외하고는 소문자로 작성한다.

태그를 겹치게 작성하면 안됨

<!-- Bad -->
<a>
  <b>
</a>
</b>

<!-- Good -->
<a>
  <b>
  </b>
</a>

엔티티 참조는 <, >, & 정도만 알아둘 것.

메타 태그 : 태그를 설명하는 태그, 문서를 설명하는 태그 <meta>

특수하게 빈 태그들이 있음 (empty tag)

• 속성, 속성값은 가지지만 내용은 가지지 않는 태그

  <meta>, <br>, <hr>

글자 태그

• 가장 많이 쓰는 태그
• 글자를 어떻게 나타내는가? 예) 굵게, 기울임

  <b>굵게</b>
  <i>기울임</i>
  

목록 태그

• 순서 목록 태그 : <ol>
• 비순서 목록 태그 : <il>

링크 태그

• <a>

../ : 상위 폴더 ./ : 현재 폴더

공간 분할 태그

• 이 뒤에 가면서 가장 많이 쓰는 태그 중 하나
• 특히 <div>는 앞에 나와 있는 거의 모든 태그보다 가장 많이 사용됨
  • css와도 많이 연관되어 있음
  • 태그 자체는 큰 의미가 없이, 어디서부터 어디까지다, 라는 페이지 공간 분할로써의 역할
• <span>과 <div>의 차이는 인라인 형식인가 블록 형식인가의 차이

시맨틱 태그

• <header>, <nav> <section>, <article>, <aside>, <footer>은 모바일 웹 페이지에서도 가장 많이 쓰이는 형태
• 그 중에서도 <header>, <nav>, <footer>가 가장 많이 쓰인다.

내용을 단위로 분할하여 화면에 나타낸다.

참고

• macOS Apache Tomcat 설치, 아파치 톰캣 실행 방법
• 맥 OS : 터미널에서 자신의 IP 주소 보는 방법
• HTML/CSS/SCSS

오늘 할 일

• 어제 코딩테스트 리마인드 (못 풀었던 문제 풀고 정리)
• 자소서 작성 및 제출
• 알고리즘 문제풀이
• 프로젝트 firebase에 연결