코딩하다 현타올 때

질문 : CSS를 사용하여 체크 박스 스타일을 지정하는 방법 다음을 사용하여 확인란의 스타일을 지정하려고합니다. 그러나 스타일은 적용되지 않습니다. 확인란은 여전히 기본 스타일을 표시합니다. 지정된 스타일을 어떻게 부여합니까? 답변 최신 정보: 아래 답변은 CSS 3이 널리 사용되기 전 상황을 참조합니다. 최신 브라우저 (Internet Explorer 9 이상 포함)에서는 JavaScript를 사용하지 않고 원하는 스타일로 확인란 대체를 만드는 것이 더 간단합니다. 다음은 몇 가지 유용한 링크입니다. CSS만으로 사용자 지정 양식 확인란 만들기 쉬운 CSS 체크 박스 생성기 체크 박스 해킹으로 할 수있는 일 CSS3로 사용자 정의 체크 박스 및 라디오 버튼 구현 CSS로 체크 박스 스타일을 지정하는 방..

질문 : ReactJS 컴포넌트에 여러 클래스를 추가하는 방법은 무엇입니까? 저는 ReactJS와 JSX를 처음 접했고 아래 코드에 약간의 문제가 있습니다. li className 속성에 여러 클래스를 추가하려고합니다. 내 React 구성 요소는 다음과 같습니다. var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ { name: "My Account", ico..

질문 : 동일한 요소에서 배경 이미지와 CSS3 그라디언트를 결합하려면 어떻게해야합니까? background-color CSS3 그라디언트를 사용한 다음 background-image 를 적용하여 일종의 밝고 투명한 텍스처를 적용하려면 어떻게해야합니까? 답변 여러 배경! body { background: #eb01a5; background-image: url("IMAGE_URL"); /* fallback */ background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */ } 이 두 줄은 그래디언트를 수행하지 않는 모든 브라우저를 대체합니다. 아래의 IE

질문 : CSS를 사용하여 텍스트를 세로 중앙에 어떻게 배치합니까? 나는이 텍스트가 포함 된 요소를 나는 이것의 내용을 정렬 할 수직 센터. 스타일은 다음과 같습니다. #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #FFF; text-align: center; } Lorem ipsum dolor sit 이 목표를 달성하는 가장 좋은 방법은 무엇입니까? 답변 이 기본 접근 방식을 시도 할 수 있습니다. div { height: 100px; line-height: 100px; text-align: center; border: 2px dashed #f69c55; } Hello World! 단 한 줄의 텍스트에서만 작동..

질문 : background-color : none 유효한 CSS입니까? 다음 CSS가 유효한지 누구든지 말해 줄 수 있습니까? .class { background-color:none; } 답변 당신은 아마 원하는 transparent 으로 none 유효하지 않습니다 background-color 값입니다. CSS 2.1 사양 background-color 속성에 대해 다음과 같이 설명합니다. Value: | transparent | inherit 는 키워드 또는 색상의 숫자 표현 일 수 있습니다. 유효한 color 키워드 는 다음과 같습니다. 아쿠아, 블랙, 블루, 퓨샤, 그레이, 그린, 라임, 적갈색, 네이비, 올리브, 오렌지, 퍼플, 레드, 실버, 틸, 화이트, 옐로우 transparent 및 in..

질문 : CSS overflow-x : 보이는; 및 overflow-y : 숨김; 스크롤바 문제 발생 스타일과 마크 업이 있다고 가정합니다. ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; } 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 이것을 볼 때. 은 오버플로 x / y에 대해 보이는 값과 숨겨진 값을 지정 했음에도 맨 아래에 스크롤 막대가 있습니다. (Chrome 11 및 오페라에서 관찰 (?)) 나는 w3c ..

질문 : CSS만 있는 드롭다운을 스타일링 하는 방법 드롭 다운 스타일을 지정하는 CSS 전용 방법이 있습니까? JavaScript없이 가능한 한 인간적으로 양식의 스타일을 지정해야합니다. CSS에서 그렇게하기 위해 사용할 수있는 속성은 무엇입니까? 이 코드는 모든 주요 브라우저와 호환되어야합니다. Internet Explorer 6, 7, 8 Firefox 원정 여행 JavaScript : Example으로 만들 수 있다는 것을 알고 있습니다. 그리고 저는 단순한 스타일링에 대해 말하는 것이 아닙니다. CSS만으로 할 수있는 최선의 방법을 알고 싶습니다. Stack Overflow 에서 비슷한 질문 을 찾았습니다. 그리고 이것은 Doctype.com에 있습니다. 답변 다음은 세 가지 솔루션입니다. 솔루..

질문 : 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..

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

질문 : 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 에 상..

질문 : 높이 전환 방법 : 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 불투명도는 텍스트가 아닌 배경색에만 적용됩니까? 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의 배경을 늘리거나 확장하는 방법이 있습니까? 답변 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..

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

질문 : 요소를 수평 중앙에 배치하는 방법 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..

질문 : 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:..

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

질문 : 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 가져옵니다. 자세한 내용은 이 답변 을 참조하..

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

질문 : 배경 이미지에 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 바로 아래에서 배경이 아닌 전체 페이지의 스타일을 지정합니다. 이미지 만 ..

질문 : 너비가 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..

질문 : jQuery를 사용하여 클립 보드에 복사 버튼 클릭 div 내부의 텍스트를 클립 보드에 복사하려면 어떻게해야합니까? div가 있고 클립 보드에 텍스트를 추가 할 링크를 추가해야합니다. 이에 대한 해결책이 있습니까? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s copy Text 텍스트 복사를 클릭 한 다음 Ctrl + V를 누르면 붙여 넣어야합니다. 답변 2016 년 수정 2016 년부터는 대부분의 브라우저에서 선택 항목에서 작동 document.execCommand("co..

질문 : jQuery를 사용하여 CSS 표시 없음 또는 차단 속성을 어떻게 변경할 수 있습니까? jQuery를 사용하여 CSS 표시 없음 또는 차단 속성을 어떻게 변경할 수 있습니까? 답변 이를 수행하는 올바른 방법은 show 및 hide 를 사용하는 것입니다. $('#id').hide(); $('#id').show(); 다른 방법은 jQuery css 메서드를 사용하는 것입니다. $("#id").css("display", "none"); $("#id").css("display", "block"); 출처 : https://stackoverflow.com/questions/3582619/how-can-i-change-css-display-none-or-block-property-using-jquery

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