1.30 (NCS)java 기반 하이브리드 앱 개발 과정(jQuery-mdiaquery, interactive, Mobile) 수정중

<details> 태그 = https://codedragon.tistory.com/5712

• 이 태그는 추가적인 설명 태그로 주소 <summary>태그와 함꼐 사용하며 웹 페이지의 세부정보나 적인설명을 하고자 할 때 사용하며 해당 내용을 숨기거나 보여지게 설정할수 있다.
• 이 태그는 인터넷 익스플로러에 지원되지 않는다.

<summary> 태그 = https://codedragon.tistory.com/5712

• 세부 정보 요약 태그
• <details> 태그에서 눈에 보이는 제목을 정의하고 <summary> 태그로 묶인 부분을 클릭하여 세부정보를 보이거나 감추게 할수 있다.

<command> 태그 = https://codedragon.tistory.com/4347

• 사용자가 호출할수 있는 명령을 지정하는데 사용하는 명령 지정 태그
• 이 태그는 라디오 버튼, 체크 박스 같은 명령 단추를 재설정하며, 반드시 <menu> 태그 안에서 있어야 한다.
• 주로 사용되고 있는 브라우저 중 해당 태그를 지원하는 브라우저가 아직 없다.
• 속성

1. lcon = 명령을 나타내는 그림을 지정하는 속성
2. label =  명령의 이름을 지정하는 속성 
3. type = 명령의 종류를 지정

<menu> = https://codedragon.tistory.com/4347

• 목록과 메뉴를 정하는 태그
• HTML4에서는 W3C가 이 태그를 사용하지 않을 것을 권고 하였으나, HTML5에서는 실제 문서의 메뉴정보를 제공하는데 사용
• 현재 IE 12버전과 Firefox에서만 지원

Meida Query = https://codedragon.tistory.com/3438

• 디바이스 사이즈에 따라 화면을 다르게 표현하는 방식
• 스크린 사이즈, 방향 또는 해상도에 따른 조건에 맞춰 페이지 특정 스타일 시트를 지정한다.
• 스크린 사이즈, 해상도 등의 조건에 따라 CSS 코드를 분기하여 최적화된 UX(User Experience) 제공하게 되는 것이다.
• 웹페이지가 사용자 화면 해상도에 따라 페이지의 내용을 유연하게 바꾸어주게 된다.

 

반응형 웹 디자인의 핵심 요소 = https://codedragon.tistory.com/3440

• 반응형 웹 디자인의 핵심 요소는 CSS3 미디어 쿼리 이지만,
• 미디어 쿼리 이 외의 CSS3 모듈을 사용하여 더욱 더 유연성을 강화 가능하고, 기본 CSS3의 그레디언트와 섀도,타이포크래피, 애니메이션, 그리고 트랜스폼으로 복잡한 자바스크립트와 그래픽을 대체할수도 있다.
• 반응형 웹 디자인에 HTML5를 사용하는데

1. 검색 엔진에 더 많은 의미를 제공하는 HTML5의 새로운 시맨특 요소 사용이 가능하고
2. HTML5는 많은 리소스를 필요로하는 자바스크립트를 사용하지 않고도 로딩이 빠르고 가벼운 코드 기반의 반응형 웹 디자인을 만들수 있다.

• 원칙

1. 모든 디바이스와 스크린 크기를 설정 가능한 별도의 시스템을 갖추어 테스트 수행

• 대체

1. 브라우저 창의 크기를 조절하는 것으로 테스트 가능

• 이선 마르코트(Ethan Marcotte)가 만든 개념이다.

미디어 쿼리 구문 = https://codedragon.tistory.com/5760

• 미디어 쿼리 문법은 대소문자를 구별하기 않는다.
• 종류

1. 디바이스

         가. all = 모든 디바이스를 대상

         나. screen = 컴퓨터 화면을 대상

         다. print = 인쇄를 미리 보기를 대상 / 실제 인쇄 매체를 대상

         라. orientation = 디바이스의 방향을 대상 / portraot(세로로 길게) / landscape(가로로 길게)

2. 연산자

    가. and = and연산자 역할 수행(x)

    나.  , = or연산자 역할 수행

3. 속성 값

    가. width = 대상 매체의 해상도 너비 값을 지정해서 미디어 쿼리가 만족하는 조건을 설정 

      = min- , max- 의 접두어로 범위 지정가능

    나. height = 대상 메체의 해상도 높이 값을 지정해서 미디어 쿼리가 만족하는 조건을 성정

 = width와 동일

반응형 웹 스타일 시트 = https://codedragon.tistory.com/5742

