프론트 개발 블로그

no spring webapplicationinitializer types detected on classpath Tomcat 구동 시 Build Path 위치 설정이 잘못되어 서버 구동이 안되는 현상 1. src/main/java 폴더 선택 후 우클릭 2. Build Path > Use as Source Folder 3. 2번 선택 후 Java Resources 에 소스가 제대로 들어가면 성공

퍼블리싱 환경에서 Pug+SASS+Gulp 를 사용해 보일러플레이트 만들기 Pug(구 Jade) Pug 는 Node.js 및 브라우저용 JavaScript 템플릿 엔진이다. * 초기에 Jade 로 불려졌으나, 상표권 문제로 Pug 로 변경 Package $ npm install pug Syntax Option pug-lintrc.json 를 통해서 option 설정 가능 더보기 { "validateLineBreaks": "CRLF", //모든 줄 바꿈 문자는 일치해야 합니다. "disallowAttributeConcatenation": null, // Pug에는 속성 연결이 포함되어서는 안 됩니다. "disallowAttributeInterpolation": true, //Pug에는 속성 보간 연산자가 ..

https://whimsical.com/ The Visual Workspace | Whimsical whimsical.com Notion에서 마인드맵 사용하기 : 윔지컬(whimsical) Notion에서 플로우차트나 마인드맵을 그려서 사용하고 싶어서 찾아본 툴 Notion이랑 동일한 계정으로 가입한 후 Notion 화면에서 embeds 로 윔지컬 workspace 를 바로 불러올 수 있다. UI가 익숙해서 바로 만들어서 사용하기 쉬움!

https://web-development.space/tools/px-to-vw/ PX to VW | Responsive values Converter (Calculator) | Web Development Space Try to convert px to vw here! This online calculator can convert pixels (px) to variable widths (vw). Make your content ready for responsive use. Front-end developers will be happy! web-development.space percent = viewport size / 100 vw = px / percent 360 viewport 에서 18px 폰트 ..

웹 크롤링(Web Crawling) 웹사이트, 하이퍼링크, 데이터, 정보 자원을 자동화 방법으로 수집, 분류, 저장 하는 것. 여러 웹 페이지를 돌아다니면서 어떤 데이터가 어디에 있는 지 색인(index)을 만들어 데이터베이스(DB)에 저장하는 역할 크롤링 기술이 악용이 될 수 있는데, Meta 태그의 noindex 를 사용하여 크롤러로 검색 색인 되는 것을 방지할 수 있다. 웹 스크래핑 (Web Scraping) 웹 페이지에서 나타나는 데이터 중에 필요한 데이터만 추출하도록 만들어진 프로그램이다. 은행권에서 요즘 사용되고 있는 통합계좌조회 등이 웹 스크래핑을 이용한다고 볼 수 있다. 스크래핑 자체를 해킹이나 침해로 분류되지 않지만, 해킹과 침해 공격의 시초가 될 수가 있음으로 민감한 정보는 일반 공공 ..

Input pattern 속성 pattern 속성은 양식 제출 시에 요소의 값을 검사하는 정규 표현식을 지정합니다. title 속성과 같이 사용할 경우 사용자에게 도움이 되는 title 설명을 제공할 수 있습니다. Note. input type : text, date, search, url, tel, email, password 등 에서 작동 Input inputmode 속성 inputmode 속성은 사용자가 요소나 요소의 컨텐츠를 편집할 때 입력할 수 있는 데이터 유형의 힌트를 제공하는 열거형 특성입니다. none | text | decimal | numeric | tel | search | email | url inputmode 를 numeric 으로 설정할 경우 숫자형 키보드를 제공한다.

[IOS/Iphone] iOS 에서 키패드 노출 시 하단에 고정시킨 버튼 움직이는 현상 발생 상황 입력 필드가 있고 하단에 Fixed 된 버튼이 있는 경우, 입력 필드를 선택 시 IOS의 경우 하단으로 키보드가 활성화 되고, 그러면서 하단에 Fixed 시킨 버튼의 위치가 계속 변경 되는 현상 해결방안 - 키패드를 제외한 화면의 높이 값을 계산해서 1초 후 버튼의 위치 값 이동 - 입력 필드에서 포커스 아웃 시에 이벤트 반대로 적용 var timeoutID; var onloadHeight = window.innerHeight; $('input[type="text"').on('focusin', function() { var device = getMobileDevice(navigator.userAgent); ..

npm ERR! code EITMEDOUT 서버 방화벽 에러로 Node Module를 따로 가져와서 해결 함.

브라우저에서 굵은 글씨체로 표현 되지만, 다른 의미를 가진 , 태그 : 중요한 내용에 강한 강조를 나타냄 : 특별한 중요도는 주어지지 않으며, 독자의 주의를 끌기 위한 용도로 사용됨. * 순수하게 꾸밈을 위해서는 태그보다 CSS의 속성 font-weight 를 사용. * 과 을 중첩하여 강조의 강조를 증가시키기 위해 사용될 수도 있다. 브라우저에서 기울임 꼴로 표현 되지만, 다른 의미를 가진 , 태그 : 컨텐츠 강조 할 때 사용! 주위 텍스트에 비해 강조된 부분을 나타내며, 한 문장에서 단어 하나 혹은 몇 개로 제한 되며, 문장의 의미에 영향을 미칠 수 있음. : 외국어, 기술 용어, 등장인물의 생각등의 사용! 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냄 (보통 표현은 기울임 꼴로 표시됨)..

window.visualViewport window의 인터페이스의 visualViewport 읽기 전용 속성은 창의 시각적 뷰포트를 나타내는 visualViewport 객체를 반환한다. Chrome 61, Edge 79, Safari 48 이상 브라우저에서 호환 가능하다. * IE 는 No support // 예시 코드 function viewportResize() { const vh = window.visualViewport.height; const document = document.documentElement; document.style.setProperty('-vh', `${vh}px`); } https://developer.mozilla.org/en-US/docs/Web/API/Window/vi..