코딩하다 현타올 때

질문 : 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! 단 한 줄의 텍스트에서만 작동..

질문 : jQuery document.createElement에 해당합니까? 나는 오래된 JavaScript 코드를 리팩토링하고 있으며 많은 DOM 조작이 진행되고 있습니다. var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t); jQuery를 사용하여 더 나은 방법이 있는지 알고 싶습니다. 나는 다음과 같은 실험을 해왔다. var odv = $.create("div"); $.append(odv); // And m..

질문 : 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에 있습니다. 답변 다음은 세 가지 솔루션입니다. 솔루..

질문 : jQuery의 $ .ready ()와 동등한 순수 JavaScript-페이지 / DOM이 준비되었을 때 함수를 호출하는 방법 jQuery로 우리 모두는 멋진 .ready() 함수를 알고 있습니다. $('document').ready(function(){}); 그러나 라이브러리를 지원하지 않는 표준 JavaScript로 작성된 함수를 실행하고 페이지가 처리 할 준비가되는 즉시 함수를 시작하고 싶다고 가정 해 보겠습니다. 이에 접근하는 적절한 방법은 무엇입니까? 나는 내가 할 수 있다는 것을 안다. window.onload="myFunction()"; body 태그를 사용할 수 있습니다. 또는 모든 작업 후에 페이지 하단에서 시도 할 수도 있지만 끝 body 또는 html 태그는 다음과 같습니다. ..

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

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

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

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

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

질문 : HTML5 Canvas vs. SVG vs. div 즉석에서 요소를 만들고 이동할 수있는 가장 좋은 방법은 무엇입니까? 예를 들어 직사각형, 원 및 다각형을 만든 다음 해당 개체를 선택하고 이동하려고한다고 가정 해 보겠습니다. HTML5가이를 가능하게하는 세 가지 요소 인svg , canvas 및 div를 제공한다는 것을 알고 있습니다. 내가하고 싶은 일 중 어떤 요소가 최고의 성능을 제공할까요? 이러한 접근 방식을 비교하기 위해 각각 머리글, 바닥 글, 위젯 및 텍스트 콘텐츠가 포함 된 시각적으로 동일한 웹 페이지 3 개를 만들려고했습니다. 첫 번째 페이지의 위젯은 전체적으로 canvas 요소로, 두 번째는 전체적으로 svg 요소로, 세 번째는 일반 div 요소 인 HTML 및 CSS로 만들어..

질문 : HTML5에 부동 입력 유형이 있습니까? html5.org 에 따르면 "숫자"입력 유형의 "값 속성이 지정되고 비어 있지 않은 경우 유효한 부동 소수점 숫자 인 값을 가져야합니다." 그러나 이것은 단순히 (최신 버전의 Chrome에서) 부동이 아닌 정수를 사용하는 "업다운"컨트롤입니다. HTML5 고유의 부동 소수점 입력 요소가 있습니까? 아니면 숫자 입력 유형이 정수가 아닌 부동 소수점과 함께 작동하도록 만드는 방법이 있습니까? 아니면 jQuery UI 플러그인을 사용해야합니까? 답변 number 유형에는 max 및 min 과 함께)를 제어 step 값이 있으며 기본값은 1 입니다. 이 값은 스테퍼 버튼 구현에서도 사용됩니다 (예 : 위로 누르면 step 증가). 이 값을 적절한 값으로 변경하..

질문 : HTML "no-js"클래스의 목적은 무엇입니까? 많은 템플릿 엔진, HTML5 Boilerplate , 다양한 프레임 워크 및 일반 PHP 사이트 태그에 no-js 클래스가 있음을 알았습니다. 왜 이렇게 되나요? 이 클래스에 반응하는 일종의 기본 브라우저 동작이 있습니까? 왜 항상 포함합니까? "no-js"케이스가없고 html을 직접 처리 할 수 있다면 클래스 자체를 쓸모 없게 만들지 않습니까? 다음은 HTML5 Boilerplate index.html의 예입니다. 보시다시피 요소에는 항상이 클래스가 있습니다. 누군가 이것이 왜 그렇게 자주 수행되는지 설명 할 수 있습니까? 답변 Modernizr가 실행되면 "no-js"클래스를 제거하고 "js"로 대체합니다. 이것은 Javascript 지원이..

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

질문 : HTML Canvas를 gif / jpg / png / pdf로 캡처 하시겠습니까? HTML 캔버스에 표시된 내용을 이미지 또는 PDF로 캡처하거나 인쇄 할 수 있습니까? 캔버스를 통해 이미지를 생성하고 해당 이미지에서 png를 생성하고 싶습니다. 답변 죄송합니다. 원래 답변은 유사한 질문에 한정되었습니다. 다음과 같이 수정되었습니다. var canvas = document.getElementById("mycanvas"); var img = canvas.toDataURL("image/png"); IMG의 값을 사용하여 다음과 같이 새 이미지로 작성할 수 있습니다. document.write(''); 출처 : https://stackoverflow.com/questions/923885/captur..

질문 : HTML 태그의 차이점은 무엇입니까 그리고 ? 및 의 사용을 보여주는 간단한 예제를 요청하고 싶습니다. id 또는 class 로 표시하는 데 사용되는 것을 보았지만 하나가 다른 것보다 선호되는 경우가 있는지 알고 싶습니다. 답변 div 는 블록 요소입니다. span 은 인라인 요소 입니다. 즉, 의미 론적으로 사용하려면 div를 사용하여 문서의 섹션을 래핑해야하고 스팬은 텍스트, 이미지 등의 작은 부분을 래핑하는 데 사용해야합니다. This a large main division, with a small bit of spanned text! Some text that I want to mark up ... 불법입니다. 편집 : HTML5부터 일부 블록 요소는 일부 인라인 요소 내부에 배치 될 수..

