코딩하다 현타올 때

질문 : 요소에 JavaScript의 클래스가 포함되어 있는지 확인하십시오. jQuery가 아닌 일반 JavaScript를 사용하여 요소에 클래스 가 포함되어 있는지 확인할 수있는 방법이 있습니까? 현재 나는 이것을하고있다 : var test = document.getElementById("test"); var testClass = test.className; switch (testClass) { case "class1": test.innerHTML = "I have class1"; break; case "class2": test.innerHTML = "I have class2"; break; case "class3": test.innerHTML = "I have class3"; break; case "..

질문 : 자바 스크립트 (또는 jQuery)를 사용하여 :: before 및 :: after와 같은 CSS 의사 요소 선택 및 조작 ::before 및 ::after (및 하나의 세미콜론이있는 이전 버전)과 같은 CSS 의사 요소를 선택 / 조작하는 방법이 있습니까? 예를 들어 내 스타일 시트에는 다음 규칙이 있습니다. .span::after{ content:'foo' } 바닐라 JS 또는 jQuery를 사용하여 'foo'를 'bar'로 어떻게 변경할 수 있습니까? 답변 데이터 속성이있는 의사 요소에 콘텐츠를 전달한 다음 jQuery를 사용하여이를 조작 할 수도 있습니다. HTML에서 : foo jQuery에서 : $('span').hover(function(){ $(this).attr('data-con..

질문 : 스크롤 막대를 숨기지 만 여전히 스크롤 할 수 있음 스크롤바를 표시하지 않고 전체 페이지를 스크롤 할 수 있기를 원합니다. Google 크롬에서는 다음과 같습니다. ::-webkit-scrollbar { display: none; } 그러나 Mozilla Firefox와 Internet Explorer는 그렇게 작동하지 않는 것 같습니다. 나는 또한 이것을 CSS에서 시도했다. overflow: hidden; 그러면 스크롤바가 숨겨 지지만 더 이상 스크롤 할 수 없습니다. 전체 페이지를 스크롤 할 수있는 동안 스크롤바를 제거 할 수있는 방법이 있습니까? CSS 또는 HTML 만 사용하십시오. 답변 잘 작동하는 테스트입니다. #parent{ width: 100%; height: 100%; over..

질문 : align-content와 align-items의 차이점은 무엇입니까? align-items 와 align-content 의 차이점을 보여줄 수 있습니까? 답변 flex-box의 align-items justify-content 가 주 축을 따라하는 것처럼 교차 축을 따라 플렉스 컨테이너 내부의 항목을 정렬합니다. (기본 flex-direction: row 경우 교차 축은 수직에 해당하고 주 축은 수평에 해당합니다. flex-direction: column 하면이 두 개가 각각 교환됩니다.) align-items:center 모양의 예입니다. 그러나 align-content 는 여러 줄의 유연한 상자 용입니다. 항목이 한 줄에있는 경우에는 효과가 없습니다. 값에 따라 전체 구조를 정렬합니다. 다..

질문 : 본문 스크롤을 방지하지만 오버레이 스크롤은 허용 나는 이것을 허용하는 "lightbox"유형 해결책을 찾고 있었지만 아직 하나를 찾지 못했다 (아는 것이 있다면 제안하십시오). 제가 재현하려는 동작은 이미지를 클릭 할 때 Pinterest 에서 볼 수있는 것과 같습니다. 오버레이는 스크롤 가능하지만 ( 전체 오버레이가 페이지 상단의 페이지처럼 위로 이동하는 것처럼 ) 오버레이 뒤 의 본문은 고정되어 있습니다. CSS ( 즉, 전체 페이지 상단의 div overflow: hidden )로 만들려고했지만 div 가 스크롤되는 것을 막지는 않습니다. 본문 / 페이지가 스크롤되지 않도록하고 전체 화면 컨테이너 내에서 계속 스크롤하는 방법은 무엇입니까? 답변 이론 현재 pinterest 사이트 구현을 살..

질문 : 개요 반경? 어쨌든 border-radius 와 비슷한 div element 의 윤곽선 에 둥근 모서리 가 생깁니 까? 답변 지금은 오래된 질문이지만 비슷한 문제를 가진 사람과 관련이있을 수 있습니다. border 가있는 입력 필드가 있었고 초점 윤곽선의 색상을 변경하고 싶었습니다. 입력 컨트롤에 outline 을 길들일 수 없었습니다. 그래서 대신 box-shadow를 사용했습니다. 나는 실제로 그림자의 부드러운 모양을 선호했지만 둥근 윤곽선을 시뮬레이션하기 위해 그림자를 강화할 수 있습니다. input, input:focus { border: none; border-radius: 2pt; box-shadow: 0 0 0 1pt grey; outline: none; transition: .1s..

질문 : CSS가 항상 Javascript보다 우선해야합니까? 온라인의 수많은 곳에서 JavaScript 이전에 CSS를 포함하라는 권장 사항을 보았습니다. 그 이유는 일반적으로 다음 과 같은 형식입니다 . CSS와 자바 스크립트를 주문할 때 CSS가 먼저 나오기를 원합니다. 그 이유는 렌더링 스레드에 페이지를 렌더링하는 데 필요한 모든 스타일 정보가 있기 때문입니다. JavaScript 포함이 먼저 오는 경우 JavaScript 엔진은 다음 리소스 세트로 계속 진행하기 전에 모든 것을 구문 분석해야합니다. 이것은 렌더링 스레드가 필요한 모든 스타일을 가지고 있지 않기 때문에 페이지를 완전히 표시 할 수 없음을 의미합니다. 내 실제 테스트는 매우 다른 것을 보여줍니다. My test harness 다음 ..

질문 : 어떤 'clearfix'방법을 사용할 수 있습니까? 2 열 레이아웃을 래핑하는 div 의 오래된 문제가 있습니다. 내 사이드 바가 플로팅되어 컨테이너 div 가 콘텐츠와 사이드 바를 래핑하지 못합니다. Firefox에서 명확한 버그를 수정하는 방법은 여러 가지가 있습니다. overflow:auto overflow:hidden 제 상황에서 제대로 작동하는 유일한 솔루션입니다. overflow:auto 는 나에게 불쾌한 스크롤바를 제공하고 overflow:hidden 에는 반드시 부작용이 있어야합니다. 또한 IE7은 잘못된 동작으로 인해이 문제를 겪지 않아야하지만 내 상황에서는 Firefox와 동일하게 고통 받고 있습니다. 현재 사용 가능한 가장 강력한 방법은 무엇입니까? 답변 생성되는 디자인에 따..

질문 : clearfix 란 무엇입니까? 최근에 일부 웹 사이트의 코드를 살펴보고 모든 clearfix 클래스가 있음을 clearfix . 빠른 Google 검색 후 때때로 IE6 용이라는 것을 알게되었지만 실제로 clearfix는 무엇입니까? clearfix가없는 레이아웃과 비교하여 clearfix가있는 레이아웃의 몇 가지 예를 제공 할 수 있습니까? 답변 오늘날 레이아웃에 플로팅 요소를 사용하는 것이 더 나은 대안을 사용함에 따라 점점 더 낙담되고 있다는 점에 주목할 가치가 있습니다. display: inline-block -더 좋음 Flexbox- 최고 (그러나 제한된 브라우저 지원) Flexbox는 Firefox 18, Chrome 21, Opera 12.10, Internet Explorer 1..

질문 : 브라우저가 캐시 된 CSS 및 JavaScript 파일을 강제로 다시로드하도록하는 방법 일부 브라우저 (특히 Firefox 및 Opera )는 브라우저 세션 간에도 .css 및 .js 파일의 캐시 된 복사본을 사용하는 데 매우 열성적이라는 것을 알게되었습니다. 이로 인해 이러한 파일 중 하나를 업데이트 할 때 문제가 발생하지만 사용자의 브라우저는 캐시 된 사본을 계속 사용합니다. 파일이 변경되었을 때 사용자 브라우저가 파일을 다시로드하도록하는 가장 우아한 방법은 무엇입니까? 이상적으로이 솔루션은 페이지를 방문 할 때마다 브라우저가 파일을 다시로드하도록 강제하지 않습니다. John Millikin 과 da5id의 제안이 유용하다는 것을 알았습니다. 자동 버전 관리 라는 용어가 있습니다. 원래 솔루..

질문 : jQuery UI 대화 상자에서 닫기 버튼을 제거하는 방법은 무엇입니까? jQuery UI로 생성 된 대화 상자에서 닫기 버튼 (오른쪽 상단 모서리의 X) 을 제거하려면 어떻게해야합니까? 답변 나는 이것이 결국 작동한다는 것을 알았습니다 (버튼을 찾아서 숨기는 열기 기능을 재정의하는 세 번째 줄에 유의하십시오). $("#div2").dialog({ closeOnEscape: false, open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); } }); 모든 대화 상자에서 닫기 버튼을 숨기려면 다음 CSS도 사용할 수 있습니다. .ui-dialog-titlebar-close { visibility: hi..

질문 : jQuery는 요소의 렌더링 된 높이를 얻습니까? 요소의 렌더링 된 높이를 어떻게 얻습니까? 내부에 내용 요소가 있다고 가정 해 보겠습니다. 의 높이를 늘릴 것입니다. 높이를 명시 적으로 설정하지 않은 경우 "렌더링 된"높이를 어떻게 얻습니까? 분명히 나는 시도했다. var h = document.getElementById('someDiv').style.height; 이 작업을 수행하는 트릭이 있습니까? 도움이된다면 jQuery를 사용하고 있습니다. 답변 그것은 단지 $('#someDiv').height(); jQuery로. 래핑 된 집합의 첫 번째 항목 높이를 숫자로 검색합니다. 사용하려고 .style.height 처음에 속성을 설정 한 경우에만 작동합니다. 별로 유용하지 않습니다! 출처 : ..

질문 : AngularJS ngClass 조건부 ng-class 와 같은 것을 조건부로 표현하는 방법이 있습니까? 예를 들어, 다음을 시도했습니다. test 이 코드의 문제는 obj.value1 이 무엇이든 클래스 테스트가 항상 요소에 적용된다는 것입니다. 이렇게 : test obj.value2 가 진실 값과 같지 않으면의 클래스가 적용되지 않습니다. 이제 다음을 수행하여 첫 번째 예제의 문제를 해결할 수 있습니다. test checkValue1 함수는 다음과 같습니다. $scope.checkValue1 = function() { return $scope.obj.value === 'somevalue'; } ng-class 가 작동하는 방식인지 궁금합니다. 이와 비슷한 작업을 수행하려는 사용자 지정 지시문..

질문 : jQuery를 사용하여 DIV를 화면 중앙에 배치 jQuery를 사용하여 화면 중앙에 를 설정하려면 어떻게해야합니까? 답변 이 함수가 도움이되도록 jQuery에 함수를 추가하는 것을 좋아합니다. jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px"); this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) +..

질문 : React.js 인라인 스타일 모범 사례 다음과 같이 React 클래스 내에서 스타일을 지정할 수 있다는 것을 알고 있습니다. const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return Have a good and productive day! ; } }); 이 방식으로 모든 스타일을 지정해야하고 CSS 파일에 스타일이 전혀 지정되어 있지 않아야합니까? 아니면 인라인 스타일을 완전히 피해야합니까? 두 가지를 모두 수행하는 것은 이상하고 지저분 해 보입니다. 스타일을 조정할 때 두 곳을 확인해야합니다. 답변 아직 "모범 사례"가 많지 않습니다. React 컴포넌..

질문 : 페이지로드시 페이드 인 효과를 위해 CSS 사용 페이지로드시 텍스트 단락이 페이드 인되도록 CSS 전환을 사용할 수 있습니까? 나는 그것이 http://dotmailapp.com/ 에서 어떻게 보 였는지 정말 좋아하고 CSS를 사용하여 비슷한 효과를 사용하고 싶습니다. 이후 도메인을 구매했으며 더 이상 언급 된 효과가 없습니다. 보관 된 사본은 Wayback Machine에서 볼 수 있습니다. 일러스트레이션 이 마크 업 : ​This is a test 다음 CSS 규칙을 사용합니다. #test p { opacity: 0; margin-top: 25px; font-size: 21px; text-align: center; -webkit-transition: opacity 2s ease-in; -mo..

질문 : CSS 텍스트 오버플로 : 줄임표; 작동 안함? 이 간단한 CSS가 작동하지 않는 이유를 모르겠습니다. .app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #000; } Test Test Test Test Test Test 네 번째 "테스트"즈음에 끊어야합니다 답변 text-overflow:ellipsis; 다음이 참일 때만 작동합니다. 요소의 너비는 px (픽셀)로 제한되어야합니다. %..

질문 : CSS에서 셀 패딩 및 셀 간격을 설정 하시겠습니까? HTML 테이블에서 cellpadding 및 cellspacing 은 다음과 같이 설정할 수 있습니다. CSS를 사용하여 어떻게 똑같이 할 수 있습니까? 답변 기초 padding "을 제어하려면 표 셀에 패딩을 사용하면됩니다. 예 : 10px의 "cellpadding": td { padding: 10px; } "cellspacing"의 경우 border-spacing CSS 속성을 테이블에 적용 할 수 있습니다. 예 : 10px의 "cellspacing": table { border-spacing: 10px; border-collapse: separate; } 이 속성은 별도의 수평 및 수직 간격을 허용합니다. 구식 "셀 간격"으로는 할 수없..

질문 : CSS 글꼴 테두리? 모든 새로운 CSS3 테두리 항목 ( -webkit , ...)이 진행되면서 글꼴에 테두리를 추가 할 수 있습니까? (파란색 트위터 로고 주위의 단색 흰색 테두리처럼). 그렇지 않다면 CSS / XHTML에서이 작업을 수행 할 너무 못생긴 해킹이 있습니까? 아니면 여전히 Photoshop을 실행해야합니까? 답변 -webkit 접두사 뒤에 일부 브라우저 에서 지원되는 text-stroke 라는 실험적 CSS 속성이 있습니다. h1 { -webkit-text-stroke: 2px black; /* width and color */ font-family: sans; color: yellow; } Hello World text-shadow 속성을 사용하여 모든 방향에 1 픽셀 씩 ..

질문 : CSS Flexbox에서 "justify-items"및 "justify-self"속성이없는 이유는 무엇입니까? 플렉스 컨테이너의 주축과 교차 축을 고려하십시오. 출처 : W3C 주축을 따라 플렉스 항목을 정렬하려면 속성이 하나 있습니다. justify-content 교차 축을 따라 플렉스 항목을 정렬하려면 세 가지 속성이 있습니다. align-content align-items align-self 위 이미지에서 주축은 수평이고 교차 축은 수직입니다. 이것은 플렉스 컨테이너의 기본 방향입니다. flex-direction 속성과 쉽게 교환 할 수 있습니다. /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-..

질문 : 하나의 CSS 파일을 다른 파일에 포함 할 수 있습니까? 하나의 CSS 파일을 다른 파일에 포함 할 수 있습니까? 답변 예: @import url("base.css"); 노트 : @import 규칙은 다른 모든 규칙 보다 우선해야합니다 @charset 제외). 추가 @import 문에는 추가 서버 요청이 필요합니다. 또는 여러 HTTP 요청을 피하기 위해 모든 CSS를 하나의 파일로 연결합니다. 예를 들어, 콘텐츠의 복사 base.css 및 special.css 에 base-special.css 및 참고 용 base-special.css . 출처 : https://stackoverflow.com/questions/147500/is-it-possible-to-include-one-css-file-..

