728x90
반응형

프로그래밍 언어/HTML,CSS,JS 438

HTML의 select 기본 값 설정하는 방법

질문 : HTML의 기본값을 어떻게 설정할 수 있습니까?요소? 아래 "value" 속성 세트를 추가하면 기본적으로 제공된 "value" 이 선택됩니다. 1 2 3 4 5 그러나 이것은 내가 예상했던대로 작동하지 않았습니다. 기본적으로 선택 요소를 어떻게 설정할 수 있습니까? 답변 기본값이 될 옵션에 대해 selected="selected" 3 출처 : https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element

HTML의 id 속성을 만들 때 규칙

질문 : HTML의 id 속성에 유효한 값은 무엇입니까? id 속성을 만들 때 값에 어떤 규칙이 있습니까? 답변 HTML 4 의 경우 답은 기술적으로 다음과 같습니다. ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 그 뒤에 문자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_")이 올 수 있습니다. , 콜론 ( ":") 및 마침표 ( "."). HTML 5 는 훨씬 더 관대하며, ID는 적어도 하나의 문자를 포함해야하며 공백 문자를 포함하지 않을 수 있습니다. id 속성은 XHTML 에서 대소 문자를 구분합니다. 순전히 실용적인 문제로 특정 문자를 피하는 것이 좋습니다. 마침표, 콜론 및 '#'은 CSS 선택기에서 특별한 의미가 있으므로 CSS에서 백 슬래시를 사용하거나 jQ..

JavaScript에서 하나의 요소를 제외하고 배열을 복제하는 방법

