CSS .indent { padding:3em; text-indent:-3em; } HTML <div class="indent"> 제 6 조 (자격과 범위) 조합원은 노동조합 및 노동관계조정법 제2조 규정에 의한 "사용자"(사업주, 사업의 경영담당자 또는 그 사업의 근로자에 관한 사항에 대하여 사업주를 위하여 행동하는자)을 제외한 회사의 종업원으로서 소정의 조합가입절차를 필 한자로 한다. </div> 결과물 제 6 조 (자격과 범위) 조합원은 노동조합 및 노동관계조정법 제2조 규정에 … 계속 읽기 CSS 문장 2번째 문장부터 들여쓰기
[카테고리:] front-end
Shadow Dom(HTML 코드 숨기기)
유튜브 "코딩애플"님의 강좌를 정리하였습니다. HTML <div id="mordor"></div> JAVASCRIPT document.querySelector('#mordor').attachShadow({mode:'open'}); document.querySelector('#mordor').shadowRoot.innerHTML=` <p>심연에서 왔도다</p> `; 위 화면의 결과를 개발자도구에서 확인하면, <div id="mordor"></div> 만보이고, '심연에서 왔도다'는 안보여진다. 그냥 개발자가 멋있어 보일려고 이런 코드를 작성한다고 하는데, 보이게 하려면 개발자도구 설정에서 ShadowDom을 활성화 시키면 된다. 사용자정의 엘리먼트 작성 방법 우선 아래와 같이 작성을 하면 <custom-input/> 이라는 새로운 엘리먼트를 클래스화하여 사용할 … 계속 읽기 Shadow Dom(HTML 코드 숨기기)
HTML5 소리 재생
출처: http://m.mkexdev.net/63 HTML <button id="btnWsAudio">재생</button> JAVASCRIPT var wsAudio = null , wsAudio_didUserStop = false , wsAudio_isLoaded = false , soundBook = [ "combat_music.mp3" , "Death_Note_OST.mp3" , "Game_of_Thrones_OST.mp3" , "Harlem_Shake-Washing_Machine.mp3" , "Pacific_Rim_OST.mp3" ] , soundRandomChoosed = soundBook[Math.floor(Math.random()*(soundBook.length))] ; function wsSetup(){ wsAudio = new Audio(); //wsAudio = document.getElementById("wsAudio"); wsAudio.src = '/soundEffect/'+soundRandomChoosed; wsAudio.preload = true; //wsAudio.autoplay = true; … 계속 읽기 HTML5 소리 재생
SHA256
<script type="text/javascript"> /** * Secure Hash Algorithm (SHA256) * http://www.webtoolkit.info/ * Original code by Angel Marin, Paul Johnston **/ function SHA256(s){ var chrsz = 8; var hexcase = 0; function safe_add (x, y) { var lsw = (x & 0xFFFF) + (y & 0xFFFF); var msw = (x >> 16) + (y >> 16) + … 계속 읽기 SHA256
글쓰기 스크린케스트 : Android 기기 원격 디버깅 시작하기
참조 : https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 Windows, Mac 또는 Linux 컴퓨터에서 Android 기기의 라이브 콘텐츠를 원격으로 디버그합니다. 이 가이드는 다음을 수행하는 방법을 안내합니다. 원격 디버깅용 Android 기기를 설정하고 개발용 컴퓨터에서 검색합니다. 개발용 컴퓨터에서 Android 기기의 라이브 콘텐츠를 검사 및 디버그합니다. 개발용 컴퓨터에서 Android 기기의 콘텐츠를 DevTools 인스턴스로 스크린캐스트합니다. 요구사항 개발용 컴퓨터에 Chrome 32 이상 설치 Windows를 사용 중인 경우 … 계속 읽기 글쓰기 스크린케스트 : Android 기기 원격 디버깅 시작하기
Vue.js 공부하기 좋은 곳
Vue.js의 개념을 한 번에 이해 할 수 있음(왠만한 책보다 좋음) https://www.youtube.com/watch?v=4deVCNJq3qc 위 영상에서 추천해주는 자료 모음 https://opentdb.com/ 랜덤한 문제와 답을 API로 불러올 수 있게 도와주는 사이트Bootstrap Vue: https://bootstrap-vue.js.org/docs/ 부트스트랩과 Vue가 만나 만들어진 부트스트랩 샘플들을 가져올 수 있다로다쉬 : https://github.com/lodash/lodash js파일로 만들어진 알고리즘 함수들을 공유해 준다.여기서는 (배열을 랜덤하게 섞어주는) shuffle.js 를 사용했음. 강사님이 추천해 주는 자료 … 계속 읽기 Vue.js 공부하기 좋은 곳
아톰(Atom) 에디터 단축키 정리
출처: http://ondesk.tistory.com/178 [책상] 아톰 (Atom) 에디터 - 단축키 모음 "F11" : 전체 화면으로 본다, "ctrl-," : 아톰 에디터 설정 화면을 연다, "ctrl-shift-n" : 아톰 에디터를 새로 열고 새 창을 생성한다, "ctrl-shift-w" : 아톰 에디터를 닫는다, "ctrl-shift-o" : 새 프로젝트 폴더를 연다. "ctrl-o" : 파일을 연다, "ctrl-t" … 계속 읽기 아톰(Atom) 에디터 단축키 정리
resizeend 이벤트
jquery 이벤트에는 resizeEnd 라는 이벤트가 없다. 그래서 있다! 아래의 소스코드를 응용하세요~~~ㅇ $(window).bind({ resize : function(){ window.clearTimeout(window.resizeTimer); window.resizeTimer = window.setTimeout(function() { $(window).trigger('resizeend'); }, 100); } , resizeend : function(){ console.log("들어옴"); }});
aaboo 