728x90
반응형

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

'div'컨테이너에 맞게 이미지 크기를 자동으로 조정하는 방법

질문 : 'div'컨테이너에 맞게 이미지 크기를 자동으로 조정하려면 어떻게합니까? 너비 : 높이 비율을 유지하면서 더 작은 너비 div 컨테이너에 맞도록 큰 이미지의 크기를 자동으로 조정하는 방법은 무엇입니까? 예 : stackoverflow.com-이미지가 편집기 패널에 삽입되고 이미지가 너무 커서 페이지에 맞지 않으면 이미지 크기가 자동으로 조정됩니다. 답변 이미지 태그에 명시적인 너비 또는 높이를 적용하지 마십시오. 대신 다음을 제공하십시오. max-width:100%; max-height:100%; 또한 height: auto; 너비 만 지정하려는 경우. 예 : http://jsfiddle.net/xwrvxser/1/ img { max-width: 100%; max-height: 100%; } ...

div 내부에서 이미지를 세로로 정렬하는 방법

질문 : div 내부에서 이미지를 세로로 정렬하는 방법 div 내부에 이미지를 어떻게 정렬 할 수 있습니까? class ="frame "을 사용하여 를 세로로 가운데에 배치해야합니다. .frame 의 높이는 고정되어 있고 이미지의 높이는 알 수 없습니다. 유일한 해결책 인 경우 .frame 에 새 요소를 추가 할 수 있습니다. Internet Explorer 7 이상, WebKit, Gecko에서이 작업을 수행하려고합니다. 여기 에서 jsfiddle을 참조하십시오. .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; ma..

배경에서 CSS 만 사용해서 이미지 늘리기 및 크기 조정

질문 : 백그라운드에서 CSS 이미지 늘리기 및 크기 조정-CSS 만 사용 브라우저 뷰포트 크기에 따라 배경 이미지가 늘어나고 크기가 조정되기를 원합니다. 예를 들어 Stretch 및 Scale CSS 배경과 같은 작업을 수행하는 Stack Overflow에 대한 몇 가지 질문을 보았습니다. img 태그가 아닌 background 사용하여 이미지를 배치하고 싶습니다. 그 img 태그가 배치되고 CSS로 img 태그에 찬사를 보냅니다. width:100%; height:100%; 작동하지만 그 질문은 조금 오래되었으며 CSS 3에서 배경 이미지 크기를 조정하면 꽤 잘 작동한다고 말합니다. 이 예제를 첫 번째 예제로 시도했지만 제대로 작동하지 않았습니다. background-image 선언으로 수행하는 좋은..

div에서 텍스트를 세로로 정렬하는 방법

질문 : div에서 텍스트를 세로로 정렬하려면 어떻게합니까? div와 텍스트를 정렬하는 가장 효과적인 방법을 찾으려고합니다. 몇 가지 시도했지만 작동하지 않는 것 같습니다. .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei..

AngularJS에서 ng-repeat로 키와 값을 반복하는 방법

질문 : AngularJS에서 ng-repeat로 키와 값을 반복하는 방법은 무엇입니까? 내 컨트롤러에는 $scope.object = data json 키와 값이있는 사전입니다. 템플릿에서 object.name 을 사용하여 속성에 액세스 할 수 있습니다. 키를 반복하고 다음과 같이 테이블에 표시 할 수있는 방법이 있습니까? {{key}} data.key 데이터는 다음과 같습니다 { "id": 2, "project": "wewe2012", "date": "2013-02-26", "description": "ewew", "eet_no": "ewew", } 답변 어때 : {{key}} {{ value }} 이 방법은 문서에 나열되어 있습니다 : https://docs.angularjs.org/api/ng/di..

Node.js에서“ReferenceError : primordials is not defined”수정 방법