질문 : HTML 페이지에서 스크롤 막대 숨기기 CSS를 사용하여 스크롤 막대를 숨길 수 있습니까? 어떻게 하시겠습니까? 답변 오버플로 설정 overflow: hidden; 다음과 같이 본문 태그에 : 위의 코드는 가로 및 세로 스크롤바를 모두 숨 깁니다. 수직 스크롤바 만 숨기려면 overflow-y . 수평 스크롤바 만 숨기려면 overflow-x . 참고 : 스크롤 기능도 비활성화됩니다. 스크롤바는 숨기고 스크롤 기능은 숨기고 싶은 경우 아래 답변을 참조하세요. 출처 : https://stackoverflow.com/questions/3296644/hiding-the-scroll-bar-on-an-html-page

질문 : 이미지 또는 범위 태그를 사용하지 않고 CSS를 통해 UL / LI html 목록에서 글 머리 기호 색상을 설정하는 방법 항목이있는 단순한 정렬되지 않은 목록을 상상해보십시오. list-style:square; 를 통해 정사각형 모양으로 정의했습니다. 항목의 색상을 색상으로 설정하면 color: #F00; 그러면 모든 것이 빨갛게됩니다! 정사각형 글 머리 기호의 색상 만 설정하고 싶습니다. CSS에서 글 머리 기호의 색상을 정의 하는 우아한 방법 이 있습니까? HTML Item 1 Item 2 Item 3 CSS li{ list-style:square; } 답변 이를 수행하는 가장 일반적인 방법은 다음과 같은 방법입니다. ul { list-style: none; padding: 0; margin..

질문 : 필요하지 않은 경우 CSS 숨기기 스크롤 막대 overflow-y:scroll; 숨길 수있는 방법을 알아 내려고 노력하고 있습니다; 필요하지 않은 경우. 내 말은 내가 웹 사이트를 만들고 있고 게시물이 표시되는 주요 영역이 있으며 콘텐츠가 현재 너비를 초과하지 않으면 스크롤 막대를 숨기고 싶다는 것입니다. 또한 두 번째 질문입니다. 게시물이 현재 너비를 초과하면 너비가 자동으로 증가하고 내용이 상자에서 나오지 않도록 만들고 싶습니다. 누구든지 이것을하는 방법에 대한 단서가 있습니까? 게시물 영역 : .content { height: 600px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; font-size:..

질문 : A4 용지 크기 페이지에서 HTML 페이지를 만드는 방법은 무엇입니까? 예를 들어 HTML 페이지가 MS Word의 A4 크기 페이지처럼 동작하도록 할 수 있습니까? 기본적으로 브라우저에 HTML 페이지를 표시하고 A4 크기 페이지의 크기로 내용을 설명 할 수 있기를 원합니다. 단순함을 위해 HTML 페이지에는 텍스트 (이미지 등 없음) 만 포함되고 태그는 포함되지 않는다고 가정합니다. 또한 HTML 페이지를 인쇄하면 A4 크기의 종이 페이지로 나옵니다. 답변 오래 전 2005 년 11 월 AlistApart.com은 HTML과 CSS 만 사용하여 책을 출판 한 방법에 대한 기사를 게시했습니다. 참조 : http://alistapart.com/article/boom 다음은 그 기사의 일부입니다...

질문 : 문자의 절반에 CSS를 적용 할 수 있습니까? 내가 찾고있는 것 : 캐릭터의 절반 을 스타일링하는 방법입니다. (이 경우 반은 투명) 내가 현재 검색하고 시도한 것 (행운 없음) : 문자 / 문자의 절반을 스타일링하는 방법 CSS 또는 JavaScript로 캐릭터의 일부 스타일링 캐릭터의 50 %에 CSS 적용 아래는 제가 얻고 자하는 것의 예입니다. 이를 위해 CSS 또는 JavaScript 솔루션이 존재합니까, 아니면 이미지에 의지해야합니까? 이 텍스트는 동적으로 생성되므로 이미지 경로를 사용하지 않는 것이 좋습니다. 최신 정보: 많은 사람들이 캐릭터의 절반을 스타일링하고 싶은 이유를 물었 기 때문에 이것이 이유입니다. 우리시는 최근 새로운 "브랜드"를 정의하는 데 25 만 달러를 지출했습니..

질문 : jQuery를 사용하여 HTML 요소를 만드는 가장 효율적인 방법은 무엇입니까? 최근에 저는 많은 모달 창 팝업을 수행하고 있으며 jQuery를 사용했습니다. 페이지에 새 요소를 만드는 데 사용한 방법은 압도적으로 다음과 같습니다. $(""); 그러나 이것이 최선이거나 가장 효율적인 방법이 아니라는 느낌을 받고 있습니다. 성능 관점에서 jQuery에서 요소를 만드는 가장 좋은 방법은 무엇입니까? 이 답변 에는 아래 제안에 대한 벤치 마크가 있습니다. 답변 나는 $(document.createElement('div')); 벤치마킹은 이 기술이 가장 빠르다는 것을 보여줍니다. 나는 이것이 jQuery가 그것을 요소로 식별하고 요소 자체를 만들 필요가 없기 때문이라고 추측합니다. 실제로 다른 자바 스..