질문 : 하나의 키를 제외하고 JavaScript 객체를 복제하려면 어떻게해야합니까? 평면 JS 개체가 있습니다. {a: 1, b: 2, c: 3, ..., z:26} 하나의 요소를 제외하고 개체를 복제하고 싶습니다. {a: 1, c: 3, ..., z:26} 이를 수행하는 가장 쉬운 방법은 무엇입니까 (가능한 경우 es6 / 7 사용 선호)? 답변 Babel 을 사용하는 경우 다음 구문을 사용하여 속성 b를 x에서 변수 b로 복사 한 다음 나머지 속성을 변수 y로 복사 할 수 있습니다. let x = {a: 1, b: 2, c: 3, z:26}; let {b, ...y} = x; 다음 으로 변환 됩니다. "use strict"; function _objectWithoutProperties(obj, ke..

CSS3를 사용한 SVG drop shadow

질문 : CSS3를 사용한 SVG 드롭 섀도우 css3을 사용하여 svg 요소에 대한 그림자를 설정할 수 있습니까? box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 필터 효과를 사용하여 그림자를 만드는 것에 대한 몇 가지 언급을 보았습니다. CSS 만 사용하는 예가 있습니까? 다음은 cusor 스타일이 올바르게 적용되었지만 그림자 효과가없는 작업 코드입니다. 최소한의 코드로 그림자 효과를 얻을 수 있도록 도와주세요. svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shado..

JSLint : "use strict"의 함수 형식을 사용합니다.

질문 : JSLint가 갑자기보고합니다. "use strict"의 함수 형식을 사용합니다. 나는 진술을 포함한다 : "use strict"; 대부분의 Javascript 파일 시작 부분에 있습니다. JSLint는 이전에 이것에 대해 경고 한 적이 없습니다. 그러나 이제는 다음과 같이 말합니다. "엄격한 사용"의 함수 형식을 사용하십시오. "함수 형식"이 무엇인지 아는 사람이 있습니까? 답변 'use strict'; 포함; 래핑 함수의 첫 번째 문으로 사용되므로 해당 함수에만 영향을줍니다. 이는 엄격하지 않은 스크립트를 연결할 때 문제를 방지합니다. Douglas Crockford의 최신 블로그 게시물 Strict Mode Is Coming To Town을 참조하십시오 . 해당 게시물의 예 : (funct..

JavaScript의 특정 색인에서 문자를 바꾸는 방법

질문 : JavaScript의 특정 색인에서 문자를 어떻게 바꾸나요? 문자열이 있습니다. Hello world 라고 가정 해 보겠습니다. 색인 3에서 문자를 대체해야합니다. 색인을 지정하여 문자를 어떻게 대체 할 수 있습니까? var str = "hello world"; 나는 뭔가가 필요해 str.replaceAt(0,"h"); 답변 JavaScript에서 문자열은 변경 불가능합니다 . 즉, 변경된 내용으로 새 문자열을 만들고이를 가리키는 변수를 할당하는 것이 가장 좋습니다. replaceAt() 함수를 직접 정의해야합니다. String.prototype.replaceAt = function(index, replacement) { return this.substr(0, index) + replacemen..

CSS에서 px 또는 rem 중에 무엇을 사용해야 할까?

질문 : CSS에서 px 또는 rem 값 단위를 사용해야합니까? 새 웹 사이트를 디자인하고 있으며 가능한 한 많은 브라우저 및 브라우저 설정과 호환되기를 원합니다. 글꼴 및 요소의 크기에 사용할 측정 단위를 결정하려고하는데 결정적인 답을 찾을 수 없습니다. 내 질문은 : 내 CSS에서 px 또는 rem 지금까지 px 사용은 브라우저에서 기본 글꼴 크기를 조정하는 사용자와 호환되지 않는다는 것을 알고 있습니다. 나는 그들이 계단식으로 rem 비해 유지 관리가 더 em 때문에 무시했습니다. 어떤 사람들은 rem 은 해상도에 독립적이므로 더 바람직하다고 말합니다. 그러나 다른 사람들은 대부분의 최신 브라우저가 어쨌든 모든 요소를 동일하게 확대하므로 px 사용하는 것은 문제가되지 않는다고 말합니다. CSS에서 ..

텍스트 선택 강조 표시를 비활성화하는 방법

질문 : 텍스트 선택 강조 표시를 비활성화하는 방법 버튼 (예 : Stack Overflow 페이지 상단에있는 Questions , Tags , Users 등) 또는 탭처럼 작동하는 앵커의 경우 사용자가 실수로 텍스트를 선택한 경우 강조 표시 효과를 비활성화하는 CSS 표준 방법이 있습니까? ? 이 작업은 JavaScript로 수행 할 수 있으며 약간의 인터넷 검색으로 Mozilla 전용 -moz-user-select 옵션이 생성되었습니다. CSS로이를 수행 할 수있는 표준 준수 방법이 있습니까? 그렇지 않은 경우 "모범 사례"접근 방식은 무엇입니까? 답변 2017 년 1 월 업데이트 : Can I use 에 따르면 현재 Internet Explorer 9 및 이전 버전을 제외한 모든 브라우저에서 use..

구성 요소가 ReactJS에서 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다.

질문 : 구성 요소가 ReactJS에서 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 경고 : 구성 요소가 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 제어되지 않음에서 제어 됨으로 (또는 그 반대로) 전환되지 않아야합니다. 구성 요소의 수명 동안 제어되거나 제어되지 않은 입력 요소를 사용할지 여부를 결정합니다. * 다음은 내 코드입니다. constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); } .... onChange(field, e){ let fields = this.state.fields; fie..

HTML5 로컬 저장소와 세션 저장소

질문 : HTML5 로컬 저장소와 세션 저장소 비 영구적이고 현재 창으로 만 범위가 지정되는 것 외에도 로컬 스토리지를 통한 세션 스토리지에 대한 이점 (성능, 데이터 액세스 등)이 있습니까? 답변 localStorage 및 sessionStorage 모두 Storage를 확장합니다. sessionStorage 의 의도 된 "비 지속성"을 제외하고는 차이점이 없습니다. localStorage 저장된 데이터는 명시 적으로 삭제 될 때까지 유지됩니다 . 변경 사항이 저장되고 현재 및 향후 사이트 방문시 사용할 수 있습니다. sessionStorage 경우 탭당 변경 사항 만 사용할 수 있습니다. 변경 사항은 저장되어 닫힐 때까지 해당 탭의 현재 페이지에서 사용할 수 있습니다. 닫히면 저장된 데이터가 삭제됩니..

CSS 표시 속성의 전환

질문 : CSS 표시 속성의 전환 저는 현재 CSS '메가 드롭 다운'메뉴를 디자인하고 있습니다. 기본적으로 일반 CSS 전용 드롭 다운 메뉴이지만 다른 유형의 콘텐츠를 포함하는 메뉴입니다. 현재 CSS 3 전환은 'display'속성에 적용되지 않는 것으로 보입니다 display: none 에서 display: block (또는 어떤 조합)으로도 전환 할 수 없습니다. 누군가가 최상위 메뉴 항목 중 하나를 가리킬 때 위 예제의 두 번째 계층 메뉴가 '페이드 인'하는 방법이 있습니까? visibility: 속성에서 전환을 사용할 수 있다는 것을 알고 있지만이를 효과적으로 사용하는 방법을 생각할 수 없습니다. 나는 또한 높이를 사용해 보았지만 비참하게 실패했습니다. JavaScript를 사용하여이 작업을 ..

CSS에서 테두리 불투명도를 설정하는 방법

질문 : CSS에서 테두리 불투명도를 설정할 수 있습니까? 이와 같은 요소의 테두리를 반투명하게 만드는 간단한 CSS 방법이 있습니까? border-opacity: 0.7; 그렇지 않다면 이미지를 사용하지 않고 어떻게 할 수 있는지 아는 사람이 있습니까? 답변 불행히도 opacity 요소는 전체 요소 (텍스트 포함)를 반투명하게 만듭니다. 테두리를 반투명하게 만드는 가장 좋은 방법은 rgba 색상 형식을 사용하는 것입니다. 예를 들어, 불투명도가 50 % 인 빨간색 테두리를 제공합니다. div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: paddin..

CSS에서 속성으로 요소 선택

질문 : CSS에서 속성으로 요소 선택 data-role )으로 CSS의 요소를 선택할 수 있습니까? 답변 속성 선택기를 사용하는 것을 의미하는 경우 다음과 같은 이유가 있습니다. [data-role="page"] { /* Styles */ } 내가 링크하는 문서에서 모두 다루는 다양한 시나리오에 사용할 수있는 다양한 속성 선택기가 있습니다. 맞춤 데이터 속성이 '새로운 HTML5 기능'임에도 불구하고 브라우저는 일반적으로 비표준 속성을 지원하는 데 문제가 없으므로 속성 선택기로 필터링 할 수 있어야합니다. 과 CSS 유효성 검사에 대해서도 걱정할 필요가 없습니다. CSS는 선택기 구문을 깨지 않는 한 네임 스페이스가 지정되지 않은 속성 이름에 대해 신경 쓰지 않기 때문입니다. 출처 : https://s..

HTML 양식 입력 필드에 대해 disabled =“disabled”와 readonly =“readonly”의 차이점

질문 : HTML 양식 입력 필드에 대해 disabled =“disabled”와 readonly =“readonly”의 차이점은 무엇입니까? 나는 이것에 대해 조금 읽었지만 다른 브라우저가 사물을 어떻게 처리하는지에 대해 확실한 것을 찾지 못하는 것 같습니다. 답변 readonly 요소는 편집 할 수 없지만 해당 form 제출 될 때 전송됩니다. disabled 요소는 편집 할 수 없으며 제출시 전송되지 않습니다. 또 다른 차이점은 readonly 요소는 포커스를받을 수 있고 (폼을 "탭"할 때 포커스를받을 수 있음) disabled 요소는 할 수 없다는 것입니다. 이 훌륭한 기사 또는 w3c의 정의 에서 이에 대해 자세히 읽어보십시오. 중요한 부분을 인용하려면 : 주요 차이점 Disabled 속성 비활..

JSON과 유사한 형식으로 원형 구조를 출력 하는 방법

질문 : JSON과 유사한 형식으로 원형 구조를 인쇄하려면 어떻게해야합니까? JSON으로 변환하여 보내려는 큰 개체가 있습니다. 그러나 그것은 원형 구조를 가지고 있습니다. 나는 순환 참조가 존재하는 모든 것을 던지고 문자열이 될 수있는 것을 보내고 싶습니다. 어떻게하나요? 감사. var obj = { a: "foo", b: obj } obj를 다음과 같이 문자열 화하고 싶습니다. {"a":"foo"} 답변 사용자 지정 JSON.stringify 와 함께 JSON.stringify를 사용합니다. 예를 들면 : // Demo: Circular reference var circ = {}; circ.circ = circ; // Note: cache should not be re-used by repeated ..

HTML 양식 읽기 전용 SELECT 태그 / 입력

질문 : HTML 양식 읽기 전용 SELECT 태그 / 입력 HTML 사양에 따르면 HTML의 select 태그에는 readonly 속성 disabled 속성 만 있습니다. 따라서 사용자가 드롭 다운을 변경 disabled 하려면 disabled를 사용해야합니다. 유일한 문제는 비활성화 된 HTML 양식 입력이 POST / GET 데이터에 포함되지 않는다는 것입니다. select 태그에 대한 readonly 속성을 에뮬레이트하고 여전히 POST 데이터를 얻는 가장 좋은 방법은 무엇입니까? 답변 select 요소를 disabled 상태로 유지하고 동일한 이름과 값을 가진 또 다른 숨겨진 input SELECT를 다시 활성화하는 경우 해당 값을 onchange 이벤트의 숨겨진 입력에 복사하고 숨겨진 입력을 ..

브라우저마다 허용되는 URL의 최대 길이

질문 : 다른 브라우저에서 URL의 최대 길이는 얼마입니까? 다른 브라우저에서 URL의 최대 길이는 얼마입니까? 브라우저마다 다른가요? 최대 URL 길이가 HTTP 사양의 일부입니까? 답변 짧은 답변 - 사실상의 제한 문자 수 2000자 URL을 2000 자 미만으로 유지하면 거의 모든 클라이언트 및 서버 소프트웨어 조합에서 작동합니다. 특정 브라우저를 대상으로하는 경우 특정 제한에 대한 자세한 내용은 아래를 참조하십시오. 긴 답변 - 첫째, 기준... RFC 2616 (Hypertext Transfer Protocol HTTP / 1.1) 섹션 3.2.1에 따르면 HTTP 프로토콜은 URI 길이에 대한 사전 제한을 두지 않습니다. 서버는 제공하는 모든 리소스의 URI를 처리 할 수 있어야하며 이러한 U..

HTML5 number input의 화살표를 숨기는 방법

질문 : HTML5 숫자 입력의 스핀 상자를 숨길 수 있습니까? 일부 브라우저 (예 : Chrome)에서 숫자 유형의 HTML 입력에 대해 렌더링하는 새 스핀 상자를 숨기는 브라우저간에 일관된 방법이 있습니까? 위 / 아래 화살표가 나타나지 않도록 CSS 또는 JavaScript 메서드를 찾고 있습니다. 답변 이 CSS는 웹킷 브라우저의 스핀 버튼을 효과적으로 숨 깁니다 (Chrome 7.0.517.44 및 Safari 버전 5.0.2 (6533.18.5)에서 테스트했습니다). input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none;

문자열이 JS의 정규식과 일치하는지 확인하는 방법

질문 : 문자열이 JS의 정규식과 일치하는지 확인 JavaScript (jQuery와 함께 사용할 수 있음)를 사용하여 문자열이 정규식과 일치하는지 확인하기 위해 클라이언트 측 유효성 검사를 수행하고 싶습니다. ^([a-z0-9]{5,})$ 이상적으로는 true 또는 false를 반환하는 표현식입니다. 저는 JavaScript 초보자입니다. match() 가 필요한 작업을합니까? 문자열의 일부가 전체가 아닌 정규식과 일치하는지 확인하는 것 같습니다. 답변 원하는 결과가 boolean이면 regex.test() 사용하십시오. console.log(/^([a-z0-9]{5,})$/.test('abc1')); // false console.log(/^([a-z0-9]{5,})$/.test('abc12')); ..

nodejs 코드의 package.json에서 버전을 얻는 방법

질문 : nodejs 코드의 package.json에서 버전을 얻는 방법이 있습니까? nodejs 앱 package.json 에 버전을 설정하는 방법이 있습니까? 나는 이와 같은 것을 원할 것이다 var port = process.env.PORT || 3000 app.listen port console.log "Express server listening on port %d in %s mode %s", app.address().port, app.settings.env, app.VERSION 답변 다음 코드 조각이 가장 잘 작동한다는 것을 알았습니다. require 를 사용하여 package.json 을로드하기 때문에 현재 작업 디렉토리에 관계없이 작동합니다. var pjson = require('./pa..

DOM의 특정 요소에서 HTML + CSS + JS를 선택적으로 복사하는 도구

질문 : DOM의 특정 요소에서 HTML + CSS + JS를 선택적으로 복사하는 도구 [닫기] 대부분의 웹 개발자와 마찬가지로, 마크 업이 어떻게 작성되는지보기 위해 웹 사이트의 소스를 살펴 보는 것을 좋아합니다. Firebug 및 Chrome 개발자 도구와 같은 도구를 사용하면 코드를 쉽게 검사 할 수 있지만 특정 섹션을 복사하고 로컬에서 작업하려면 모든 개별 요소와 관련 CSS를 복사하는 것이 어려울 것입니다. 그리고 아마도 전체 소스를 저장하고 관련없는 코드를 잘라 내기 위해 많은 노력을 기울일 것입니다. Firebug에서 요소를 마우스 오른쪽 버튼으로 클릭하고 "이 요소에 대해 HTML + CSS + JS 저장"옵션이 있으면 좋을 것입니다. 그러한 도구가 있습니까? 이 기능을 추가하기 위해 Fi..

CSS에서 "absolute" 요소를 중앙에 배치하는 방법

질문 : CSS에서 "절대"위치와 정의되지 않은 너비가있는 요소를 중앙에 배치 하시겠습니까? 내 창 중앙에 div ( position:absolute; ) 요소를 배치해야합니다. 그러나 너비를 알 수 없기 때문에 그렇게하는 데 문제가 있습니다. 나는 이것을 시도했다. 그러나 너비가 반응하므로 조정해야합니다. .center { left: 50%; bottom: 5px; } 내가 어떻게 해? 답변 I am some centered shrink-to-fit content! tum te tum 출처 : https://stackoverflow.com/questions/1776915/center-an-element-with-absolute-position-and-undefined-width-in-css

Chrome sendrequest 오류 : TypeError : Converting circular structure to JSON

질문 : Chrome sendrequest 오류 : TypeError : 원형 구조를 JSON으로 변환 다음이 있습니다 ... chrome.extension.sendRequest({ req: "getDocument", docu: pagedoc, name: 'name' }, function(response){ var efjs = response.reply; }); 다음을 호출합니다 .. case "getBrowserForDocumentAttribute": alert("ZOMG HERE"); sendResponse({ reply: getBrowserForDocumentAttribute(request.docu,request.name) }); break; 그러나 내 코드는 "ZOMG HERE"에 도달하지 않고 ..

node.js에서 파일을 한 번에 한 줄씩 읽는 방법

질문 : node.js에서 한 번에 한 줄씩 파일을 읽습니까? 큰 파일을 한 번에 한 줄씩 읽으려고합니다. 나는 주제를 다룬 Quora에 대한 질문을 찾았지만 모든 것을 함께 맞추기위한 몇 가지 연결이 누락되었습니다. var Lazy=require("lazy"); new Lazy(process.stdin) .lines .forEach( function(line) { console.log(line.toString()); } ); process.stdin.resume(); 내가 알아 내고 싶은 부분은이 샘플 에서처럼 STDIN 대신 파일에서 한 번에 한 줄씩 읽는 방법입니다. 나는 시도했다 : fs.open('./VeryBigFile.csv', 'r', '0666', Process); function Pro..

JavaScript에서 변수가 배열인지 확인 하는 방법

질문 : JavaScript에서 변수가 배열인지 어떻게 확인합니까? 변수가 JavaScript에서 배열인지 단일 값인지 확인하고 싶습니다. 가능한 해결책을 찾았습니다 ... if (variable.constructor == Array)... 이것이 최선의 방법입니까? 답변 ㅁㅁ 변수가 배열인지 확인하는 방법에는 여러 가지가 있습니다. 최상의 솔루션은 선택한 솔루션입니다. variable.constructor === Array 이것은 Chrome 및 대부분의 다른 모든 브라우저에서 가장 빠른 방법입니다. 모든 배열은 객체이므로 생성자 속성을 확인하는 것은 JavaScript 엔진의 빠른 프로세스입니다. 객체 속성이 배열인지 확인하는 데 문제가있는 경우 먼저 속성이 있는지 확인해야합니다. variable.p..

728x90
반응형