질문 : Node.js에서“ReferenceError : primordials is not defined”수정 방법 'npm install'로 Node.js 모듈을 설치 한 다음 명령 프롬프트에서 gulp sass-watch 그 후 아래와 같은 응답을 받았습니다. [18:18:32] Requiring external module babel-register fs.js:27 const { Math, Object, Reflect } = primordials; ^ ReferenceError: primordials is not defined gulp sass-watch 전에 이것을 시도했습니다. npm -g install gulp-cli 답변 같은 오류가 발생했습니다. Node.js 12와 Gulp.js 3을 사..

CSS 선택기 중 "+"(더하기 기호)가 의미하는 것

질문 : "+"(더하기 기호) CSS 선택기는 무엇을 의미합니까? 예를 들면 : p + p { /* Some declarations */ } + 가 무엇을 의미하는지 모르겠습니다. + p 없이 p 대한 스타일을 정의하는 것의 차이점은 무엇입니까? 답변 W3.org에서 인접한 선택자를 참조하십시오. 이 경우 선택기는 스타일이 다른 단락 바로 다음에 오는 단락에만 적용됨을 의미합니다. 일반 p 선택기는 페이지의 모든 단락에 스타일을 적용합니다. 이것은 IE7 이상에서만 작동합니다. IE6에서는 스타일이 어떤 요소에도 적용되지 않습니다. 그건 > 결합 자에도 적용됩니다. Internet Explorer의 CSS 호환성에 대한 Microsoft의 개요를 참조하십시오. 출처 : https://stackoverfl..

Node.js 모범 사례 예외 처리

질문 : Node.js 모범 사례 예외 처리 며칠 전에 node.js를 사용해보기 시작했습니다. 내 프로그램에서 처리되지 않은 예외가있을 때마다 노드가 종료된다는 것을 깨달았습니다. 이것은 처리되지 않은 예외가 발생하고 컨테이너가 여전히 요청을받을 수있을 때 작업자 스레드 만 죽는 일반적인 서버 컨테이너와 다릅니다. 이것은 몇 가지 질문을 제기합니다. process.on('uncaughtException') 를 방지하는 유일한 효과적인 방법입니까? process.on('uncaughtException') 은 비동기 프로세스 실행 중에도 처리되지 않은 예외를 포착합니까? 잡히지 않은 예외의 경우에 활용할 수있는 이미 빌드 된 모듈 (예 : 이메일 보내기 또는 파일 쓰기)이 있습니까? node.js에서 잡히..

CSS calc () 함수의 Sass 변수

