FEDev Story

https://inswave.com/confluence/pages/viewpage.action?pageId=12386335 [기타] navigation.timing 객체를 이용한 페이지 로딩 속도 측정 - 웹스퀘어 기술지식DB - Confluence 개요 웹페이지 속도 이슈 등 이 발생 시, 속도 측정을 위해, 이전에는 var start = Date.now(); 등에 스크립트를 페이지 상단, 하단에 두어 페이지를 측정 했었다면, 웹의 성능을 조금 더 정확하게 측정 inswave.com

특정 엘리먼트로 스크롤을 천천히 이동시키는 방법, scrollIntoView smooth 웹사이트의 특정 영역으로 스크롤을 이동시키는 방법 중 하나인 scrollIntoView()에 대하여 알아봅니다.! [잠깐] 스크롤을 특정 엘리먼트로 이동시키는 방법은 뭐가 있을까?원하는 위치로 스크롤을 webisfree.com

https://webruden.tistory.com/277 overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법 웹에서 스크롤 작업을 하다보면 항상 마주치는 문제가 있습니다. 바로 스크롤 체이닝(scroll chaining) 입니다. 스크롤 체이닝이라고 표현하면 해당 이슈가 뭔지 모르실 수 있으니 아래 간단한 예제 webruden.tistory.com

https://mommoo.tistory.com/85 [JavaScript] 요소의 절대좌표 상대좌표 구하기. 안녕하세요. 오늘은 자바스크립트로 요소의 위치를 구하는 방법에 대해 포스팅 합니다. 요소의 위치를 구할 때, 생각해야할 개념이 있습니다. 이 개념은 자바스크립트 뿐만 아니라, 모든 화면 mommoo.tistory.com https://lpla.tistory.com/157 [JavaScript] 절대 좌표, 상대 좌표 구하기 HTML CSS html, body { margin: 0; padding: 0; } .box { width: 500px; height: 500px; position: absolute; } .box1 { background-color: bisque; top: 1000px; le..

https://blog.asamaru.net/2016/12/06/how-to-do-insertafter-in-javascript/ 자바스크립트 insertAfter() 구현하기 javascript는 insertBefore()만 제공하고 insertAfter() 함수는 제공하지 않는다. 웹 UI 개발시 대부분 jQuery 같은 라이브러리를 사용하니 insertAfter() 함수를 쉽게 사용할 수 있다. 그런데 추가 라이브러리를 blog.asamaru.net

https://ko.javascript.info/dispatch-events const allView = document.querySelector('.selectbox'); const category = document.querySelector('.category'); const dimDiv = document.querySelector('.dimmed'); const customEvent = document.createEvent('Event'); customEvent.initEvent('click', false, true); allView && allView.addEventListener('click', (e) => { category.classList.toggle('active'); dimDiv.cla..

const toFitScroll = (cb) => { let tick = false return function trigger () { if (tick) { return } tick = true return requestAnimationFrame(function task() { tick = false return cb() }) } } const onScroll = () => { } window.addEventListener('scroll', toFitScroll(onScroll), { passive : true }) https://jbee.io/web/optimize-scroll-event/ 스크롤 이벤트 최적화 ⚠ 이 포스팅은 자바스크립트의 비동기 처리에 대한 이해를 기반으로 작성되었습니다. 이 포스팅..

브라우저 주소창에 hash값을 id로 페이지내에서 이동해야 할 경우가 있다. http://www.test.co.kr/list/list.html#d_20200330 window.location.hash로 hash값을 얻을 수 있다. var hash = window.location.hash;//#d_20200330 아래는 window.location.hash로 얻은 hash값을 moveToHash()함수에 전달하여 호출함으로써 페이지내에서 해당 hash값을 id로 하는 div로 이동하는 코드이다. var hash = window.location.hash; function moveToHash(hash){ if(hash.length > 0){ var selector = document.querySelector(..

