728x90
반응형

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

CSS를 사용하여 오른쪽에서 배경 이미지 오프셋

질문 : CSS를 사용하여 오른쪽에서 배경 이미지 오프셋 요소 오른쪽에서 특정 수의 픽셀에 배경 이미지를 배치하는 방법이 있습니까? 예를 들어 왼쪽 에서 특정 수의 픽셀 (예 : 10)을 배치하려면 다음과 같이합니다. #myElement { background-position: 10px 0; } 답변 이 CSS3 기능이 유용하다는 것을 알았습니다. /* to position the element 10px from the right */ background-position: right 10px top; 내가 아는 한 이것은 IE8에서 지원되지 않습니다. 최신 Chrome / Firefox에서는 잘 작동합니다. 지원되는 브라우저에 대한 자세한 내용은 사용할 수 있습니까를 참조하십시오. 사용 된 출처 : ht..

JavaScript / jQuery에서 배열에 특정 문자열이 포함되어 있는지 확인하는 방법

질문 : 배열에 JavaScript / jQuery의 특정 문자열이 포함되어 있는지 확인하는 방법은 무엇입니까? "specialword" 가 배열에 나타나는지 감지하는 방법을 알려줄 수 있습니까? 예: categories: [ "specialword" "word1" "word2" ] 답변 이것을 위해 jQuery가 정말로 필요하지 않습니다. var myarr = ["I", "like", "turtles"]; var arraycontainsturtles = (myarr.indexOf("turtles") > -1); 힌트 : indexOf는 지정된 검색 값이 처음 발생하는 위치를 나타내는 숫자를 반환하거나 발생하지 않는 경우 -1을 반환합니다. 또는 function arrayContains(needle, a..

CSS 만 사용하여 링크를 비활성화하는 방법

질문 : CSS 만 사용하여 링크를 비활성화하는 방법 CSS를 사용하여 링크를 비활성화하는 방법이 있습니까? current-page 라는 클래스가 있으며이 클래스와의 링크를 비활성화하여 클릭 할 때 아무 작업도 발생하지 않도록합니다. 답변 이 솔루션에서 : [aria-current="page"] { pointer-events: none; cursor: default; text-decoration: none; color: black; } Link 브라우저 지원은 https://caniuse.com/#feat=pointer-events 를 참조하십시오. Internet Explorer를 지원해야하는 경우 해결 방법이 있습니다. 이 답변을 참조하십시오. 경고 : 비 SVG 요소에 대한 CSS pointer-e..

CSS가 가짜 요소와 함께 작동하는 이유

질문 : CSS가 가짜 요소와 함께 작동하는 이유는 무엇입니까? 제 수업에서 저는 CSS가 구성 요소와 함께 작동한다는 것을 알아 냈습니다. 예: imsocool { color:blue; } HELLO 교수님이 제가 이것을 사용하는 것을 처음 보았을 때, 그는 구성 요소가 작동한다는 사실에 조금 놀랐고 제가 구성한 모든 요소를 ID가있는 단락으로 변경하도록 권장했습니다. 교수님이 내가 만든 요소를 사용하는 것을 원하지 않는 이유는 무엇입니까? 그들은 효과적으로 작동합니다. 또한 왜 그는 구성 요소가 존재하고 CSS와 함께 작동하는지 몰랐습니다. 드문가요? 답변 CSS가 가짜 요소와 함께 작동하는 이유는 무엇입니까? (대부분의) 브라우저는 향후 HTML에 추가되는 기능과 호환되도록 설계되었습니다. 인식되지..

자바 스크립트에서 "=>" (화살표 기능) 의 의미

질문 : 자바 스크립트에서 "=>"(같고 큼으로 형성된 화살표)의 의미는 무엇입니까? >= 연산자는 이상을 의미한다는 것을 알고 있지만 일부 소스 코드에서 => 그 연산자의 의미는 무엇입니까? 코드는 다음과 같습니다. promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => { if (!aDialogAccepted) return; saveAsType = fpParams.saveAsType; file = fpParams.file; continueSave(); }).then(null, Components.utils.reportError); 답변 What It Is 이것은 화살표 기능입니다. 화살표 함수는 ECMAscript 6에..

