코딩하다 현타올 때

질문 : HTML5 Canvas vs. SVG vs. div 즉석에서 요소를 만들고 이동할 수있는 가장 좋은 방법은 무엇입니까? 예를 들어 직사각형, 원 및 다각형을 만든 다음 해당 개체를 선택하고 이동하려고한다고 가정 해 보겠습니다. HTML5가이를 가능하게하는 세 가지 요소 인svg , canvas 및 div를 제공한다는 것을 알고 있습니다. 내가하고 싶은 일 중 어떤 요소가 최고의 성능을 제공할까요? 이러한 접근 방식을 비교하기 위해 각각 머리글, 바닥 글, 위젯 및 텍스트 콘텐츠가 포함 된 시각적으로 동일한 웹 페이지 3 개를 만들려고했습니다. 첫 번째 페이지의 위젯은 전체적으로 canvas 요소로, 두 번째는 전체적으로 svg 요소로, 세 번째는 일반 div 요소 인 HTML 및 CSS로 만들어..

질문 : 변수가 JavaScript의 문자열인지 확인 JavaScript에서 변수가 문자열인지 다른 것인지 어떻게 확인할 수 있습니까? 답변 typeof 연산자를 사용할 수 있습니다. var booleanValue = true; var numericalValue = 354; var stringValue = "This is a String"; var stringObject = new String( "This is a String Object" ); alert(typeof booleanValue) // displays "boolean" alert(typeof numericalValue) // displays "number" alert(typeof stringValue) // displays "string" ..

질문 : CSS에서 여백과 여백을 사용하는 경우 margin 을 사용할 때와 padding 을 사용할 때를 결정할 때 사용해야하는 특정 규칙이나 지침이 있습니까? 답변 요약 : 기본적으로 테두리 나 배경이 있고 보이는 상자 내부의 공간을 늘리고 싶을 때를 제외하고는 모든 곳에서 여백을 사용합니다. 나에게 패딩과 여백의 가장 큰 차이점은 세로 여백은 자동으로 축소되고 패딩은 그렇지 않다는 것입니다. 1em 두 요소를 하나씩 고려하십시오. 이 패딩은 요소의 일부로 간주되며 항상 유지됩니다. 따라서 첫 번째 요소의 내용, 첫 번째 요소의 패딩, 두 번째 요소의 패딩, 두 번째 요소의 내용으로 끝납니다. 따라서 두 요소의 내용은 결국 2em 떨어져있게됩니다. 이제 패딩을 1em 여백으로 바꿉니다. 여백은 요소 ..

질문 : node.js의 콘솔 글꼴 색상을 변경하는 방법은 무엇입니까? 눈에 문제가있어서 콘솔 배경색을 흰색으로 바꿔야하는데 글꼴이 회색이고 메시지를 읽을 수 없게됩니다. 어떻게 변경할 수 있습니까? 답변 아래에서 node.js 애플리케이션을 실행할 때 명령 할 텍스트의 색상 참조를 찾을 수 있습니다. console.log('\x1b[36m%s\x1b[0m', 'I am cyan'); //cyan console.log('\x1b[33m%s\x1b[0m', stringToMakeYellow); //yellow %s 는 문자열 (두 번째 인수)에서 삽입되는 위치입니다. \x1b[0m 은 터미널 색상을 재설정하여이 시점 이후에는 더 이상 선택된 색상이되지 않도록합니다. 색상 참조 Reset = "\x1b[0m..

질문 : 배경 이미지에 CSS 필터를 적용하는 방법 검색 페이지의 배경 이미지로 사용중인 JPEG 파일이 있으며 Backbone.js 컨텍스트 내에서 작업하기 때문에 CSS를 사용하여 설정하고 있습니다. background-image: url("whatever.jpg"); CSS 3 흐림 필터 를 배경에만 적용하고 싶지만 해당 요소 하나만 스타일을 지정하는 방법을 잘 모르겠습니다. 내가 시도하면 : -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); background-image 바로 아래에서 배경이 아닌 전체 페이지의 스타일을 지정합니다. 이미지 만 ..