Android 기기에서 설정-개발자도구에서 USB 디버깅을 활성화 시킨다. 크롬에서 chrome://inspect/#devices로 접속한다. 위의 캡쳐처럼 기기정보가 뜨지 않을 경우엔 adb가 설치된 폴더에서 서버를 실행시켜준다. inspect 버튼을 누르면 Android 디바이스에 켜둔 브라우저나 앱을 inspect할 수 있다. IOS 설정-Safari-고급에서 웹속성 활성화 시키기 Mac의 Safari에서 환경설정-고급-메뉴 막대에서 개발자용 메뉴 보기 활성화 시키기 개발자용-기기이름-inspect하고 싶은 페이지나 앱을 클릭 IOS 디바이스에 켜둔 브라우저나 앱을 inspect할 수 있다. 출처: https://gguldh.tistory.com/40 [gguldiary]

input[type=text]가 아래와 같이 읽기전용(readonly)으로 설정이 되어 있더라도 focus가 들어가 커서가 깜박거리는 현상이 있다. focus를 제거하고 싶다면 아래와 같이 focus이벤트가 발생하면 blur()함수를 호출한다.

출처: https://reiphiel.tistory.com/entry/href-javascript-void-or-hash 웹 페이지를 작성하면 A(anchor)태그에 javascript 의 function을 통한 동작을 수행할 경우에 href 속성에 javascript:void(0)와 #가 작성된 코드를 만나게 됩니다. 이 경우에 과연 어떤것을 쓰는것이 맞는 것인가에 대한 궁금증이 생겨 비교해보았습니다. javascript:void(0) javascript:를 사용할 경우 해당 구문이 스크립트로 평가되어 실행되어 도큐멘트의 내용으로 표시됩니다. 클릭 위와 같이 작성된 A태그가 있다면 클릭할 경우 화면의 내용이 테스트입니다. 으로 전환됩니다. 클릭 void(0)를 사용할 경우에는 스크립트의 평가 결과로 u..

[JS] IOS의 CLICK 버블링이 발생하지 않아요 iOS Safari는 클릭할 수 없는 HTML 요소에 이벤트 버블링이 발생하지 않아요. CSS를 이용해서 { cursor: pointer } 속성을 추가하면 이벤트를 버블링합니다. CSS cursor 속성을 모바일 해상도에만 적용하는 방법으로 우회할 수 있겠네요. Raw workarounds(원시 해결방법) 1. ONCLICK : 클릭 할 수없는 요소에 onclick 이벤트를 추가하면 버블링이 발생합니다. 하지만 DOM에 삽입되는 새로운 요소는 이를 지원하기 위해 추가 코드가 필요하기 때문에 이 방법은 좋은 방법이 아닙니다. 2. cursor: pointer 클릭 할 수없는 요소의 CSS를 클릭하면 버블링을 발생시킬 수 있습니다. iOS가 동작을 수정..

보호되어 있는 글입니다.

이미지가 없을 시 X박을 대처하기 위한 방법… 대체할 이미지를 지정하는 속성 onError 조금 많이 찾아보았더니. 의외로 간단하다 ;

*기본적으로 라디오는 좌우 화살표방향키로, 체크박스는 탭키와 스페이스바로 이동한다. input[type=radio] + label , input[type=checkbox] + label {display:inline-block;line-height:0;vertical-align:middle} input[type=radio], input[type=checkbox] {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} input[type=radio] + label {position:relative;display:inline-block;padding:0 35px 0 30px;..

페이지 라이프사이클은 크게 3가지로 분류된다. 로드 시점과 관련된 이벤트로써, 발생하는 시점은 다음과 같다. DOMContentLoaded - HTML 이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img etc) 가 아직 로드되어지지 않았을 때 load - 브라우저에 모든 리소스(img, style, script, etc) 가 로드되었을 때 beforeunload / unload - 페이지를 떠날 때 위 내용만으로도 DOMContentLoaded 가 load 보다 빨리 발생한다는 것을 알 수 있다. (unload 에 대한 것들은 사용빈도가 낮기 때문에 생략하겠다.) 각 이벤트에 대한 유용한 경우는 다음과 같다. DOMContentLoaded - DOM 이 준비 상태이기 때문에, DOM 노..

