프로그램 (38) 썸네일형 리스트형 [javascript]자동으로 커서/화면 이동 가끔 프로그램을 만들다보면 자동으로 커서가 이동해줬으면 좋겠다는 생각을 할 때가 있다 예를 들면 회원가입이나 로그인을 할때 input창을 클릭해서 마우스 커서를 이동 한다든가 enter를 쳤을 경우 다음으로 이동하고 싶은 등등의 경우가 있다 커서이동 element.focus(); //id로 선택 후 포커스 이동 document.getElementById('IdName').focus(); document.querySelector('#IdName').focus(); //class로 선택 후 포커스 이동 document.getElementsByClassName('ClassName');.focus(); document.querySelector('.ClassName').focus(); 이렇게 해도 가끔씩 커서가 .. [javascript]자바스크립트로 구글 스프레드시트 이용하기(예제 : 랭킹시스템 만들기) 취미로 개발을 하다 보니 서버도 없고 해서 랭킹같은 순위를 어디에 저장해야 될까 고민 하다가 생각해낸것이 구글 스프레드시트에 저장을 한뒤 스프레드시트의 함수로 랭킹을 구현해 보았습니다 자바스크립트로 구글 스프레드 시트에 자료 입력하는 방법 1. 먼저 스프레드 시트를 만들고 제목이나 메뉴등 기본적으로 준비를 한다 2. 메뉴 - 확장 프로그램 - Apps Script //var SHEET_NAME = "시트1"; var SCRIPT_PROP = PropertiesService.getScriptProperties(); function doGet(e){ return handleResponse(e); } function doPost(e){ return handleResponse(e); } function hand.. [CDN]구글 드라이브로 html, js,css등등의 파일 사용하기 구글 드라이브 구글 드라이브는 무료로 나의 자료등을 올리고 사용할 수 있는 클라우드이다 하지만 구글 드라이브 안에 있는 파일을 사용 하려고 url을 접속하게 되면 해당 파일을 단순하게 볼수 있는 뷰어 프로그램이 연결이 되어 html로 사용할 수는 없다 구글드라이브를 html에서 사용할 수 없는 문제 구글드라이브에 js파일이 들어있는 구글드라이브 주소로 접속하면 뷰어가 열리게 된다 js파일 뿐만아니라 다른 파일들도 파일을 그대로 가져오는것이 아니라 뷰어프로그램으로 보여주게 된다 그렇기 때문에 html에서 바로 사용할 수가 없다 구글 드라이브를 뷰어 프로그램이 아닌 파일 자체로 연결 시켜주는 곳 위와 같은 문제점 때문에 html에서 js파일 css파일 등등을 사용할 수 없는 점을 해결 해 주는 사이트가 있다.. [HTML]목록 만들기 ol, ul, li 목록 만들기 글이 길 경우 각 주제에 맞게 목차를 만들면 보는 입장에서 편하다 그리고 어떠한 동일한 주제를 갖고 있는 글 같은 경우에는 목록을 많이 사용한다 목록을 만들어주는 태그는 li태그이다 목록의 성향에 따라서 순서를 나타낼 필요가 있고, 순서가 필요없는 경우가 있다 예를 들면 목차(ol태그) HTML CSS 메뉴(ul태그) 삼각김밥 도시락 li태극의 어미로 ol/ul태그가 오는냐에 따라 숫자/점이 붙게 된다 홈페이지의 메뉴바 역시 목록과 같은 성질이기 때문에 주로 li태그에 CSS를 주어서 메뉴바를 만든다 See the Pen Untitled by korearaogong (@korearaogong) on CodePen. [HTML]표만들기 table, tr, th, td table 태그 HTML에서 표를 만든다는 것은 생각보다 쉽지 않고 귀찮은 일이다 그래도 표라는 것은 잘 정리된 자료로서 무언가를 보기 쉽게 해주기 때문에 자료를 정리할때에는 사용을 할 수 밖에 없다 일단 표를 만드는 시작 태그는 table이다 table안에 행과 열을 만들어 주면 표는 완성된다 table의 자식 태그 tr 태그 : 줄을 추가해 준다 tr의 자식 태그 td 태그 : 칸을 추가해 준다 th 태그 : 칸을 추가해 준다(제목/소제목/목록이름) 주로 첫번째 행 또는 첫번째 열에 사용된다 즉 안에 줄을 만들어주는가 있고 이 태그 안에 칸을 만들어주는 또는 가 있다 속성 colspan : 가로로 합춰준다(가로 병합) rowspan : 세로로 합췆준다(세로 병합) See the Pen Untitled.. [HTML]select, option, optgroup 드롭바 사용법 드롭바를 만드는 방법 드롭바를 만드는 방법은 select, option을 이용한 방법과 ol, ul, li를 이용한 방법이 있다 select, option 태그는 기본적으로 드롭바를 만들어 주는 옵션이라 만들기가 비교적 쉽지만 기본 틀이 짜여져 있기 때문에 CSS 등을 손보는게 비교적 귀찮다 그래서 드롭바를 검색했을 경우 ol, ul, li태그를 이용하는 경우가 많다 select tag 내가 사용한 select tag는 TOCFL 준비1(準備級一級) TOCFL 준비2(準備級二級) TOCFL Band A-1(入門級) TOCFL Band A-2(基礎級) TOCFL Band B-3(進階級) TOCFL Band B-4(高階級) TOCFL Band C-5,6(流利級) HSK 1 HSK 2 HSK 3 HSK 4 H.. [HTML,javascript]구글 번역기 넣기 결과 [HTML]input 속성 종류 input input 태그는 일반적인 태그들과는 달리 무언가를 감싸지 않는다 즉 이 없다 input 태그는 무언가를 입력할때 사용된다 input에는 다양한 종류가 있다 input 종류 글씨를 입력 숫자를 입력 비밀번호를 입력 라디오 버튼 체크 박스 버튼 value로 버튼에 값을 입력할 수 있다 제출 버튼 초기화 버튼 파일 올리기 컬러 선택 날짜 날짜/시간 월 주 시간 이메일 숨김 이미지 버튼 조절바 검색박스 전화 인터넷 주소 결과 See the Pen Untitled by korearaogong (@korearaogong) on CodePen. 이전 1 2 3 4 5 다음