• 화면에 나타나는 브라우저의 너비를 이용하여 스타일을 다르게 표시해주었으며 이 방식이 반응형 웹 개념
• 으로 발전
• 브라우저 너비에 따른 스타일 시트

• 모바일 디바이스에 맞춰 반응형 웹페이지 설정

ex)

뷰 포트 = https://codedragon.tistory.com/5749

• 디스플레이의 화면상의 화상을 표시하는 것을 의미
• 스마트 디바이스 기종별로 각기 다른 화며면 크기에 맞춰 개발하는 것이 아닌 자동으로 화면 사이즈에 맞추어서 표시 해주게 된다.

웹페이지를 모바일 환경에 맞게 보여주기 = https://codedragon.tistory.com/5749

• 각 디바이스에 최적화된 상태로 보여지게 된다.

모바일 HTML 기본 셋팅 = https://codedragon.tistory.com/5749

• 메타테그를 이용하여 모바일에 적합한 사이트 만들기

* CSS 파일을 HTML에 불러오는 방법

 

= dasktop.css 영역과 mobile.css영역을 css 스타일 정보를 불러온다.

 = 위의 media 속성을 추가하여 브라우저 창을 늘이거나 줄일때 css 영역을 불러오는 조건을 걸수도 있다.

window resizer = https://codedragon.tistory.com/8236

• 반응형 웹 개발시 브라우저 창 크기를 즉석에서 조절 가능하다.
• 다운로드 링크 = https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

모바일과 데스크톱 pc의 차이점 = https://codedragon.tistory.com/8334

• 모바일에서는 이미지를 적게 사용하여 무선 인터넷 사용을 최소화 해주어야한다.
• 모바일 디바이스 화면크기는 다양하기 때문에 데스크톱 pc 처럼 작업하는 것은 바람직하지 않다.
• 새로운 디바이스, 브라우저, OS(운영체제)가 출시되고 있기 때문에 어느 모바일 디바이스로 작업 할 것인지 기준을 정해 놓을 필요가 있다.

시맨틱 웹 HTML 작업 = https://codedragon.tistory.com/8334

• 시맨틱 웹 HTML 작업에는 시맨틱 마크업과 뷰 포트 메타데이터가 있다.

• 시맨틱 웹 모바일 스타일링

• 모바일 스타일링의 미디어 쿼리 제작

1. 미디어 쿼리는 모바일 디바이스와 데스크톱 PC를 보두 지원하기 위해서는 각 경우에 맞는 CSS 스타일을포함시켜 사용한다.

• 모바일 스타일링의 공통 스타일 시트 별도 제작

1. 동일한 스타일이 모바일과 데스크톱 PC에 중복해서 사용되는 경우에도 공통분분모만 모아서 별도의 파일로 분리한다.

• 모바일 스타일링의 상속 기능활용

1. 상속 기능을 이용하여 상위 엘리먼트의 스타일을 그대로 처리 가능해 편리하다.

* vh 단위 = 1vh당 10px로 되어있다.

* 클리어픽스라는 클래스를 가진 태그의 앞과 뒤를 대상으로 한다.

* 왼쪽부터 쌓이기 시작

*

*

*

*

Geolocation = https://codedragon.tistory.com/5758

• 브라우저가 사용자의 지리적 위치를 찾아내고 그 정보를 어어플리케이션에서 이용 가능하도록 하는 기능
• 사용자의 현재 위치정보를 이용하기 위해서는 먼저 승인절찰차를 거쳐야 하며, 승인이 완료된 상태라면 사용자 콘텐츠가 생성될 때 지오-태킹(geo-tagging) 기능을 제공 가능하며, 사용자의 위치가 변경될때마다 콜백 메소드로 전달되어 항상 최신 위치 정보를 유지할수 있다.
• 이를 활용하면 근처에서 촬영된 사진 등에 대한 정보를 유기적으로 연결시켜 서비스 할수 있다.
• 지리정보는 기본적으로 GPS 장치로부터 얻어지는 것이 가장 정확하지만, 그 외 지리 정보를 얻을수 있는 수단들을 단계적으로 이용하여 최소한 해당 도시 또는 국가단위의 지리정보를 취득할수 있다.

ex)

• 방문자의 위치를 결정하는 항목

1. IP 주소
2. 무선 네트워크 연결
3. 셀 타워
4. 기기의 GPS하드웨어
5. 등등

• Map Types

getCurrentPosition() - 현재 위치 얻기 = https://codedragon.tistory.com/5737