HTML 구조를 다루는 DOM 파서 CSS 구조를 다루는 CSSOM 파서 이 둘의 작업이 완료되면 렌더링 트리를 만들어 렌더링이 시작되고 페인팅되어 브라우저에서 우리가 볼 수 있게 된다. 문제는 이 파서들의 작업을 멈추게 하는 경우가 있다는 것. 크롬 개발자도구의 네트워크 탭 하단을 보면 DOMContentLoaded 항목의 속도가 표시되어 있는데 의미하는 바는 다음과 같다. HTML 다운로드 시간 + HTML DOM 빌드 시간 렌더링을 빠르게 구축한다는 것은 DOMContentLoaded 에 해당하는 시간을 줄이고 파서 차단을 최소화 시킨다는 말이다. HTML, CSS, JS 상호작용 메커니즘 서버에 http 요청시 서버는 HTML 을 응답하는데 이 과정에는 우리가 인지하지 못하는 컴퓨터간의 효율적인 ..

문제점 Swiper.js를 사용하여 슬라이드 적용시 좌우로 무한루프를 적용하기 위해 아래와 같이 옵션을 설정할 수 있다. {loop:true] 문제는 무한 루프를 적용하기 위해 Swiper.js는 DOM을 좌우로 복사하게 된다. 즉 카테고리가 4개라면 다음과 같이 DOM을 복사한다. 카테고리 4개 * 3 = 12개의 DOM 생성 복사된 DOM 자체는 무겁지 않으나 로딩시 데이트를 한번에 불러와 복사된 DOM에 적용하는 과정에서 성능 저하를 가져오게 된다. 카테고리가 많아질 수록 성능이 더 저하될 수 밖에 없는 구조이다. 스킨케어 메이크업 바디/헤어/향수 가방/지갑 해결책 모든 데이터를 한번에 불러오지 않도록 Ajax를 적용하여 현재 활성화된 탭에 대해서만 데이터를 불러온 후 슬라이드 될 때마다 동적으로 ..

앞서 유사한 기능의 플러그인인 Headroom.js 에 대하여 살펴보았는데, 구형 IE에 대한 크로스브라우징에 어려움을 겪을 수 있습니다. 이에 원리는 유사하나 대상 요소가 명확하게 한정된 요소일때 간단히 구현할 수 있는 스니펫을 소개합니다.DOC Hide header on scroll down, show on scroll upDEMO Hide Header on on scroll down고정된 헤더(네비게이션) 사용 불편함 인지많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고..

It's a perfect day for an outing. 놀러 가기 딱 좋은 날씨에요.

I don't really like rainy days. 난 비오는 날이 싫어 Rainy days and mondays always get me down 비오는 월요일은 항상 우울해요. Nothing is really wrong. 크게 잘못된 일은 없어요. No need to talk it out. 말을 꺼낼 필요조차 없다.

강아지 - 어떤 강아지를 기르세요? 영화 - 최근에 본 영화가 뭐예요? 음악 - 어느 사이트에 음악을 들으세요? 여행 - 제일 좋았던 여행지가 어디세요? 취미 - 앞으로 무엇을 배우고 싶으세요? 음식 - 맛집을 많이 아세요? 버킷리스트 - 당신의 버킷리스트는 무엇인가요? 건강 - 건강하시죠? 아픈적은 없으시죠? 미래 - 미래에 대해 생각해 본적 있으세요? 직업 - 지금 하는 일에 만족하세요? 주말 - 주말에 뭐 하셨어요? 게임 - 게임은 잘 하세요? 쇼핑 - 어디서 주로 쇼핑하세요? 컴퓨터 - 컴퓨터 얼마 주고 샀어요? 오늘업무 - 오늘 할일 많으세요? 주간업무 - 지난 한주 동안 무슨 일 했어요? 퇴근후 - 퇴근후에 약속있으세요? 없으면 밥이나 먹고 갈까? 출근전 - 몇시에 출근하세요? 노후준비 - 미..

안녕하세요. 이번 시간에는 HTML 엔티티에 대해서 알아보겠습니다!혹시 HTML 소스를 보다가 나 를 보신 적이 있나요? 이 문자들은 HTML 파일이 깨져서 나타나는 문자가 아닙니다. 바로 HTML 엔티티입니다.HTML에서 태그를 표현할 때 다음과 같이 하곤 하죠.zero만약 태그 안의 내용물에

HTML 예약 문자나 특수문자를 쓸때 사용하는 엔티티 코드이다.http://entitycode.com/ FeaturedCommonCurrencyMathDirectionMiscAboutCharacterEntity NameEntity NumberDescriptionWhy Is This Featured?©©©CopyrightAlmost Every Website Uses The Copyright Symbol||Vertical BarThe Vertical Bar Symbol Is Used To Separate Menu Items Or Navigation Links···Medium List DotSimilar To The Vertical Bar, The Medium List Dot Is Another Option ..

