전체 글(58)
-
CSS3 em과 rem 의 차이
rem은 root em이라는 뜻으로, HTML 문서의 root 요소인 을 가리키며, 이 요소에 지정된 크기를 기준으로 상대적인 값을 가지게 된다는 것이다. em 사용 - 부모로부터 글꼴 크기를 상속받음 html = 100% = 16px body = 0.5em = 8px div = 0.5em = 4px p = 0.5em = 2px rem 사용 - 로부터 크기를 상속받음 html = 100% = 16px body = 0.5rem = 8px div = 0.5rem = 8px p = 0.5rem = 8px 사용 상황 예시 단말기의 해상도에 따라 기본 글꼴 크기를 전체적으로 다르게 제어할 필요가 있을 때 미디어쿼리와 함께 rem 단위를 사용하면 효과적입니다. 예를 들어 데스크톱 글꼴이 10px ~ 20px 범위인..
2022.09.26 -
모바일(유동형) 웹/앱 이론
Web App Native App - ios (iphone operated system), android(google),윈도우즈 폰7(MS) 와 같은 모바일 기기에 직접 설치되고 운용되는 전용 어플리케이션이다. ios → object C (mac에서만 작업 가능) → .ipa android → java (mac/window) → .apk 앱스토어에 등록하고 판매 Mobile Web - 모바일 웹은 일반적인 웹 기술로 개발되고 모바일 브라우저에 의해 실행되는 웹 애플리케이션을 통칭 하지만 모바일 웹앱과 조금은 구분되는 개념으로 일반적인 웹 사이트의 느낌을 모바일로 그대로 옮긴 형태라 할 수 있다. == Mobile Web App 모바일 브라우저에서 URL을 통해 접근하는 웹 사이트 html,css,js....
2022.09.26 -
Javascript 외부데이터 달력/차트 site
https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org https://nuli.navercorp.com/tool/nwagon/exp NULI 적용 예 Radar Chart 스파이더 또는 웹차트 이외에도 여러 다른 이름으로 불리우고 있는 radar차트는 3개나 그 이상의 데이터를 한번에 보여주기에 유용하게 쓰이며 각각의 데이터가 가져야 하는 목 nuli.naverco..
2022.09.22 -
JS/jQuery Ajax Json
JS JS 에서 json data file을 불러오는 코드 var 변수명 = new XMLHttpRequest(); xhr.onload = function() { if(xhr.status === 200) { // 서버가 정삭 작동 할 때 responseObject = JSON.parse(xhr.responseText); //서버로 부터 전달된 json responseText 속성을 통해 가져올 수 있다. // parse() 메소드를 호출하여 자바스크립트 객체배열로 변환한다. // 코드 } }; 변수명.open('GET', 'Json 링크', true); // 요청을 준비한다. 변수명.send(null); // 요청을 전송한다 Json file 은 하나의 JS 에서 여러 파일을 불러올 수 있다. Json ..
2022.09.20 -
JS/jQuery-Ajax
Ajax - 비동기 방식 서버에서만 동작한다. php 의 처럼 따로 분리된 html 파일을 새로고침 없이 불러올 수 있다. display : none; 은 눈에만 보이지 않고 데이터는 존재하기 때문에 트래픽이 늘어나지만. Ajax로 불러올 시 작동시키기 전까지는 데이터가 존재하지 않아 트래픽 관리에 용이하다. ※ => 해당 링크의 id 위치로 이동 var 변수명 = $('a').attr('href'); 변수명 = 변수명.replace('#',' #'); $('id명').load(변수명); //파일안에 있는 아이디의 태그만 가져오는 문법; Ajax 문법을 사용해 html 파일을 불러올 때 function(e){e.preventDefault} 를 사용하지 않으면 해당 페이지로 이동하게된다. XML, JASO..
2022.09.19 -
jQuery stop() 메서드 빠른클릭시 문제
stop() 메서드 안에는 두가지 매개변수가 존재한다 clearQueue() , goToEnd() 매개변수의 값을 지정하지 않을 시 두가지 값은 디폴트 값인 false 로 처리된다 첫번째 매개변수인 clearQueue 를 true 값을 준다면 animate() 메서드가 동작하는 시간 도중에 애니메이션이 중지하게 된다. 두번째 매개변수인 goToEnd() 에 true 값을 준다면 animate() 메서드에 설정한 동작이 모두 종료된 뒤 애니메이션이 중지하게 된다. animate() 메서드를 사용한 버튼을 빠르게 연속클릭한다면 animate() 의 동작시간보다 클릭속도가 빨라 stop() / clearQueue() 를 사용한다 해도 애니메이션이 무너지게 된다. stop() 메서드에 두가지 매개변수를 모두 t..
2022.09.16