• 사용자의 현재기기의 위치를 position 오브젝트 형으로 변환 해주는 함수이다.
• 현재 위치정보를 비동기로 확인한 다음 처리 결과를 인수로 하여 successCallback을 한번만 호출한다.
• 에러가 발생 했을 때는 상세한 에러정보를 인수로 하여 errorCallback을 호출한다.
• 위치정보를 얻었을때 실행되는 함수의 첫번째 매개변수에는 이벤트 객체가 자동으로 할당되고 이벤트 객체로부터 위치정보를 나타내는 다양한 값을 얻을수 있다.
• getCurrentPosition() 형식

• getCurrentPosition()의 옵션형식

• position.coords의 속성 정보

1. position.coords를 통해 아래 속성 정보를 확인할수 있다.

• 에러 코드

*구글 맵 가져와 속성 지정하기

* getElementById는 바디 태그에 있는 아이디 속성을 가진 태그를 가져온것

* initLoc = 변수

* 구글 마커 가져오기 initLoc(현재위치) , map(구글맵)은 변수이다.

구글 맵 자바스크립트 API 키 받기 = https://codedragon.tistory.com/8435

 = 조만간 올릴 예정이니 참고 할 것!

Media Queries

• 반응형 웹 사이트를 확인할수 있다.
• 해당 사이트를 참조하여 좋은 아이디어를 찾아 볼수 있다. =  https://mediaqueri.es/

Canva 무료 탬플릿 사이트

 가. 다양한 탬플릿을 무료로 제공

 나. 수정이 비교적 자유로워 다양한 곳에 작업이 가능

 * https://www.canva.com/

HTML5 UP 무료 탬플릿 사이트 = https://codedragon.tistory.com/6034

• 여러가지 다양한 테마의 탬플릿을 무료로 다운 가능
• Live Demo를 클릭하면 웹 사이트의 디자인을 바로 파악 가능
• 소스를 다운 받은 후 수정해 볼수 있다. = https://html5up.net/
• 직접 다운로드도 있으니 사이트 참조 할것

W3

• 웹과 모바일 버전의 웹 디자인 테마를 제공하는 사이트 = https://w3layouts.com/

codrops

• 다양한 화면 전환 효과와 애니메이션 기능을 제작하는 방법과 소스를 제공하는 사이트
• [Playground] 메뉴에서 데모와 소스 확인 가능 = https://tympanus.net/codrops/

TemplateMonster

• 다양한 소스의 템플릿을 제공하며 구매해서 사용할수 있다.(유료와 무료가 있다.) = https://www.templatemonster.com/

wrapbootstrap

• 다양한 소스의 템플릿을 제공하며 구매해서 사용가능(유료 무료가 있다.) = https://wrapbootstrap.com/

HTTrack - WEBSITE COPIER

• 설치형과 비설치형 두가지 모두 지원
• 오픈소스 형식으로 많이 사용들 하고있다. = https://www.httrack.com/

Arcive File

• 해당사이트가 없어져서 강사님이 가지고 있는 템플릿 파일만 따로 올린것 (계속 수정 중 참고!)

• https://codedragon.tistory.com/search/HTML5%20Templates

stackshare

• 서비스의 기술 stack을 보여주는 사이트정보를 확인할수 있는 곳 = https://stackshare.io/

Wappalyzer

• 방문한 사이트에 적용된 기술, 라이브러리 도는 웹 서버 등 주요 기술 스펙을 보여주는 크롬 확장 프로그램

• https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg

CSSVIEWER(CSS뷰어)

• 마우스가 위치한 영역의 ID와 글꼴, 텍스트, 색, 배경, 상자, 위치 및 효과 특성에 대한 상세정보를 보여주는 도구

• https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

Page Ruler(페이지 룰러)

 

* https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

Visual Inspector(비주얼 인스펙터)

• 웹사이트의 색상 구성, 글꼴, 이미지 등을 한눈에 확인할수 있으며, 웹디자인에 필요한 대부분 요소 확인하고 임시로 수정해 볼수 있다.

• https://www.canvasflip.com/visual-inspector/
  

the nest of javascript, html and css

• web platform과 관련되 트렌트를 체크할수 있는 사이트

• https://bestofjs.org/

javascripting

• 자바스크립트 라이브러리, 프레임 워크에 대한 트렌드와 정보 확인하는 사이트

• https://www.javascripting.com/
  

Awesome javascript

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

• https://github.com/sorrycc/awesome-javascript

Google Map 자바스크립트 API 키 받기 = https://codedragon.tistory.com/8435

lab10 - 메인 페이지 만들기(대문 페이지) 만들어보기 (2월 19일까지)