Git에 대한 기본적인 사용법은 1부에서 알아보았다. 하지만 git은 사용법만 안다고 잘 사용할 수 있는 도구는 아니다. 어떤 식으로 사용하느냐에 따라서 그 효용성이 크게 달라지기 때문이다. 지금부터 git이 관리하는 핵심 대상인 commit을 잘 할 수 있도록 하는 것과, '형상관리'의 best practice라고 볼 수 있는 git-flow의 브랜치 전략을 이해하여 각자의 프로젝트 상황에 최적화 된 브랜칭 모델을 도출할 수 있도록 하는데 중점을 두고 차근차근 살펴보도록 하겠다.Commit 전략이미 1부에서 commit이 무엇인가에 대해 살펴보았다. 까먹었을 수도 있으니 다시 짚고 넘어가자면, 'staged 상태에 있는 변경 내용들을 repository에 저장하는 것'이다. 하지만 이것은 사실 git을..

세상이 복잡해짐에 따라 필요로 하는 시스템도 점점 복잡해졌다. 시스템이 복잡해질수록, 여러 사람이 어떻게 잘 나누어 개발할 것인지 고민하게 되었고, 효율적인 협업과 버전관리에 대한 수많은 solution이 제시되었다. 그 중 세계에서 가장 많이 사용되는 solution이 단연 ‘git’이라는 사실에 의심을 갖는 사람은 없을 것이다. git의 단점에 대해 이야기하는 사람도 있겠지만, 세계에서 가장 많은 사람들이 사용한다는 것만으로도 공신력 있는 유용한 도구라 생각해도 되지 않을까?하지만 아직도 git의 진입장벽을 쉽게 넘지 못하여 git을 유용한 도구가 아닌 장애물로 여기는 사람들이 적지 않다. 이 글에서는 git을 사용해보려 했지만 그 장벽에 부딪혀 포기해버린 사람들을 위해, git이 어렵게 느껴지도록 ..

인라인 편집기를 제작하는 일은 수고롭습니다. input이나 textarea 필드를 이용해 편집될 요소를 변경하는 작업부터 시작합니다. 사용자 경험이 자연스럽게 이어지도록 CSS를 부분적으로 사용해 변경된 요소 스타일을 변경 전의 스타일과 일치시켜야 합니다. 사용자가 편집을 마쳤으면, 다시 변경 전의 콘텐츠 전부를 복사한 후에 요소들을 바꿔주어야 하지요.contentEditable 속성은 이 작업을 엄청 수월하게 해줍니다. 여러분이 할 일은 이 속성값을 true로 설정해 주는 것입니다. 그러면 표준 HTML5 요소들이 편집 가능한 상태가 됩니다. 이 튜토리얼에서는 이 기능을 기반으로 해서 인라인 리치 텍스트 편집기를 제작해 보겠습니다.기본 사항이 속성은 세 가지 적당한 값을 취합니다. 그 세 가지는 tru..

document.execCommand('속성'); HTML5 부터 지원되는 document.execCommand() 함수 입니다.현재 선택영역의 텍스트를 인자로 받은 값을 통해 변환시킵니다.(여기서 선택 영역이란 마우스로 텍스트를 드래그했을 때의 파란 박스 영역을 말합니다.) 123456789101112131415document.execCommand('Italic') // 기울이기document.execCommand('Underline') // 밑줄document.execCommand('StrikeThrough') // 중간줄document.execCommand('Cut') // 자르기document.execCommand('Copy') // 복사하기document.execCommand('Paste') /..

1. $(document).ready()- 외부 리소스. 이미지와는 상관 없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨 2. $(window).load()- DOM의 standard 이벤트- html의 로딩이 끝난 후에 시작- 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합함- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생..

설명현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.문법var node = document.importNode(externalNode, deep); node문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null입니다.externalNode다른 문서에서 가져올 노드입니다.deep불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.Note: DOM4 스펙 (Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)에서 적용되어 있습니다)에서, deep은 선택적 인자입니다. 만약 해당 속성을..