코딩하다 현타올 때

질문 : 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로 div의 종횡비 유지 창의 너비가 변경됨에 따라 너비 / 높이를 변경할 수 div 를 만들고 싶습니다. 가로 세로 비율을 유지하면서 너비에 따라 높이를 변경할 수있는 CSS3 규칙이 있습니까? JavaScript를 통해이 작업을 수행 할 수 있다는 것을 알고 있지만 CSS 만 사용하는 것을 선호합니다. 답변 다음과 같이 padding-bottom 대한 백분율 값으로 래퍼 .demoWrapper { padding: 10px; background: white; box-sizing: border-box; resize: horizontal; border: 1px dashed; overflow: auto; max-width: 100%; height: calc(100vh - 16px); } div..

질문 : SCSS와 Sass의 차이점은 무엇입니까? 제가 읽은 내용에서 Sass는 변수 및 수학 지원을 통해 CSS를 더욱 강력하게 만드는 언어입니다. SCSS와의 차이점은 무엇입니까? 같은 언어 여야합니까? 비슷한? 다른? 답변 Sass는 구문이 향상된 CSS 전 처리기입니다. 고급 구문의 스타일 시트는 프로그램에 의해 처리되고 일반 CSS 스타일 시트로 바뀝니다. 그러나 CSS 표준 자체를 확장 하지는 않습니다. CSS 변수가 지원되며 사용할 수 있지만 전 처리기 변수뿐만 아니라 사용할 수 없습니다. SCSS와 Sass의 차이점에 대해 Sass 문서 페이지 의이 텍스트는 다음 질문에 답해야합니다. Sass에는 두 가지 구문이 있습니다. 첫 번째는 SCSS (Sassy CSS) 로 알려져 있으며이 참조..

질문 : 배경 이미지 데이터를 CSS에 Base64로 삽입하는 것이 좋거나 나쁜 습관입니까? greasemonkey 사용자 스크립트의 소스를보고 있었고 CSS에서 다음을 발견했습니다. .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} greasemonkey 스크립트는 서버에서 호스트하는 것과는 반대로 소스 내에서 할 수있는 모든 것을 번들로 ..

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

질문 : 패딩 / 여백이있는 CSS 100 % 높이 HTML / CSS를 사용하여 부모 요소의 100 % 인 너비 및 / 또는 높이를 가지면서도 적절한 패딩이나 여백이있는 요소를 어떻게 만들 수 있습니까? "적절한"이란 부모 요소의 높이 200px padding = 5px height = 100% 를 border = 5px 190px 높이의 요소가 부모 요소의 중앙에 위치해야한다는 것을 의미합니다. . 이제 표준 상자 모델이 작동해야한다고 지정하는 방식이 아니라는 것을 알고 있습니다 (정확히 이유를 알고 싶지만 ...). 따라서 분명한 대답은 작동하지 않습니다. #myDiv { width: 100% height: 100%; padding: 5px; } 그러나 임의의 크기의 부모에 대해이 효과를 안정적으로..

질문 : 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 만 달러를 지출했습니..

질문 : 클래스가있는 첫 번째 요소에 대한 CSS 선택기 클래스 이름이 red 인 여러 요소가 있지만 다음 CSS 규칙을 사용하여 class="red" 첫 번째 요소를 선택할 수없는 것 같습니다. .home .red:first-child { border: 1px solid red; } blah first second third fourth red 클래스를 가진 첫 번째 어린이를 대상으로하려면 어떻게 수정합니까? 답변 :first-child 작동 방식을 오해하는 가장 잘 알려진 사례 중 하나입니다. CSS2에 도입 된 :first-child 가상 클래스는 부모의 첫 번째 자식을 나타냅니다. 그게 다야. 나머지 복합 선택기에서 지정한 조건과 가장 먼저 일치하는 자식 요소를 선택한다는 매우 일반적인 오해가 있..