JavaScript chop/slice/trim 문자열의 마지막 문자 잘라내기

질문 : JavaScript는 문자열의 마지막 문자를 잘라내거나 자르거나 잘라냅니다. 12345.00 이라는 문자열이 있으며 12345.0 을 반환하고 싶습니다. 나는 trim 을 보았지만 이것이 어떻게 작동하는지 보지 못하는 slice 어떤 제안? 답변 하위 문자열 함수를 사용할 수 있습니다. let str = "12345.00"; str = str.substring(0, str.length - 1); console.log(str); 이것은 받아 들여지는 대답이지만 아래 대화에 따라 슬라이스 구문이 훨씬 더 명확합니다. let str = "12345.00"; str = str.slice(0, -1); console.log(str); 출처 : https://stackoverflow.com/question..

Node.js에서 다른 파일의 함수를 "include" 하는 방법

질문 : Node.js에서 다른 파일의 함수를 어떻게 "포함"합니까? app.js라는 파일이 있다고 가정 해 보겠습니다. 매우 간단합니다. var express = require('express'); var app = express.createServer(); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.get('/', function(req, res){ res.render('index', {locals: { title: 'NowJS + Express Example' }}); }); app.listen(8080); "tools.js"에 함수가 있으면 어떻게됩니까? apps.js에서 사용하려면 어떻게 가져 오나요? 아..

JSLint "missing radix parameter" 오류

질문 : JSLint는 "기수 매개 변수 누락"이라고 말합니다. 이 JavaScript 코드에서 JSLint를 실행했으며 다음과 같이 말했습니다. 32 행 문자 30의 문제 : 기수 매개 변수가 누락되었습니다. 문제의 코드는 다음과 같습니다. imageIndex = parseInt(id.substring(id.length - 1))-1; 여기서 무엇이 잘못 되었습니까? 답변 parseInt로 기수를 전달하는 것은 항상 좋은 습관입니다. parseInt(string, radix) 십진수- parseInt(id.substring(id.length - 1), 10) radix 매개 변수가 생략되면 JavaScript는 다음을 가정합니다. 문자열이 "0x"로 시작하면 기수는 16 (16 진수)입니다. 문자열이 ..

CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하는 방법

질문 : CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하려면 어떻게합니까? CSS 만 사용하여 background 을 반투명하게 만들지 만 요소의 내용 (텍스트 및 이미지)을 불투명하게 만들 수 있습니까? 텍스트와 배경을 두 개의 별도 요소로 사용하지 않고이 작업을 수행하고 싶습니다. 시도 할 때 : p { position: absolute; background-color: green; filter: alpha(opacity=60); opacity: 0.6; } span { color: white; filter: alpha(opacity=100); opacity: 1; } Hello world 자식 요소가 부모의 불투명도를받는 것처럼 보이므로 opacity:1 은 opacity:0.6 에 상..

CSS를 사용하여 height: 0 를 height: auto 로 전환하는 방법

질문 : 높이 전환 방법 : 0; 높이 : 자동; CSS를 사용하십니까? CSS 전환을 사용하여 슬라이드를 만들려고합니다. 은 높이에서 시작합니다 height: 0; . 호버시 height:auto; . 하지만 이로 인해 전환이 아닌 단순히 나타나게됩니다. height: 40px; height: auto; height: 0; 까지 올라갑니다. , 갑자기 올바른 높이로 점프합니다. JavaScript를 사용하지 않고 어떻게 할 수 있습니까? #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit-transition: height 1s ease; -o-transition: ..

CSS 텍스트 색깔에 불투명도 적용하는 방법

질문 : CSS 불투명도는 텍스트가 아닌 배경색에만 적용됩니까? opacity 속성을 div background 속성에만 할당하고 텍스트에는 할당 할 수 없습니까? 난 노력 했어: background: #CCC; opacity: 0.6; 그러나 이것은 불투명도를 변경하지 않습니다. 답변 투명한 배경을 사용하고 싶은 것 같습니다.이 경우 rgba() 함수를 사용해 볼 수 있습니다. rgba(R, G, B, A) R (빨간색), G (녹색) 및 B (파란색)는 s 또는 s 일 수 있습니다. 여기서 숫자 255는 100 %에 해당합니다. (알파)는 0과 1 사이 일 수 있습니다. 여기서 숫자 1은 100 % (전체 불투명도)에 해당합니다. RGBa 예 rgba(51, 170, 51, .1) /* 10% opa..