질문 : HTML5에 부동 입력 유형이 있습니까? html5.org 에 따르면 "숫자"입력 유형의 "값 속성이 지정되고 비어 있지 않은 경우 유효한 부동 소수점 숫자 인 값을 가져야합니다." 그러나 이것은 단순히 (최신 버전의 Chrome에서) 부동이 아닌 정수를 사용하는 "업다운"컨트롤입니다. HTML5 고유의 부동 소수점 입력 요소가 있습니까? 아니면 숫자 입력 유형이 정수가 아닌 부동 소수점과 함께 작동하도록 만드는 방법이 있습니까? 아니면 jQuery UI 플러그인을 사용해야합니까? 답변 number 유형에는 max 및 min 과 함께)를 제어 step 값이 있으며 기본값은 1 입니다. 이 값은 스테퍼 버튼 구현에서도 사용됩니다 (예 : 위로 누르면 step 증가). 이 값을 적절한 값으로 변경하..

질문 : HTML "no-js"클래스의 목적은 무엇입니까? 많은 템플릿 엔진, HTML5 Boilerplate , 다양한 프레임 워크 및 일반 PHP 사이트 태그에 no-js 클래스가 있음을 알았습니다. 왜 이렇게 되나요? 이 클래스에 반응하는 일종의 기본 브라우저 동작이 있습니까? 왜 항상 포함합니까? "no-js"케이스가없고 html을 직접 처리 할 수 있다면 클래스 자체를 쓸모 없게 만들지 않습니까? 다음은 HTML5 Boilerplate index.html의 예입니다. 보시다시피 요소에는 항상이 클래스가 있습니다. 누군가 이것이 왜 그렇게 자주 수행되는지 설명 할 수 있습니까? 답변 Modernizr가 실행되면 "no-js"클래스를 제거하고 "js"로 대체합니다. 이것은 Javascript 지원이..

질문 : 웹 사이트에 "내 정보 기억"을 구현하는 가장 좋은 방법은 무엇입니까? 사용자가 내 웹 사이트를 방문 할 때마다 로그인 할 필요가 없도록 내 웹 사이트에 사용자가 클릭 할 수있는 확인란이 있기를 원합니다. 이를 구현하려면 쿠키를 컴퓨터에 저장해야한다는 것을 알고 있지만 해당 쿠키에 무엇이 포함되어야합니까? 또한이 쿠키가 '내 기억하기'기능을 제공하면서 피할 수있는 보안 취약점을 제공하지 않도록주의해야하는 일반적인 실수가 있습니까? 답변 여기에 설명 된이 전략 을 모범 사례 (2006) 또는 여기에 설명 된 업데이트 된 전략 (2015)으로 사용할 수 있습니다. 이 접근 방식은 심층 방어를 제공합니다. 누군가가 데이터베이스 테이블을 유출하는 경우 공격자에게 사용자를 가장 할 수있는 열린 문을 제공..

질문 : 너비가 100 %이고 tbody 내부에 세로 스크롤이있는 HTML 표 100 % 너비로 설정하고 일부 높이에 대해 table { width: 100%; display:block; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; } Head 1 Head 2 Head 3 Head 4 Head 5 Content 1 Content 2 Content 3 Content 4 Content 5 추가 div를 추가하는 것을 피하고 싶습니다. 원하는 것은 이와 같은 간단한 테이블 table-layout , positio..

