SQL 과정

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

memory0136 2019. 1. 30. 12:43

<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일까지)