질문 : CSS calc () 함수의 Sass 변수 calc() 함수를 사용하려고하는데 몇 가지 문제가 있습니다. 내 코드는 다음과 같습니다. $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) body_padding 변수 대신 50px 를 사용하면 원하는 것을 정확히 얻습니다. 그러나 변수로 전환하면 다음이 출력됩니다. body { padding-top: 50px; height: calc(100% - $body_padding); } calc 함수 내에서 변수를 대체해야한다는 것을 Sass가 인식하도록하려면 어떻게해야합니까? 답변 보간 : body height: calc(100% - #{$body_pa..

요소 전용 CSS 스타일 재설정 / 제거

질문 : 요소 전용 CSS 스타일 재설정 / 제거 나는 이것이 이전에 언급 / 질문 했음에 틀림 없다고 확신하지만, 운이없는 시대를 찾고 있었다. 내 용어가 틀 렸음에 틀림 없다! 특정 요소에 대해 이전에 스타일 시트에 설정된 모든 스타일을 제거 할 수있는 CSS 규칙이 있다는 것을 제안한 얼마 전에 본 트윗을 막연하게 기억합니다. 좋은 사용 예는 작은 화면보기의 특정 요소에 사용되는 스타일의 대부분이 데스크톱보기의 동일한 요소에 대해 '재설정'또는 제거가 필요한 모바일 우선 RWD 사이트 일 수 있습니다. 다음과 같은 것을 달성 할 수있는 CSS 규칙 : .element { all: none; } 사용 예 : /* mobile first */ .element { margin: 0 10; transfor..

정적 HTML 페이지에 파비콘 추가 하는 방법

질문 : 정적 HTML 페이지에 파비콘 추가 서버가 다운 될 때 표시되는 순수한 HTML 인 정적 페이지가 몇 개 있습니다. 내가 만든 파비콘 (16x16px이고 HTML 파일과 동일한 디렉토리에 있습니다. favicon.ico라고 함)을 "탭"아이콘으로 어떻게 넣을 수 있습니까? Wikipedia를 읽고 몇 가지 자습서를 살펴보고 다음을 구현했습니다. 그러나 여전히 작동하고 싶지 않습니다. Chrome을 사용하여 사이트를 테스트하고 있습니다. Wikipedia에 따르면 .ico는 모든 브라우저 유형에서 실행되는 최고의 그림 형식입니다. 코드가 확인했지만 서버가 사이트를 제공하기 시작하면 제대로 작동한다는 것을 확인했지만 로컬에서 작동하도록 만들 수 없습니다. 서버로 밀어 넣고 캐시를 새로 고치면 제대로..

Moment.js를 날짜 객체로 변환

질문 : Moment.js를 날짜 객체로 변환 Moment.js를 사용하여 올바른 순간 객체를 시간대가있는 날짜 객체로 변환 할 수 없습니다. 정확한 날짜를 알 수 없습니다. 예: var oldDate = new Date(), momentObj = moment(oldDate).tz("MST7MDT"), newDate = momentObj.toDate(); console.log("start date " + oldDate) console.log("Format from moment with offset " + momentObj.format()) console.log("Format from moment without offset " + momentObj.utc().format()) console.log("(Da..

파일 및 관련 데이터를 가급적 JSON으로 RESTful 웹 서비스에 게시

질문 : 파일 및 관련 데이터를 가급적 JSON으로 RESTful 웹 서비스에 게시 이것은 아마도 어리석은 질문이 될 것이지만 나는 그날 밤을 보내고 있습니다. 응용 프로그램에서 RESTful API를 개발 중이며 클라이언트가 데이터를 JSON으로 보내길 원합니다. 이 애플리케이션의 일부에서는 클라이언트가 이미지에 대한 정보뿐만 아니라 파일 (일반적으로 이미지)을 업로드해야합니다. 단일 요청에서 이것이 어떻게 발생하는지 추적하는 데 어려움을 겪고 있습니다. 파일 데이터를 JSON 문자열로 Base64로 만들 수 있습니까? 서버에 2 개의 게시물을 수행해야합니까? 이를 위해 JSON을 사용하지 않아야합니까? 참고로 백엔드에서 Grails를 사용하고 있으며 이러한 서비스는 차이가있는 경우 기본 모바일 클라이..

Node 또는 Express를 사용하여 JSON을 반환하는 올바른 방법

질문 : Node 또는 Express를 사용하여 JSON을 반환하는 올바른 방법 따라서 다음 JSON 객체를 가져올 수 있습니다. $ curl -i -X GET http://echo.jsontest.com/key/value/anotherKey/anotherValue HTTP/1.1 200 OK Access-Control-Allow-Origin: * Content-Type: application/json; charset=ISO-8859-1 Date: Wed, 30 Oct 2013 22:19:10 GMT Server: Google Frontend Cache-Control: private Alternate-Protocol: 80:quic,80:quic Transfer-Encoding: chunked { "an..

.css () 함수로 추가 된 스타일을 제거하는 방법

질문 : .css () 함수로 추가 된 스타일을 제거하려면 어떻게해야합니까? jQuery로 CSS 를 변경하고 있으며 입력 값에 따라 추가하는 스타일을 제거하고 싶습니다. if(color != '000000') $("body").css("background-color", color); else // remove style ? 어떻게 할 수 있습니까? 위의 선은 색상 선택기를 사용하여 색상을 선택할 때마다 (즉, 마우스가 색상환 위로 이동할 때) 실행됩니다. 두 번째 참고 : CSS 파일에서 기본 스타일을 제거하므로 css("background-color", "none") 이 작업을 수행 할 수 없습니다. jQuery 에 의해 추가 된 background-color 인라인 스타일을 제거하고 싶습니다. 답변..

JSON 또는 부분 HTML을 반환하는 ASP.NET MVC 컨트롤러 작업

ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ 질문 : JSON 또는 부분 HTML을 반환하는 ASP.NET MVC 컨트롤러 작업 매개 변수에 따라 JSON 또는 부분 html을 반환하는 컨트롤러 작업을 만들려고합니다. 결과를 비동기 적으로 MVC 페이지에 반환하는 가장 좋은 방법은 무엇입니까? 답변 작업 메서드에서 Json (object)를 반환하여 페이지에 JSON을 반환합니다. public ActionResult SomeActionMethod() { return Json(new {foo="bar", baz="Blech"}); } 그런 다음 Ajax를 사용하여 액션 메소드를 호출하십시오. 다음과 같은 ViewPage의 도우미 메서드 중 하나를 사용할 수 있습니다. SomeMethod는 반환 된 Jso..

JavaScript에서 객체를 딥 복제하는 가장 효율적인 방법

질문 : JavaScript에서 객체를 딥 복제하는 가장 효율적인 방법은 무엇입니까? JavaScript 객체를 복제하는 가장 효율적인 방법은 무엇입니까? 나는 obj = eval(uneval(o)); 사용 중이지만 표준이 아니며 Firefox에서만 지원됩니다 . obj = JSON.parse(JSON.stringify(o)); 같은 일을했습니다. 그러나 효율성에 의문을 제기하십시오. 또한 다양한 결함이있는 재귀 복사 기능을 보았습니다. 정식 솔루션이 없다는 것에 놀랐습니다. 답변 이를 "구조적 복제"라고하며 Node 11 이상에서 실험적으로 작동하며 브라우저에 탑재되기를 바랍니다. 자세한 내용은 이 답변 을 참조하십시오. Date , functions, undefined , Infinity , RegE..

JavaScript에서 정의되지 않은 변수 또는 null 변수를 확인하는 방법

질문 : JavaScript에서 정의되지 않은 변수 또는 null 변수를 확인하는 방법은 무엇입니까? 우리는 JavaScript 코드에서 다음 코드 패턴을 자주 사용합니다. if (typeof(some_variable) != 'undefined' && some_variable != null) { // Do something with some_variable } 동일한 효과를 갖는 덜 장황한 검사 방법이 있습니까? 일부 포럼과 문헌에 따르면 단순히 다음과 같은 효과가 있어야한다고 말합니다. if (some_variable) { // Do something with some_variable } 불행히도 Firebug some_variable 이 정의되지 않은 경우 런타임에서 오류와 같은 문을 평가하지만 첫 ..

JavaScript 자주 쓰는 정규식 모음 (아이디, 이메일, 비밀번호, 전화번호,...)

자바 스크립트에서 자주 쓰는 정규식을 모아왔습니다. 일치할 시 true를 반환 합니다 이메일 체크 정규식 function isEmail(asValue) { var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; return regExp.test(asValue); } ​ 비밀번호 체크 정규식 8 ~ 16자 영문, 숫자 조합 function isPassword(asValue) { var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,16}$/; return regExp.test(asValue); } ​ 비밀번호 체크 (특수문자 포함) 8 ~ 16자 ..

express.js에서 HTTPS 활성화

질문 : express.js에서 HTTPS 활성화노드 용 express.js에서 HTTPS를 사용하려고하는데 알아낼 수 없습니다.이것은 내 app.js 코드입니다.var express = require('express'); var fs = require('fs'); var privateKey = fs.readFileSync('sslcert/server.key'); var certificate = fs.readFileSync('sslcert/server.crt'); var credentials = {key: privateKey, cert: certificate}; var app = express.createServer(credentials); app.get('/', function(req,res) { re..

HTML 양식에서 자동 완성을 비활성화하는 W3C 유효한 방법

질문 : HTML 양식에서 자동 완성을 비활성화하는 W3C 유효한 방법이 있습니까? xhtml1-transitional.dtd doctype을 사용하는 경우 다음 HTML로 신용 카드 번호 수집 W3C 유효성 검사기에 경고를 표시합니다. "autocomplete"속성이 없습니다. 양식의 민감한 필드에서 브라우저 자동 완성을 비활성화하는 W3C / 표준 방법이 있습니까? 답변 다음 은 자동 완성을 형성하기위한 문제 (및 솔루션)를 설명하는 MDC의 좋은 기사입니다. 마이크로 소프트도 여기 에 비슷한 내용을 게시했습니다. 솔직히 말해서 이것이 사용자에게 중요한 일이라면 이런 방식으로 표준을 '깨는'것이 적절 해 보입니다. 예를 들어 Amazon은 'autocomplete'속성을 꽤 많이 사용하며 잘 작동하는..

iframe에 CSS를 적용하는 방법

질문 : iframe에 CSS를 적용하는 방법은 무엇입니까? RSS 링크를 표시하기위한 iframe 섹션이있는 간단한 페이지가 있습니다. 메인 페이지에서 iframe에 표시된 페이지에 동일한 CSS 형식을 적용하려면 어떻게해야합니까? 답변 편집 : 적절한 CORS 헤더 가 설정되어 있지 않으면 도메인 간 작동하지 않습니다. 여기에는 iframe 블록의 스타일과 iframe에 포함 된 페이지의 스타일이라는 두 가지가 있습니다. 일반적인 방법으로 iframe 블록의 스타일을 설정할 수 있습니다. iframe에 삽입 된 페이지의 스타일은 하위 페이지에 포함하여 설정해야합니다. 또는 Javascript를 사용하여 상위 페이지에서로드 할 수 있습니다. var cssLink = document.createEleme..

Ruby on Rails에서 JSON 출력을 "예쁘게" 형식화하는 방법

질문 : Ruby on Rails에서 JSON 출력을 "예쁘게" 형식화하는 방법 Ruby on Rails의 JSON 출력이 "예쁘거나"멋지게 형식화되기를 바랍니다. 지금은 to_json 호출하고 JSON은 모두 한 줄에 있습니다. 때때로 이것은 JSON 출력 스트림에 문제가 있는지 확인하기 어려울 수 있습니다. 내 JSON을 "예쁘게"또는 Rails에서 멋지게 형식화하도록 구성하는 방법이 있습니까? 답변 이후 버전의 JSON에 내장 된 pretty_generate() 함수를 사용하십시오. 예를 들면 : require 'json' my_object = { :array => [1, 2, 3, { :sample => "hash"} ], :foo => "bar" } puts JSON.pretty_generate..

CSS 표시 : inline 과 inline-block의 차이점

질문 : CSS 표시 : inline vs inline-block CSS에서 display inline 및 inline-block 값을 가질 수 있습니다. inline 과 inline-block 의 차이점을 자세히 설명 할 수 있습니까? 나는 가장 상세한 설명은 나에게 말한다, 어디서나 검색 inline-block 으로 배치 inline 동작합니다 같은,하지만 block . 그러나 정확히 "블록처럼 동작"이 무엇을 의미하는지 설명하지 않습니다. 특별한 기능이 있나요? 예가 더 나은 대답이 될 것입니다. 감사. 답변 인라인 요소 : 블록 요소 : 인라인 블록 요소 : W3Schools에서 : 인라인 요소는 앞뒤에 줄 바꿈이 없으며 옆에있는 HTML 요소를 허용합니다. 블록 요소는 위와 아래에 약간의 공백이..

여러 속성을 가진 CSS 전환 속기?

질문 : 여러 속성을 가진 CSS 전환 속기? 여러 속성이 있는 CSS 전환 속기 의 올바른 구문을 찾을 수없는 것 같습니다. 이것은 아무것도하지 않습니다. .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { height: 200px; opacity: 1; } 자바 스크립트로 쇼 클래스를 추가합니다. 요소가 더 높아지고 표..

728x90
반응형