질문 : JWT (JSON Web Token) 만료 자동 연장 새로운 REST API에 JWT 기반 인증을 구현하고 싶습니다. 그러나 토큰에 만료가 설정되어 있으므로 자동으로 연장 할 수 있습니까? 사용자가 해당 기간에 애플리케이션을 적극적으로 사용하는 경우 X 분마다 로그인 할 필요가 없습니다. 그것은 엄청난 UX 실패입니다. 그러나 만료 기간을 연장하면 새 토큰이 생성됩니다 (이전 토큰은 만료 될 때까지 여전히 유효합니다). 그리고 각 요청 후에 새 토큰을 생성하는 것은 어리석은 것처럼 들립니다. 둘 이상의 토큰이 동시에 유효한 경우 보안 문제처럼 들립니다. 물론 블랙리스트를 사용하여 이전에 사용 된 것을 무효화 할 수 있지만 토큰을 저장해야합니다. 그리고 JWT의 장점 중 하나는 스토리지가 없다는 ..

질문 : HTML Canvas를 gif / jpg / png / pdf로 캡처 하시겠습니까? HTML 캔버스에 표시된 내용을 이미지 또는 PDF로 캡처하거나 인쇄 할 수 있습니까? 캔버스를 통해 이미지를 생성하고 해당 이미지에서 png를 생성하고 싶습니다. 답변 죄송합니다. 원래 답변은 유사한 질문에 한정되었습니다. 다음과 같이 수정되었습니다. var canvas = document.getElementById("mycanvas"); var img = canvas.toDataURL("image/png"); IMG의 값을 사용하여 다음과 같이 새 이미지로 작성할 수 있습니다. document.write(''); 출처 : https://stackoverflow.com/questions/923885/captur..

질문 : JavaScript에서 현재 날짜를 어떻게 얻습니까? JavaScript에서 현재 날짜를 어떻게 얻습니까? 답변 new Date() 를 사용하여 현재 날짜와 시간을 포함 Date 객체를 생성합니다. var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! var yyyy = today.getFullYear(); today = mm + '/' + dd + '/' + yyyy; document.write(today); 오늘 날짜를 mm / dd / yyyy 형식으로 제공합니다. 간단히 today ..

질문 : HTML 태그의 차이점은 무엇입니까 그리고 ? 및 의 사용을 보여주는 간단한 예제를 요청하고 싶습니다. id 또는 class 로 표시하는 데 사용되는 것을 보았지만 하나가 다른 것보다 선호되는 경우가 있는지 알고 싶습니다. 답변 div 는 블록 요소입니다. span 은 인라인 요소 입니다. 즉, 의미 론적으로 사용하려면 div를 사용하여 문서의 섹션을 래핑해야하고 스팬은 텍스트, 이미지 등의 작은 부분을 래핑하는 데 사용해야합니다. This a large main division, with a small bit of spanned text! Some text that I want to mark up ... 불법입니다. 편집 : HTML5부터 일부 블록 요소는 일부 인라인 요소 내부에 배치 될 수..

질문 : CSS를 사용하여 div를 세로로 스크롤 가능하게 만들기 사용자가 가로 및 세로로 스크롤 할 수 div 를 제공합니다. div가 세로로만 스크롤되도록 변경하려면 어떻게해야합니까? 답변 잘못된 속성을 사용하는 것 외에는 그것을 덮었습니다. overflow , overflow-x 또는 overflow-y 속성으로 트리거 될 수 있으며 visible , hidden , scroll , auto 또는 inherit 중 하나로 설정할 수 있습니다. 현재 다음 두 가지를보고 있습니다. auto 이 값은 상자의 너비와 높이를 나타냅니다. 정의 된 경우 상자가 해당 경계를 넘어 확장되지 않습니다. 대신 (콘텐츠가 해당 경계를 초과하는 경우) 길이를 초과하는 경계 (또는 둘 다)에 대한 스크롤 막대를 만듭니다...

질문 : HTML 페이지에서 스크롤 막대 숨기기 CSS를 사용하여 스크롤 막대를 숨길 수 있습니까? 어떻게 하시겠습니까? 답변 오버플로 설정 overflow: hidden; 다음과 같이 본문 태그에 : 위의 코드는 가로 및 세로 스크롤바를 모두 숨 깁니다. 수직 스크롤바 만 숨기려면 overflow-y . 수평 스크롤바 만 숨기려면 overflow-x . 참고 : 스크롤 기능도 비활성화됩니다. 스크롤바는 숨기고 스크롤 기능은 숨기고 싶은 경우 아래 답변을 참조하세요. 출처 : https://stackoverflow.com/questions/3296644/hiding-the-scroll-bar-on-an-html-page

