2022. 3. 21. 16:10ㆍWeb
220321 모바일로배우는 JSP TIL 작성
1. 웹 문서를 스마트폰으로 보기 위해서는?
예를 들어 hello.html을 스마트폰의 웹브라우저에서 실행하면 콘텐츠가 작게 보이기 때문에
접속하는 디바이스에 최적화된 크기로 출력되도록 <head>부분에 <meta> 태그를 출력한다.
<meta name="viewport" content="width=device-width, initial-scale=1">VSCode Editor을 사용할때 처음에 보이는 그것이 웹브라우저 화면을 모바일 화면 크기에 최적화되게 출력하는 것이다.
2. jQuery 그리고 jQuery Mobile
일단 jQuery > jQuery Mobile 일 것 같지만, 속성은 그렇지 않는다는 것.
제이쿼리 모바일은 모바일 환경에 알맞은 기능들을 제공하는 제이쿼리 코어를 바탕으로 만들어진 확장 기능 중에 하나이다.
제이쿼리는 자바스크립트의 라이브러리이다. 2006년 미국의 존 레식이 뉴욕시 바캠프에서 처음으로 소개
Write Less Do more 적게 작성하고 많은 것을 하자 라는 모토로 제이쿼리를 발표했다.
=> 웹사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해준다.
제이쿼리를 사용하는 이유?
주요 웹브라우저의 구버전을 포함한 대부분의 브라우저에서 제이쿼리를 지원한다. HTML DOM을 손쉽게 조작할 수 있으며 CSS 스타일도 간단히 적용이 가능하다.
애니메이션 효과나 대화형 처리를 간단하게 적용시켜준다
같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있다.
BUT.. 제이쿼리의 사용률은 여전히 높으나 개발자들 사이에서의 위상은 예전같지 않다.
(학교에서 지금은 제이쿼리를 가르쳐주더라도, 왜 개발자들 사이에서 위상이 예전같지 않은지 파악하는 것도 나름 중요하다고 생각하여 찾아보았다)
IE는 마이크로소프트의 다른 애플리케이션처럼 안정적인 변화를 추구하여 버전 업그레이드가 느렸으며
데스크톱 기반의 Windows 환경에 주력하였다. 따라서 생산성과 가독성이 높은 간결한 코드를 작성하기 위해 2007~2008년부터 제이쿼리가 본격적으로 이용되었다 (이때 당시는 IE의 파워가 쎘다)
웹페이지는 브라우저 상에서 DOM(Document Obejct Model)이라는 표준 형식으로 파싱되어 표현된다.
사용자 조작에 맞춰 동적으로 변화하는 대화형 웹을 구현하기 위해서는 DOM 조작이 필수적이다.
그러나 대부분의 브라우저에서 DOM 조작이 발생할 때마다 배치나 화면 표시에 많은 연산을 발생시키다보니 조작이 빈번해질수록 브라우저 성능이 낮아지는 문제가 발생하고 있었고 이는 곧 개발자의 창의력을 방해하는 요소로 작용했다.
>> 이러한 이슈들로 인해 자바스크립트 라이브러리 중의 하나인 리액트가 HOT
React를 활용하면 메모리에 가상DOM을 구축하여 실제 DOM과의 차이점을 비교하여 변화가 있는 부분을 실제 DOM에 적용할 수 있다.
성능이 뛰어나고 화려한 웹페이지를 비교적 손쉽게 제작할 수 있게 하여 개발자들에게 크게 환영을 받았다.
(이래서 제이쿼리의 위상이 예전같지 못하다는 것이군)
그래서 요즘은 React나 Vue 같은 프레임워크 라이브러리도 가상DOM을 활용하기 때문에 개발자들 사이에서 인기가 많은 것이다.
그렇다면! 웹 프론트엔드 환경의 변화에 따라 제이쿼리는 은퇴를 준비하고 있는가? NO
제이쿼리가 속해있는 OpenJS는 제이쿼릴르 노드JS 등과 함께 "영향력 있는 프로젝트"로 분류하였고 제이쿼리는 이미 성장 목표에 도달했으며 개발,유지보수 및 장기 지원의 지속적인 주기를 봥하는 성숙한 프로젝트로 자리잡고 있다.
따라서 금방 프로젝트가 망하거나 그러지는 않는다.
3. 자바스크립트는 무슨 언어?
자바스크립트는 컴파일을 하지 않고 바로 실행시킬 수 있는 script 언어이다.
* script언어란? 다른 응용 프로그램에 삽입되어서 동작하는 프로그래밍 언어
자바스크립트,제이쿼리,JSP,PHP,ASP,펄,파이썬 등의 스크립트 언어는 다른 응용 프로그램 안에 삽입되어 해석하는 방식으로 작동 (이 수업은 스크립트 언어 수업이었구나..)
* 비script 언어는 C,C++,JAVA > 얘네는 컴파일 된 후 독립적으로 작동하는 하나의 '완전한' 응용 프로그램
파일 크기가 커질수록 전송 파싱 실행에 지연이 발생하여 페이지 초기화 성능을 떨어뜨리기 때문에 자바스크립트 라이브러리들은 용량을 줄이기 위해 노력한다.
4. Sizzle의 내재화
제이쿼리가 지금의 위치에 도달하는데는 CSS 선택자 엔진(Selector Engine)인 시즐의 역할이 컸다.
IE 8버전이 등장하기 전까지 개발자들은 element들을 찾는데 getElementById와 같은 길고 복잡한 API를 사용할 수 밖에 없었기 때문에 DOM 구조에서 엘리먼트 몇 개만 찾으려고 해도 코드가 난잡하기 일수였다.
Sizzle의 경우 CSS 작성 시 흔히 사용하는 선택자와 시즐만의 확장 선택자를 이용하여 아무리 복잡한 DOM 구조여도 짧은 코드로 손쉽게 element 찾기가 가능하여 이것이 제이쿼리가 호평을 받는 이유가 되었다(지금보다는 과거에 더)
5. <section>
HTML 문서의 독립적인 구획을 나타낸다. 더 적합한 의미를 가진 요소가 없을 때 사용한다.
각각의 <section>을 식별할 수단이 필요한데, 이를 식별하기 위해 주로 제목 태그 <h1>~<h6> 태그를 <section>의 자식으로 포함하는 방법으로 사용한다.
그러나 <section> 요소를 일반 컨테이너로 사용하는 것은 적절하지 않고 단순한 스타일이 목적이라면
<div>
를 사용해야 한다.
<section>은 대개 문서 요약에 해당 구획이 논리적으로 나타나야 할 때 사용한다(문단 내용 구분이 명확한 것)
6. <header>와 <footer>
구조도를 보니 제이쿼리 모바일의 형태를 이해할 수 있었다.
7. CSS 삽입 방식
inline style sheet <footer style="width:100%~">
Internal style sheet <head></head> 태그 내에 작성하고 <style type="text/css">적용
external style sheet -> 이 방법을 가장 많이 사용. 같은 디렉토리 내에서나 다른 디렉토리에서 해당 css 파일을 불러와서 연결하기만 하면 어디서든지 적용 가능(이것의 모듈화의 장점) <link rel="stylesheet"~>로 해당 css 파일 연결
-> 주로 <title> 밑 </head> 태그 위에 작성한다.
8. width 속성
%는 상대 단위를 나타낸다. 가용 너비가 있다면 그에 비례해서 커지거나 작아지게 하고 싶을 때 상대 단위인 %를 사용한다
ex) 가용 너비가 400px인 상황에서 width:50%를 하면 해당 엘리먼트의 너비는 200px이 되는 것이다.
width 속성이 기본값을 100%로 알고 있는 경우가 많은데, width 속성을 명시하지 않으면 auto 라는 키워드가 디폴트값으로 사용이 된다. auto 키워드를 사용하면 브라우저가 해당 엘리먼트의 width 속성값을 자동으로 계산해준다.
추가적으로 width 속성에서 min-content는 엘리먼트의 너비를 줄일 수 있는 만큼 최소로 줄일 때 사용
max-content는 엘리먼트의 너비를 최대한 늘이고 싶을 때 사용
9. CDN (Content Network Delivery)
html에서 제이쿼리 모바일을 사용하려면 CDN을 추가해주어야 한다
콘텐츠 배달 네트워크이며 사용자에게 웹 콘텐츠를 효율적으로 제공할 수 있는 서버의 분산 네트워크이다.
사용자와 가까운 위치의 에지 서버에 캐시된 콘텐츠를 저장하여 대기 시간을 최소화한다.
10. 제이쿼리 모바일 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>JSP WORLD</title>
<meta name=“viewport” content=“width=device-widt, initial-scale=”1>
<link rel=“stylesheet”
href=“http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css”/>
<script src=“http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script src=“http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script>
</head>
<body>
<div data-role=“page”>
<div data-role=“header” data-theme=“b”>
<h1>My Title</h1>
</div>
<div data-role=“content”>
<p>Hello world</p>
</div>
<div data-role=“footer”>
<h3>Footer</h3>
</div>
</body>
</html>
11. 제이쿼리 모바일 내의 다양한 속성들
data-theme 속성을 지정하면 테마 변경이 가능하다
ex) <div data-role="page" data-theme="b">를 하면 page 전체에 b 속성을 적용 가능하다는 뜻
기본 테마는 a 테마이고 기본 테마에서 제공하는 Swatches는 a,b,c,d,e 5개인데 필요에 따라 f~ 등 스와치 추가 정의 가능
data-role : HTML 기본 요소를 더 향상된 디자인의 위젯으로 변환시켜 준다 (header,content,footer)
data-theme: 모바일용으로 제공되는 세련된 테마를 적용한다 (알파벳 소문자로 속성값 지정)
제이쿼리 모바일에서 제공하는 리스트 형태 중에서 가장 기본적인 형태 <ul data-role="listview">로 표현하고 싶은 항목은 <li>태그로 표현한다 + 순서 처리가 되어있는 항목은 <li>대신 <ol> 태그로 작성한다.
<div data-role=“content”>
<ul data-role=“listview”>
<li>list 0</li>
<li>list 1</li>
<li>list 2</li> </ul>
</div>
12. <audio>,<video>
controls의 속성은 플레이 버튼이나 정지 버튼과 같이 오디오나 비디오의 실행을 제어한다
audio src="해당 오디오가 저장된 경로" controls="controls autoplay="autoplay">와 같은 식으로
'Web' 카테고리의 다른 글
| 웹 TIL) label,검색쿼리구조,드롭다운,value (0) | 2022.06.11 |
|---|---|
| 웹TIL) 220322 (inline,block,시맨틱마크업,href) (0) | 2022.03.22 |
| Callback 함수에 관하여 (with.JS Hoisting) (0) | 2022.01.25 |
| [node.js] 환경변수 설치는 잘 되어있는데..? node.js 실행 안됨(터미널 문제) (0) | 2022.01.24 |
| CSS가 안먹힌다..? (+캐시 문제) (0) | 2022.01.18 |