질문 : CSS를 사용하여 확인란 크기를 변경할 수 있습니까? 브라우저에서 CSS 또는 HTML을 사용하여 확인란의 크기를 설정할 수 있습니까? width 와 size 는 IE6 +에서 작동하지만 Firefox에서는 작동하지 않습니다. Firefox에서는 더 작은 크기를 설정해도 확인란이 16x16으로 유지됩니다. 답변 (확장으로 인해) 약간 못 생겼지 만 대부분의 최신 브라우저에서 작동합니다. input[type=checkbox] { /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ ..

질문 : CSS 폭발 관리 작업중인 웹 사이트에서 CSS에 크게 의존하고 있습니다. 지금은 모든 CSS 스타일이 태그별로 적용되고 있으므로 향후 변경에 도움이되도록 더 많은 외부 스타일로 옮기려고합니다. 그러나 이제 문제는 내가 "CSS 폭발"을 받고 있음을 알아 차렸다는 것입니다. CSS 파일 내에서 데이터를 가장 잘 구성하고 추상화하는 방법을 결정하는 것이 점점 어려워지고 있습니다. 나는 테이블 기반 웹 사이트에서 이동하여 웹 사이트 내에서 div 태그를 사용하고 있습니다. 그래서 다음과 같은 CSS 선택기를 많이 얻었습니다. div.title { background-color: blue; color: white; text-align: center; } div.footer { /* Styles Her..

질문 : CSS 클래스 이름 / 선택기에서 유효한 문자는 무엇입니까? CSS 클래스 선택기 내에서 허용되는 문자 / 기호는 무엇입니까? 다음 문자가 유효하지 않다는 것을 알고 있지만 어떤 문자가 유효 합니까? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` # 답변 CSS 문법 에서 직접 확인할 수 있습니다. 기본적으로 1 , 이름은 밑줄 ( _ ), 하이픈 ( - ) 또는 문자 ( a – z )로 시작하고 그 뒤에 하이픈, 밑줄, 문자 또는 숫자가 따라 와야합니다. 캐치가있다 : 첫 번째 문자는 하이픈 인 경우, 두 번째 문자 2는 문자 나 밑줄이어야하며, 이름이 긴 최소 2 자 이상이어야합니다. -?[_a-zA-Z]+[_a-zA-Z0-9-]* 간..

질문 : 특정 텍스트를 포함하는 요소에 대한 CSS 선택기가 있습니까? 다음 표에 대한 CSS 선택기를 찾고 있습니다. Peter | male | 34 Susanne | female | 12 "male"이 포함 된 모든 구축 전차와 일치하는 선택기가 있습니까? 답변 사양을 올바르게 읽으면 아니요. 요소, 요소의 속성 이름 및 요소의 명명 된 속성 값을 일치시킬 수 있습니다. 그래도 요소 내에서 일치하는 콘텐츠에 대해서는 아무것도 볼 수 없습니다. 출처 : https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text