질문 : 이미지 또는 범위 태그를 사용하지 않고 CSS를 통해 UL / LI html 목록에서 글 머리 기호 색상을 설정하는 방법 항목이있는 단순한 정렬되지 않은 목록을 상상해보십시오. list-style:square; 를 통해 정사각형 모양으로 정의했습니다. 항목의 색상을 색상으로 설정하면 color: #F00; 그러면 모든 것이 빨갛게됩니다! 정사각형 글 머리 기호의 색상 만 설정하고 싶습니다. CSS에서 글 머리 기호의 색상을 정의 하는 우아한 방법 이 있습니까? HTML Item 1 Item 2 Item 3 CSS li{ list-style:square; } 답변 이를 수행하는 가장 일반적인 방법은 다음과 같은 방법입니다. ul { list-style: none; padding: 0; margin..

질문 : JavaScript로 두 날짜 비교 누군가 JavaScript를 사용하여 과거보다 크거나 작은 두 날짜 의 값을 비교하는 방법을 제안 할 수 있습니까? 값은 텍스트 상자에서 가져옵니다. 답변 Date 객체 는 원하는 작업을 수행합니다. 각 날짜에 대해 하나씩 생성 한 다음 > ,

질문 : CSS로 div의 종횡비 유지 창의 너비가 변경됨에 따라 너비 / 높이를 변경할 수 div 를 만들고 싶습니다. 가로 세로 비율을 유지하면서 너비에 따라 높이를 변경할 수있는 CSS3 규칙이 있습니까? JavaScript를 통해이 작업을 수행 할 수 있다는 것을 알고 있지만 CSS 만 사용하는 것을 선호합니다. 답변 다음과 같이 padding-bottom 대한 백분율 값으로 래퍼 .demoWrapper { padding: 10px; background: white; box-sizing: border-box; resize: horizontal; border: 1px dashed; overflow: auto; max-width: 100%; height: calc(100vh - 16px); } div..

질문 : SCSS와 Sass의 차이점은 무엇입니까? 제가 읽은 내용에서 Sass는 변수 및 수학 지원을 통해 CSS를 더욱 강력하게 만드는 언어입니다. SCSS와의 차이점은 무엇입니까? 같은 언어 여야합니까? 비슷한? 다른? 답변 Sass는 구문이 향상된 CSS 전 처리기입니다. 고급 구문의 스타일 시트는 프로그램에 의해 처리되고 일반 CSS 스타일 시트로 바뀝니다. 그러나 CSS 표준 자체를 확장 하지는 않습니다. CSS 변수가 지원되며 사용할 수 있지만 전 처리기 변수뿐만 아니라 사용할 수 없습니다. SCSS와 Sass의 차이점에 대해 Sass 문서 페이지 의이 텍스트는 다음 질문에 답해야합니다. Sass에는 두 가지 구문이 있습니다. 첫 번째는 SCSS (Sassy CSS) 로 알려져 있으며이 참조..

질문 : “npm install”이 package-lock.json을 다시 작성하는 이유는 무엇입니까? 최근에 npm @ 5로 업그레이드했습니다. 이제 package.json의 모든 항목이 포함 된 package-lock.json 파일이 있습니다. npm install 을 실행할 때 내 node_modules 디렉토리에 무엇을 설치해야하는지 결정하기 위해 잠금 파일에서 종속성 버전을 가져올 것으로 예상합니다. 이상한 점은 실제로 내 package-lock.json 파일을 수정하고 다시 작성한다는 것입니다. 예를 들어, 잠금 파일에는 버전 2.1.6으로 지정된 typescript가 있습니다. 그런 다음 npm install 명령 후 버전이 2.4.1 로 변경되었습니다. 그것은 잠금 파일의 모든 목적을 무너..