CSS 배경 늘리기 및 크기 조정

질문 : CSS 배경 늘리기 및 크기 조정 컨테이너를 채우기 위해 CSS의 배경을 늘리거나 확장하는 방법이 있습니까? 답변 background-size 를 사용하여이 작업을 수행 할 수 있습니다. body { background-image: url(bg.jpg); background-size: cover; } cover 는 이미지를 수직 또는 수평으로 늘려서 타일 / 반복하지 않는 것을 의미합니다. Safari 3 이상, Chrome, Opera 10 이상, Firefox 3.6 이상 및 Internet Explorer 9 이상에서 작동합니다. Internet Explorer의 하위 버전에서 작동하려면 다음 CSS를 사용해보세요. filter: progid:DXImageTransform.Microsoft..

jQuery를 사용하여 JS 객체를 배열로 변환

질문 : jQuery를 사용하여 JS 객체를 배열로 변환 내 응용 프로그램은 다음과 같은 JavaScript 개체를 만듭니다. myObj= {1:[Array-Data], 2:[Array-Data]} 하지만이 객체는 배열로 필요합니다. array[1]:[Array-Data] array[2]:[Array-Data] $.each 를 반복하고 요소를 배열에 추가하여이 개체를 배열로 변환하려고했습니다. x=[] $.each(myObj, function(i,n) { x.push(n);}); 객체를 배열이나 함수로 변환하는 더 좋은 방법이 있습니까? 답변 var myObj = { 1: [1, 2, 3], 2: [4, 5, 6] }; var array = $.map(myObj, function(value, index)..

Node.js 백그라운드 프로세스 실행하고 절대 중지 되지 않는 방법

질문 : Node.js를 백그라운드 프로세스로 실행하고 절대 죽지 않는 방법은 무엇입니까? 퍼티 SSH를 통해 Linux 서버에 연결합니다. 다음과 같은 백그라운드 프로세스로 실행하려고했습니다. $ node server.js & 그러나 2.5 시간이 지나면 터미널이 비활성화되고 프로세스가 종료됩니다. 어쨌든 터미널 연결이 끊어진 상태에서도 프로세스를 유지할 수 있습니까? 편집 1 nohup 시도했지만 Putty SSH 터미널을 닫거나 인터넷 연결을 해제하자마자 서버 프로세스가 즉시 중지됩니다. Putty에서해야 할 일이 있습니까? 편집 2 (2012 년 2 월) node.js 모듈이 영원히 있습니다. node.js 서버를 데몬 서비스로 실행합니다. 답변 간단한 솔루션 (프로세스로 돌아가는 데 관심이없는 ..

Normalize.css와 CSS Reset의 차이점

질문 : Normalize.css와 CSS 재설정의 차이점은 무엇입니까? CSS Reset이 무엇인지 알고 있지만 최근에 Normalize.css라는 새로운 기능에 대해 들었습니다. Normalize.css 와 Reset CSS 의 차이점은 무엇입니까? CSS 정규화와 CSS 재설정의 차이점은 무엇입니까? CSS 재설정에 대한 새로운 유행어입니까? 답변 나는 normalize.css에서 일합니다. 주요 차이점은 다음과 같습니다. Normalize.css는 모든 것을 "스타일링 해제"하는 대신 유용한 기본값을 유지합니다. sup 또는 sub 와 같은 요소는 normalize.css를 포함시킨 후 "그냥 작동합니다"(실제로 더 강력하게 만들어 짐). 반면 reset.css를 포함하면 일반 텍스트와 시각적으로..

Javascript 에서 문자를 대소문자를 구분하지 않고 판별하는 방법

질문 : 대소 문자를 구분하지 않습니다. 다음이 있습니다. if (referrer.indexOf("Ral") == -1) { ... } 내가 뭘 좋아하는 것은하는 것입니다 Ral 이 될 수 있도록하는 것이, 사례를 구분을 RAl , rAl 등, 여전히 일치합니다. Ral 이 대소 문자를 구분하지 않아야한다고 말하는 방법이 있습니까? 답변 referrer 뒤에 .toUpperCase() 추가합니다. 이 메서드는 문자열을 대문자 문자열로 바꿉니다. 그런 다음 Ral 대신 RAL 을 사용하여 .indexOf() 사용하십시오. if (referrer.toUpperCase().indexOf("RAL") === -1) { 정규 표현식을 사용하여 동일한 결과를 얻을 수도 있습니다 (특히 동적 패턴에 대해 테스트하려는..

요소를 수평 중앙에 배치하는 방법

질문 : 요소를 수평 중앙에 배치하는 방법 CSS를 사용하여 다른 가로 중앙에 어떻게 배치 할 수 있습니까? Foo foo 답변 이 CSS를 내부 적용 할 수 있습니다. #inner { width: 50%; margin: 0 auto; } width 를 50% 로 설정할 필요는 없습니다. 보다 작은 너비는 작동합니다. margin: 0 auto 는 실제 센터링을 수행합니다. Internet Explorer 8 이상을 대상으로하는 경우 대신 다음을 사용하는 것이 좋습니다. #inner { display: table; margin: 0 auto; } 내부 요소의 중심을 수평으로 만들고 특정 width 를 설정하지 않고 작동합니다. 여기에서 작업 예 : #inner { display: table; margin..

JavaScript에서 문자열을 정수로 변환하는 방법

질문 : JavaScript에서 문자열을 정수로 변환하는 방법은 무엇입니까? JavaScript에서 문자열을 정수로 어떻게 변환합니까? 답변 가장 간단한 방법은 기본 Number 함수를 사용하는 것입니다. var x = Number("1000") 이것이 작동하지 않으면 parseInt , unary plus , parseFloat with floor 및 Math.round 메서드가 있습니다. parseInt : var x = parseInt("1000", 10); // you want to use radix 10 // so you get a decimal number even with a leading 0 and an old browser ([IE8, Firefox 20, Chrome 22 and old..

검색 엔진이 AngularJS 애플리케이션을 처리하는 방식

질문 : 검색 엔진은 AngularJS 애플리케이션을 어떻게 처리합니까? 검색 엔진 및 SEO와 관련하여 AngularJS 응용 프로그램에 두 가지 문제가 있습니다. 1) 사용자 정의 태그는 어떻게됩니까? 검색 엔진이 해당 태그 내의 전체 콘텐츠를 무시합니까? 즉 내가 가지고 있다고 가정 Hey, this title is important 사용자 정의 태그 안에 있음에도 불구하고 2) {{}} 바인딩 인덱싱의 검색 엔진을 문자 그대로 피하는 방법이 있습니까? 즉 {{title}} 나는 내가 뭔가 할 수 있다는 것을 안다. 하지만 실제로 크롤러가 제목을 "보도록"하려면 어떻게해야합니까? 서버 측 렌더링이 유일한 솔루션입니까? 답변 2014 년 5 월 업데이트 이제 Google 크롤러가 자바 스크립트를 실행..

JavaScript의 연산자 !! (NOT)

질문 : 이것은 !! (NOT) JavaScript의 연산자? 내가 알지 못하는 연산자를 사용하는 것처럼 보이는 코드를 두 개의 느낌표 형태로 보았습니다. !! . 누군가이 운영자가 무엇을하는지 말해 줄 수 있습니까? 내가 본 맥락은 this.vertical = vertical !== undefined ? !!vertical : this.vertical; 답변 Object 를 boolean 변환합니다. 거짓이면 (예 : 0 , null , undefined 등), false 이고 그렇지 않으면 true 입니다. !oObject // inverted boolean !!oObject // non inverted boolean so true boolean representation 그래서 !! 연산자가 아니라..

CSS-float 자식 DIV 높이를 부모 높이로 확장하는 방법

질문 : CSS-float 자식 DIV 높이를 부모 높이로 확장 페이지 구조는 다음과 같습니다. 이제 child-left DIV에는 더 많은 콘텐츠가 있으므로 parent DIV의 높이는 자식 DIV에 따라 증가합니다. 그러나 문제는 child-right 키가 증가하지 않는다는 것입니다. 높이를 부모와 같게 만들려면 어떻게해야합니까? 답변 parent 요소의 경우 다음 속성을 추가합니다. .parent { overflow: hidden; position: relative; width: 100%; } .child-right 다음과 같습니다. .child-right { background:green; height: 100%; width: 50%; position: absolute; right: 0; top:..

table 셀의 CSS 텍스트가 길면 줄임표로 생략하는 방법

질문 : 표 셀의 CSS 텍스트 오버플로? text-overflow 로를 사용하여 텍스트가 너무 길어서 한 줄에 맞지 않는 경우 여러 줄로 감싸는 대신 줄임표로 잘립니다. 이것이 가능한가? 나는 이것을 시도했다 : td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 그러나 white-space: nowrap 은 텍스트 (및 해당 셀)가 지속적으로 오른쪽으로 확장되어 테이블의 전체 너비가 컨테이너 너비를 넘어서게하는 것처럼 보입니다. 그러나 텍스트가 없으면 텍스트가 셀의 가장자리에 닿을 때 여러 줄로 계속 줄 바꿈됩니다. 답변 테이블 셀을 오버플로 할 때 줄임표가있는 텍스트를 자르려면 오버플로가 작동하도록 td max-width C..

AngularJS를 사용하여 브라우저 콘솔에서 $ scope 변수에 액세스 하는 방법

질문 : AngularJS를 사용하여 브라우저 콘솔에서 $ scope 변수에 어떻게 액세스합니까? Chrome의 JavaScript 콘솔에서 $scope 변수에 액세스하고 싶습니다. 어떻게하나요? $scope myapp 모듈 이름을 변수로 볼 수 없습니다. 답변 개발자 도구의 HTML 패널에서 요소를 선택하고 콘솔에 입력합니다. angular.element($0).scope() WebKit 및 Firefox에서 $0 은 요소 탭에서 선택한 DOM 노드에 대한 참조이므로 이렇게하면 선택한 DOM 노드 범위가 콘솔에 인쇄됩니다. 다음과 같이 요소 ID로 범위를 타겟팅 할 수도 있습니다. angular.element(document.getElementById('yourElementId')).scope() 애드..

SCSS 파일에서 일반 CSS 파일 가져오기

질문 : SCSS 파일에서 일반 CSS 파일을 가져 오시겠습니까? @import 명령을 사용하여 일반 CSS 파일을 가져올 수 있습니까? sass의 모든 SCSS 구문을 사용하고 있지는 않지만 기능을 결합 / 압축하는 것이 즐겁고 모든 파일의 이름을 * .scss로 변경하지 않고 사용할 수 있기를 원합니다. 답변 이 글을 쓰는 시점에서 이것은 구현되지 않은 것 같습니다. https://github.com/sass/sass/issues/193 libsass (C / C ++ 구현)의 경우 *.scss 파일과 동일한 방식으로 *.css 대해 가져 오기가 작동합니다. 확장자를 생략하면됩니다. @import "path/to/file"; path/to/file.css 가져옵니다. 자세한 내용은 이 답변 을 참조하..

Moment js 날짜 시간 비교

질문 : 순간 js 날짜 시간 비교 날짜 시간 형식을 지정하기 위해 moment.js를 사용하고 있으며 여기에는 두 개의 날짜 값이 있으며 한 날짜가 다른 날짜보다 클 때 특정 기능을 얻고 싶습니다. 대부분의 문서를 읽었지만이를 달성하는 기능을 찾지 못했습니다. 거기있을 거라는 걸 알아요. 이것은 내 코드입니다. var date_time = 2013-03-24 + 'T' + 10:15:20:12 + 'Z' var d = moment(date_time).tz('UTC'); // first date var now = new Date(), dnow = moment(now).tz('UTC'), snow = dnow.minute() % 15, diffnow = 15 - snow, tonow = moment(dno..

728x90
반응형