질문 : CSS를 사용하여 SVG 이미지의 색상을 변경하는 방법 (jQuery SVG 이미지 대체)? 이것은 내가 생각해 낸 편리한 코드 조각에 대한 자체 Q & A입니다. 현재 SVG 이미지를 삽입 한 다음 CSS를 통해 SVG 요소에 액세스하는 쉬운 방법은 없습니다. JS SVG 프레임 워크를 사용하는 방법에는 여러 가지가 있지만 롤오버 상태의 간단한 아이콘을 만드는 것이라면 지나치게 복잡합니다. 그래서 여기에 제가 생각해 낸 것이 있는데, 웹 사이트에서 SVG 파일을 사용하는 가장 쉬운 방법이라고 생각합니다. 초기 텍스트에서 이미지로의 대체 방법에서 개념을 가져 왔지만 내가 아는 한 SVG에 대해 수행 된 적이 없습니다. 이것이 질문입니다. 답변 먼저, HTML에서 IMG 태그를 사용하여 SVG 그..

질문 : 본문에 설정된 CSS3 그라데이션 배경이 늘어나지 않고 대신 반복됩니까? 안의 콘텐츠가 총 300px 높이라고 말하세요. -webkit-gradient 또는 -moz-linear-gradient 사용하여 의 배경을 설정하면 그런 다음 창을 최대화하거나 (또는 300px보다 크게 만듭니다) 그래디언트의 높이가 정확히 300px (콘텐츠 높이)가되고 나머지 창을 채우기 위해 반복합니다. 나는 이것이 webkit과 gecko에서 동일하기 때문에 이것이 버그가 아니라고 가정하고 있습니다. 그러나 반복하는 대신 창을 채우기 위해 그라디언트를 늘리는 방법이 있습니까? 답변 다음 CSS를 적용하십시오. html { height: 100%; } body { height: 100%; margin: 0; back..

질문 : 두 개의 클래스가있는 요소에 적용되는 CSS 선택기 두 개의 특정 클래스로 설정되는 클래스 속성의 값을 기반으로 CSS로 요소를 선택하는 방법이 있습니까? 예를 들어 3 개의 div가 있다고 가정 해 보겠습니다. Hello Foo Hello World Hello Bar foo 및 bar 클래스의 구성원이라는 사실을 기반으로 목록의 두 번째 요소 만 선택하려면 어떤 CSS를 작성할 수 있습니까? 답변 두 클래스 선택기를 연결합니다 (사이에 공백 없음). .foo.bar { /* Styles for element(s) with foo AND bar classes */ } IE6와 같은 고대 브라우저를 여전히 다루어야한다면, 연결된 클래스 선택기를 올바르게 읽지 않는다는 점에 유의하십시오. 나열한 다..

질문 : CSS를 사용하여 HTML5 입력의 자리 표시 자 색상 변경 Chrome은 input[type=text] 요소에 대한 자리 표시 자 속성 을 지원합니다 (다른 요소도 가능). 그러나 다음 CSS는 자리 표시 자의 값에 아무런 영향을주지 않습니다. input[placeholder], [placeholder], *[placeholder] { color: red !important; } 그러나 Value 는 여전히 red 대신 grey 유지됩니다. 자리 표시 자 텍스트의 색상을 변경하는 방법이 있습니까? 답변 세 가지 다른 구현이 있습니다 : 의사 요소, 의사 클래스 및 아무것도 없습니다. WebKit, Blink (Safari, Google Chrome, Opera 15+) 및 Microsoft E..

질문 : 특정 클래스 나 속성이없는 요소를 선택하는 CSS 선택기를 작성할 수 있습니까? 특정 클래스 가없는 모든 요소를 선택하는 CSS 선택기 규칙을 작성하고 싶습니다. 예를 들어, 다음 HTML이 주어지면 : Example Print me! This page is super interresting and you should print it! 나는 선택을 작성하려합니다 선택이이 경우, 탐색 및 요소의 "인쇄"클래스가없는 모든 요소. 이것이 가능한가? 참고 : 이것을 사용하려는 실제 HTML에는 "인쇄 가능"클래스가없는 요소가 훨씬 더 많이있을 것입니다 (위의 예에서 그 반대라는 것을 알고 있습니다). 답변 :not() 의사 클래스에 클래스 선택기를 추가합니다. :not(.printable) { /* S..

질문 : CSS3를 사용한 SVG 드롭 섀도우 css3을 사용하여 svg 요소에 대한 그림자를 설정할 수 있습니까? box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 필터 효과를 사용하여 그림자를 만드는 것에 대한 몇 가지 언급을 보았습니다. CSS 만 사용하는 예가 있습니까? 다음은 cusor 스타일이 올바르게 적용되었지만 그림자 효과가없는 작업 코드입니다. 최소한의 코드로 그림자 효과를 얻을 수 있도록 도와주세요. svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shado..

질문 : CSS에서 px 또는 rem 값 단위를 사용해야합니까? 새 웹 사이트를 디자인하고 있으며 가능한 한 많은 브라우저 및 브라우저 설정과 호환되기를 원합니다. 글꼴 및 요소의 크기에 사용할 측정 단위를 결정하려고하는데 결정적인 답을 찾을 수 없습니다. 내 질문은 : 내 CSS에서 px 또는 rem 지금까지 px 사용은 브라우저에서 기본 글꼴 크기를 조정하는 사용자와 호환되지 않는다는 것을 알고 있습니다. 나는 그들이 계단식으로 rem 비해 유지 관리가 더 em 때문에 무시했습니다. 어떤 사람들은 rem 은 해상도에 독립적이므로 더 바람직하다고 말합니다. 그러나 다른 사람들은 대부분의 최신 브라우저가 어쨌든 모든 요소를 동일하게 확대하므로 px 사용하는 것은 문제가되지 않는다고 말합니다. CSS에서 ..

질문 : 텍스트 선택 강조 표시를 비활성화하는 방법 버튼 (예 : Stack Overflow 페이지 상단에있는 Questions , Tags , Users 등) 또는 탭처럼 작동하는 앵커의 경우 사용자가 실수로 텍스트를 선택한 경우 강조 표시 효과를 비활성화하는 CSS 표준 방법이 있습니까? ? 이 작업은 JavaScript로 수행 할 수 있으며 약간의 인터넷 검색으로 Mozilla 전용 -moz-user-select 옵션이 생성되었습니다. CSS로이를 수행 할 수있는 표준 준수 방법이 있습니까? 그렇지 않은 경우 "모범 사례"접근 방식은 무엇입니까? 답변 2017 년 1 월 업데이트 : Can I use 에 따르면 현재 Internet Explorer 9 및 이전 버전을 제외한 모든 브라우저에서 use..

질문 : CSS 표시 속성의 전환 저는 현재 CSS '메가 드롭 다운'메뉴를 디자인하고 있습니다. 기본적으로 일반 CSS 전용 드롭 다운 메뉴이지만 다른 유형의 콘텐츠를 포함하는 메뉴입니다. 현재 CSS 3 전환은 'display'속성에 적용되지 않는 것으로 보입니다 display: none 에서 display: block (또는 어떤 조합)으로도 전환 할 수 없습니다. 누군가가 최상위 메뉴 항목 중 하나를 가리킬 때 위 예제의 두 번째 계층 메뉴가 '페이드 인'하는 방법이 있습니까? visibility: 속성에서 전환을 사용할 수 있다는 것을 알고 있지만이를 효과적으로 사용하는 방법을 생각할 수 없습니다. 나는 또한 높이를 사용해 보았지만 비참하게 실패했습니다. JavaScript를 사용하여이 작업을 ..

질문 : CSS에서 테두리 불투명도를 설정할 수 있습니까? 이와 같은 요소의 테두리를 반투명하게 만드는 간단한 CSS 방법이 있습니까? border-opacity: 0.7; 그렇지 않다면 이미지를 사용하지 않고 어떻게 할 수 있는지 아는 사람이 있습니까? 답변 불행히도 opacity 요소는 전체 요소 (텍스트 포함)를 반투명하게 만듭니다. 테두리를 반투명하게 만드는 가장 좋은 방법은 rgba 색상 형식을 사용하는 것입니다. 예를 들어, 불투명도가 50 % 인 빨간색 테두리를 제공합니다. div { border: 1px solid rgba(255, 0, 0, .5); -webkit-background-clip: padding-box; /* for Safari */ background-clip: paddin..

질문 : CSS에서 속성으로 요소 선택 data-role )으로 CSS의 요소를 선택할 수 있습니까? 답변 속성 선택기를 사용하는 것을 의미하는 경우 다음과 같은 이유가 있습니다. [data-role="page"] { /* Styles */ } 내가 링크하는 문서에서 모두 다루는 다양한 시나리오에 사용할 수있는 다양한 속성 선택기가 있습니다. 맞춤 데이터 속성이 '새로운 HTML5 기능'임에도 불구하고 브라우저는 일반적으로 비표준 속성을 지원하는 데 문제가 없으므로 속성 선택기로 필터링 할 수 있어야합니다. 과 CSS 유효성 검사에 대해서도 걱정할 필요가 없습니다. CSS는 선택기 구문을 깨지 않는 한 네임 스페이스가 지정되지 않은 속성 이름에 대해 신경 쓰지 않기 때문입니다. 출처 : https://s..

질문 : DOM의 특정 요소에서 HTML + CSS + JS를 선택적으로 복사하는 도구 [닫기] 대부분의 웹 개발자와 마찬가지로, 마크 업이 어떻게 작성되는지보기 위해 웹 사이트의 소스를 살펴 보는 것을 좋아합니다. Firebug 및 Chrome 개발자 도구와 같은 도구를 사용하면 코드를 쉽게 검사 할 수 있지만 특정 섹션을 복사하고 로컬에서 작업하려면 모든 개별 요소와 관련 CSS를 복사하는 것이 어려울 것입니다. 그리고 아마도 전체 소스를 저장하고 관련없는 코드를 잘라 내기 위해 많은 노력을 기울일 것입니다. Firebug에서 요소를 마우스 오른쪽 버튼으로 클릭하고 "이 요소에 대해 HTML + CSS + JS 저장"옵션이 있으면 좋을 것입니다. 그러한 도구가 있습니까? 이 기능을 추가하기 위해 Fi..

질문 : CSS에서 "절대"위치와 정의되지 않은 너비가있는 요소를 중앙에 배치 하시겠습니까? 내 창 중앙에 div ( position:absolute; ) 요소를 배치해야합니다. 그러나 너비를 알 수 없기 때문에 그렇게하는 데 문제가 있습니다. 나는 이것을 시도했다. 그러나 너비가 반응하므로 조정해야합니다. .center { left: 50%; bottom: 5px; } 내가 어떻게 해? 답변 I am some centered shrink-to-fit content! tum te tum 출처 : https://stackoverflow.com/questions/1776915/center-an-element-with-absolute-position-and-undefined-width-in-css

질문 : HTML 레이아웃에 테이블을 사용하지 않는 이유는 무엇입니까? HTML의 레이아웃에 테이블을 사용해서는 안된다는 일반적인 의견 인 것 같습니다. 왜? 나는 이것에 대한 좋은 주장을 본 적이 없다. 일반적인 대답은 다음과 같습니다. 콘텐츠를 레이아웃에서 분리하는 것이 좋습니다. 그러나 이것은 잘못된 주장입니다. 진부한 생각 . 레이아웃에 테이블 요소를 사용하는 것이 테이블 형식 데이터와 거의 관련이 없다는 것이 사실이라고 생각합니다. 그래서 뭐? 내 상사가 신경 쓰나요? 내 사용자가 신경 쓰나요? 웹 페이지 관리를 유지해야하는 저나 동료 개발자 일 것입니다. 테이블을 유지 관리하기가 어렵습니까? 테이블을 사용하는 것이 div와 CSS를 사용하는 것보다 쉽다고 생각합니다. 그건 그렇고 ... 왜 d..

질문 : CSS를 통해 PNG 이미지의 색상을 변경 하시겠습니까? 흰색으로 단순한 모양을 표시하는 투명한 PNG가 주어지면 어떻게 든 CSS를 통해 색상을 변경할 수 있습니까? 어떤 종류의 오버레이입니까? 답변 -webkit-filter 및 filter 와 함께 필터를 사용할 수 있습니다. 필터는 브라우저에 비교적 새롭지 만 다음 CanIUse 표에 따라 90 % 이상의 브라우저에서 지원됩니다. https://caniuse.com/#feat=css-filters 이미지를 그레이 스케일, 세피아 등으로 변경할 수 있습니다 (예제 참조). 이제 필터를 사용하여 PNG 파일의 색상을 변경할 수 있습니다. body { background-color:#03030a; min-width: 800px; min-heig..