질문 : 배경 이미지 데이터를 CSS에 Base64로 삽입하는 것이 좋거나 나쁜 습관입니까? greasemonkey 사용자 스크립트의 소스를보고 있었고 CSS에서 다음을 발견했습니다. .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} greasemonkey 스크립트는 서버에서 호스트하는 것과는 반대로 소스 내에서 할 수있는 모든 것을 번들로 ..

질문 : 필요하지 않은 경우 CSS 숨기기 스크롤 막대 overflow-y:scroll; 숨길 수있는 방법을 알아 내려고 노력하고 있습니다; 필요하지 않은 경우. 내 말은 내가 웹 사이트를 만들고 있고 게시물이 표시되는 주요 영역이 있으며 콘텐츠가 현재 너비를 초과하지 않으면 스크롤 막대를 숨기고 싶다는 것입니다. 또한 두 번째 질문입니다. 게시물이 현재 너비를 초과하면 너비가 자동으로 증가하고 내용이 상자에서 나오지 않도록 만들고 싶습니다. 누구든지 이것을하는 방법에 대한 단서가 있습니까? 게시물 영역 : .content { height: 600px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; font-size:..

질문 : 패딩 / 여백이있는 CSS 100 % 높이 HTML / CSS를 사용하여 부모 요소의 100 % 인 너비 및 / 또는 높이를 가지면서도 적절한 패딩이나 여백이있는 요소를 어떻게 만들 수 있습니까? "적절한"이란 부모 요소의 높이 200px padding = 5px height = 100% 를 border = 5px 190px 높이의 요소가 부모 요소의 중앙에 위치해야한다는 것을 의미합니다. . 이제 표준 상자 모델이 작동해야한다고 지정하는 방식이 아니라는 것을 알고 있습니다 (정확히 이유를 알고 싶지만 ...). 따라서 분명한 대답은 작동하지 않습니다. #myDiv { width: 100% height: 100%; padding: 5px; } 그러나 임의의 크기의 부모에 대해이 효과를 안정적으로..

질문 : A4 용지 크기 페이지에서 HTML 페이지를 만드는 방법은 무엇입니까? 예를 들어 HTML 페이지가 MS Word의 A4 크기 페이지처럼 동작하도록 할 수 있습니까? 기본적으로 브라우저에 HTML 페이지를 표시하고 A4 크기 페이지의 크기로 내용을 설명 할 수 있기를 원합니다. 단순함을 위해 HTML 페이지에는 텍스트 (이미지 등 없음) 만 포함되고 태그는 포함되지 않는다고 가정합니다. 또한 HTML 페이지를 인쇄하면 A4 크기의 종이 페이지로 나옵니다. 답변 오래 전 2005 년 11 월 AlistApart.com은 HTML과 CSS 만 사용하여 책을 출판 한 방법에 대한 기사를 게시했습니다. 참조 : http://alistapart.com/article/boom 다음은 그 기사의 일부입니다...

질문 : 문자의 절반에 CSS를 적용 할 수 있습니까? 내가 찾고있는 것 : 캐릭터의 절반 을 스타일링하는 방법입니다. (이 경우 반은 투명) 내가 현재 검색하고 시도한 것 (행운 없음) : 문자 / 문자의 절반을 스타일링하는 방법 CSS 또는 JavaScript로 캐릭터의 일부 스타일링 캐릭터의 50 %에 CSS 적용 아래는 제가 얻고 자하는 것의 예입니다. 이를 위해 CSS 또는 JavaScript 솔루션이 존재합니까, 아니면 이미지에 의지해야합니까? 이 텍스트는 동적으로 생성되므로 이미지 경로를 사용하지 않는 것이 좋습니다. 최신 정보: 많은 사람들이 캐릭터의 절반을 스타일링하고 싶은 이유를 물었 기 때문에 이것이 이유입니다. 우리시는 최근 새로운 "브랜드"를 정의하는 데 25 만 달러를 지출했습니..