«css» 태그된 질문

CSS (Cascading Style Sheets)는 HTML (HyperText Markup Language), XML (Extensible Markup Language) 문서 및 색상, 레이아웃, 글꼴 등을 포함한 SVG 요소의 모양과 형식을 설명하는 데 사용되는 표현 스타일 시트 언어입니다. 애니메이션. 또한 화면, 종이, 연설 또는 기타 미디어에서 요소를 렌더링하는 방법에 대해서도 설명합니다.

8
남은 높이를 100 % 채우는 방법?
+--------------------+ | | | | | | | | | 1 | | | | | | | | | +--------------------+ | | | | | | | | | 2 | | | | | | | | | +--------------------+ 위와 같이 (1)의 내용은 동적으로 생성되는 페이지에서 증가 또는 …
78 html  css  height  fill 
3
순수 CSS 체크 박스 이미지 교체
테이블에 체크 박스 목록이 있습니다. (행에있는 여러 CB 중 하나) <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'> </label></td></tr> <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'> </label></td></tr> <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'> </label></td></tr> <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'> </label></td></tr> 확인란 이미지를 한 쌍의 사용자 지정 켜기 / 끄기 이미지로 바꾸고 싶습니다. …
10
IE9-10에서 SVG를 사용한 배경 크기
배경 이미지로 설정된 div가 있습니다. <div>Play Video</div> 다음 CSS로 : div { background-image: url('icon.png'); background-image: url('icon.svg'), none; background-size: 40px 40px; background-repeat: no-repeat; background-position: 90% 50%; padding: 20px; width: 150px; } 배경 크기는 Firefox, Safari 및 Chrome에서 적용됩니다. IE8에서 SVG는 PNG 파일로 대체됩니다. 그러나 IE9 및 IE10에서는 SVG 파일의 크기가 크게 …
4
Bootstrap 3-인쇄 레이아웃 및 각 그리드 열 뒤의 끊김
이 예를 사용하는 경우 (여기에서 확인 : http://www.bootply.com/93816 ) <div class="container"> <div class="row"> <div class="col-md-6">Column1</div> <div class="col-md-6">Column2</div> </div> </div> 생성 된 페이지의 인쇄 미리보기를 수행 할 때 일반적인 그리드 레이아웃에 표시하는 대신 열이 쌓이거나 끊어지는 것처럼 보입니다 (부동이 제거 된 것처럼). 나는 @media printbootstrap.css 의 섹션을 살펴 보았고 div그 와 …
2
Safari를 제외한 모든 브라우저에서 작동하는 Flexbox 코드. 왜?
목록 태그가있는 그리드 열, 모든 추가 HTML 목록 요소에 대해 자동 너비가 활성화 된 상태에서 3 개의 열마다 올바른 순서로 표시해야합니다. 이것은 내 예입니다. <style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 150px; width:auto; …
78 html  css  flexbox 
6
컨테이너 사업부가 IMG 또는 SVG 콘텐츠보다 약간 더 큰 것을 주장하는 이유는 무엇입니까?
HTML / CSS / Javascript 연습에 필요한 또 다른 라이트 박스를 제작하려고했지만 사소한 스타일링 문제가 발생했습니다 (아마도!).하지만 해결할 수 없습니다. 나는이 div가 포함를 img. 내가 시도 상관없이 ( border, margin, padding, 자동 높이 등) 난 그냥 할 수없는 div이미지 크기에 맞게 축소합니다. 나는 이것으로 문제를 줄였습니다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD …
78 css 
4
CSS를 사용하여 DIV를 불균등하게 중앙에 배치
flexbox를 사용하여 다른 DIV 내부에 DIV를 배치하고 있습니다. 필요할 때 화면 중앙에 나타나는 대화 상자를 생각해보십시오. 잘 작동하지만 대화 상자 위와 아래의 공간이 정확히 같지 않으면 나머지 공간의 40 %가 대화 상자보다 높고 60 % 아래에 있습니다. 대화 상자 높이는 내부 텍스트의 양에 따라 달라지기 때문에 까다로워집니다. 예를 들어 브라우저 …
23 html  css  flexbox  centering 
10
배경색이 같은 세 div 사이의 이상한 간격을 제거하는 방법은 무엇입니까?
나는 지금이 문제로 꽤 고생하고 있습니다. 이 문제는 휴대 기기 (Android 및 iOS)에서 볼 수 있으며 일부 기기는 약간 확대해야합니다. PC에서는 모바일 모드로 전환 할 때 Chrome 브라우저에서이 버그를 재현 할 수도 있습니다. 다음은 버그를 재현하는 데 사용되는 코드입니다. <!DOCTYPE html> <html lang="en"> <head> <style> .top { height: 100px; background-color: …
23 html  css 
7
이전에 설정 한 테두리 색상 제거
function validate() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "") { document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY"; document.getElementById("username").style.borderColor = "red"; return false; } if (password == "") { document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY"; document.getElementById("password").style.borderColor = "red"; return false; } } #username:focus { background-color: yellow; …
20 javascript  html  css 
8
두 개의 HTML 페이지가 동일하게 보이는 것을 어떻게 증명할 수 있습니까?
예를 들어, 나는 이것을 가지고있다 : <pre> sun<br/>     mercury <br/>     venus <br/>         earth <br/>         mars <br/>             jupiter <br/>     saturn <br/> </pre> 코드 스 니펫 실행결과 숨기기스 니펫 확장 이: <div style="font-family:monospace"> <div style="text-indent: 0">sun</div> <br/> <div style="text-indent: 4ch">mercury</div> <br/> <div style="text-indent: 4ch">venus</div> <br/> <div style="text-indent: 8ch">earth</div> <br/> <div style="text-indent: 8ch">mars</div> …
19 html  css  acid3 
5
세로로 스크롤 할 때 가로 스크롤을 허용하지 마십시오 (또는 그 반대)
overflow-x및로 overflow-y설정된 목록 이 auto있습니다. 또한 운동량 스크롤을 설정 했으므로 터치 스크롤이 모바일에서 잘 작동합니다 webkit-overflow-scrolling: true. 그러나 문제는 세로 스크롤 할 때 가로 스크롤을 비활성화하는 방법을 알 수 없다는 것입니다. 왼쪽 상단 또는 오른쪽 상단으로 스 와이프하면 테이블이 대각선으로 스크롤되므로 사용자 환경이 실제로 좋지 않습니다. 사용자가 세로 스크롤 할 …
10
랩 어라운드로 같은 크기의 div 만들기
위아래 이미지와 텍스트로 메뉴 시스템을 만들려고합니다. 데이터는 동적입니다. 메뉴 시스템을 표시하여 각 이미지가 서로 다른 이미지와 동일한 거리를 유지하여 이미지가 가로 및 세로로 격자 모양으로 정렬되도록하고 싶습니다. 문제는 텍스트입니다. 텍스트가 이미지보다 길면 div가 확대됩니다. 그러나 이미지가 더 이상 서로 간격을 두지 않기 때문에 어색한 간격이 생깁니다. 이 문제를 해결하려면 가장 …
17 html  css  flexbox 
2
균일 한 간격으로 점선 원을 만드는 방법은 무엇입니까?
CSS로 점선을 만들고 싶었고 다음 프로세스로 만들었습니다. 이 프로세스에 의해 점선 원이 표시 될 수 있지만, 점선의 끝과 시작 사이의 간격이 좁아지고 간격이 균일하지 않았다. .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> 코드 스 니펫 실행결과 숨기기스 니펫 확장 간격을 균일하게 만드는 …
16 javascript  html  css 
8
Ctrl + 클릭을 사용하여 여러 셀을 선택하는 방법
숫자가있는 테이블이 있습니다. 표에서 셀을 클릭하면 활성 상태가 전환됩니다. 하나의 셀을 선택하고 crtl을 누르고 다른 셀을 선택하고 결과적으로 첫 번째와 두 번째 사이의 셀이 활성화됩니다. 그것을 구현하는 방법? 코드 펜 https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") …
16 javascript  html  css 
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.