Front End Develop Front End Develop

부트스트랩에 대한 새소식이 전해져옵니다. 많은 개발자들이 css를 작성하지 않고도 손쉽게 웹앱을 만들 수 있어 부트스트랩을 많이 선호를 하고 있는데요. 시대의 흐름에 따라 부트스트랩도 4에는 크게 flex css 속성을 넣는 등 계속해서 점진적 발전을 거듭하고 있습니다. 그런데 또 2020년에 부트스트랩 5가 출시된다고 하니 놀라울 따름인데요. 2020년에 출시되는 부트스트랩 5에서 가장 큰 변화가 눈에 띄어서 포스팅 해보려고 합니다. 바로 jquery free 입니다. 작년에 github에 이어 이제 부트스트랩 5에도 jquery가 사라지게 된다는 말인데요. 2019년 초에 부트스트랩 제작자는 또 다른 시도를 시작했습니다. 1. Dropped jQuery(제이쿼리를 버리다) 제이쿼리는 혁신적인 수백 수..

ES6 (also known as ECMAScript 2015) has major changes over JavaScript’s syntax and brings new features that didn’t exist before. → ES6는 (또한 에크마2015로 알려진) 자바스크립트 문법에 있어 큰 변화를 겪고, 이전에 없던 새로운 기능들을 보여줍니다. ES6 is important to learn because one reason is that, it makes JavaScript better and easier to write, and also ES6 is being used together with today’s modern web technologies like React, Node.js an..

일반적으로 background-image 속성을 사용했을 때 사용하는 큰 이유는 background-size:cover 속성 때문인데.. 이를 해결하기 위해서 object-fit으로 해결하실 수 있습니다. 이럴 때, picture를 사용하면 background-size:cover와 동일한 효과가 생깁니다. 그리고 또한 다른 부수효과를 얻을 수 있는데요. SEO 친화적 이미지 접근성 친화적 이미지(alt="" 속성 사용) CMS-generated 이미지, CDN과 함께 잘 동작함 이미지 최적화를 위한 srcset과 함께 잘 작동 .webp같은 next-generation 이미지 포맷을 위해 태그를 사용하여 활용할 수도 있습니다. 이렇게 하고나면 또 Chrome이나 다른 브라우저의 이미지 로드 기능과 같은 ..

PART 1 - 표면적 수준에서의 개선 특정한 단어를 사용하라 - GET 대신 Fetch나 Download를 사용하는 것이 더 나을 수 있다. tmp나 retval과 같은 보편적인 이름의 사용을 피하라 대상을 자세히 묘사하는 구체적인 이름을 사용 - ServerCanStart() -> CanListenOnPort()에 비해서 의미가 모호. 변수명에 중요한 세부 정보를 덧붙여라 - 밀리초 값을 지정 _ms suffix로 붙이면 좋을 것 같다. 사용 범위가 넓으면 긴 이름 사용 - 여러 페이지에 걸쳐서 사용되는 변수 이름... 대문자나 밑줄 등을 의미 있는 방식으로 활용 - 클래스 멤버를 로컬 변수와 구분하기 위해서 뒤에 _를 붙일 수 있다. 출처 : 읽기 좋은 코드가 좋은 코드다 - 더스틴 보즈웰

Lazy Loading 기법 이제 이미지가로드되는 것을 막을 것이므로 브라우저에 로드 할 시기를 알려줘야합니다. 이를 위해 이미지가 뷰포트에 입력되는 즉시 로드를 트리거하는지 확인합니다. 이미지가 뷰 포트에 들어갈 때를 확인하는 두 가지 방법이 있습니다. Method 1 : Javascript 이벤트를 통한 방법 이 기술은 브라우저에서 이벤트 리스너를 scroll, resize 및 orientationChange 이벤트에 사용합니다. 스크롤 이벤트는 스크롤이 발생할 때 사용자가 페이지에있는 위치를 감시하므로 매우 명확합니다. resize 및 orientationChange 이벤트도 똑같이 중요합니다. 브라우저 창 크기가 변경되면 resize 이벤트가 발생하지만 장치가 가로 방향에서 세로 방향으로 회전 할..

[Canvas] 버튼 Particle 이펙트HTML 요소의 자유를 결합하여 웹 페이지의 시각적 기능을 향상시키는 방법에 대해 살펴 보겠습니다. 최신브라우저에만 적용이 가능합니다. 초기 상태 See the Pen DOM to Canvas #1 by Zach Saucier (@Zeaklous) on CodePen.캔버스 버전html2canvas라는 매우 편리한 라이브러리가 도움이 됩니다.라이브러리를 로드 한 다음 html2canvas를 호출하면 엘리먼트의 캔버스 버전과 함께 Promise가 반환됩니다. See the Pen DOM to Canvas #2 by Zach Saucier (@Zeaklous) on CodePen. 여기에는 HTML 버전과 캔버스 버전의 버튼이 있습니다. 캔버스 버전은 "screen..

[HTML] 자동으로 생성되는 autocomplete 해제하기웹 사이트에서 양식 필드의 자동 완성을 사용 중지하는 방법에 대해 설명합니다. 기본적으로 브라우저는 사용자가 웹 사이트의 필드를 통해 제출하는 정보를 기억합니다. 이를 통해 브라우저는 자동 완성 기능을 제공 할 수 있습니다 (즉, 사용자가 입력하기 시작한 필드에 대해 가능한 완료를 제안하거나 자동 채우기 (즉,로드시 특정 필드를 미리 채 웁니다). 이러한 기능은 대개 기본적으로 사용 가능하지만 사용자가 개인 정보를 염려 할 수 있으므로 브라우저에서 사용자가 사용을 중지 할 수 있습니다. 그러나 양식에 제출 된 일부 데이터는 앞으로는 유용하지 않으며 (예 : 일회성 핀) 민감한 정보 (예 : 고유 한 정부 ID 또는 신용 카드 보안 코드)가 포함..

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