padding

여백 또는 패딩을 부모 컨테이너 높이의 백분율로 설정하는 방법은 무엇입니까? 나는 다음을 사용하여 CSS에서 수직 정렬을 만드는 것에 대해 머리를 짜내고 있었습니다. .base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; } Content Here 이 경우에는 효과가 있는 것처럼 보였지만, 베이스 디브의 폭을 늘리거나 줄이면 수직 정렬이 끊어지는 것에 놀랐습니다.padding-top 속성을 설정할 때 padding을 우리의 경우 기본인 parent container 높이의 백분율로 할 것으로 예상했는데 위의 값 50%는..

브라우저 창에 맞게 이미지 크기를 조정하는 방법? 이것은 사소한 것처럼 보이지만 아무리 많은 연구와 코딩을 해봐도 저는 그것을 작동시킬 수 없습니다.조건: 브라우저 창 크기를 알 수 없습니다.그러니 절대 픽셀 크기를 포함하는 솔루션을 제안하지 말아주세요. 이미지의 원래 크기를 알 수 없으며 브라우저 창에 이미 들어맞거나 들어맞지 않을 수 있습니다. 영상이 수직 및 수평 중앙에 놓입니다. 영상 비율을 보존해야 합니다. 영상이 윈도우에 전체적으로 표시되어야 합니다(자르지 않음) 스크롤 막대가 나타나지 않도록 합니다(이미지가 맞는 경우에는 나타나지 않아야 합니다). 창 치수가 변경되면 이미지의 크기가 자동으로 조정되어 원래 크기보다 커지지 않고 사용 가능한 모든 공간을 차지합니다. 기본적으로 제가 원하는 것은..

CSS/HTML만 사용하여 이미지 깨짐 아이콘을 숨기는 방법? 깨진 이미지 아이콘은 어떻게 숨길 수 있습니까?예: 오류 src가 있는 이미지가 있습니다. 솔루션은 모든 브라우저에서 작동해야 합니다.이미지가 깨진 링크인지 CSS/HTML이 알 방법이 없기 때문에 무슨 일이 있어도 자바스크립트를 사용해야 합니다. 그러나 여기에는 이미지를 숨기거나 원본을 백업으로 바꾸는 최소한의 방법이 있습니다. 아니면 갱신하다 이 논리를 여러 이미지에 한 번에 적용할 수 있는 방법은 다음과 같습니다. document.addEventListener("DOMContentLoaded", function(event) { document.querySelectorAll('img').forEach(function(img){ img.on..

CSS를 통해 순서 목록의 두 번째 줄에 대한 들여쓰기를 유지하는 방법은 무엇입니까? 저는 목록 총알이나 십진 숫자가 모두 상위 텍스트 블록과 같은 "내부" 목록을 갖고 싶습니다.목록 항목의 두 번째 행은 첫 번째 행과 동일한 들여쓰기를 가져야 합니다! 예: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 1. Text 2. Text 3. longer Text, long..

HTML IMG 태그를 이용한 종횡비 유지 방법 저는 HTML의 img 태그를 사용하여 우리 애플리케이션에 사진을 보여주고 있습니다.높이와 너비 속성을 모두 64로 설정했습니다.이미지 해상도(예: 256x256, 1024x768, 500x400, 205x246 등)를 64x64로 표시해야 합니다.하지만 img 태그의 높이와 너비 속성을 64로 설정하여 가로 세로 비율을 유지하지 못하여 이미지가 왜곡되어 보입니다. 참고로 제 정확한 코드는 다음과 같습니다. 높이와 너비를 설정하지 마십시오.하나 또는 다른 하나를 사용하면 올바른 종횡비가 유지됩니다. .widthSet { max-width: 64px; } .heightSet { max-height: 64px; } 유연성을 높이는 또 다른 옵션은 를 사용하는 ..

클릭 시 포커스 어라운드 버튼을 제거하는 방법 버튼을 클릭하면 버튼 주변에 모두 하이라이트가 나타납니다.크롬에 있습니다. Add Page 저는 부트스트랩을 테마로 사용하고 있지만, 그건 아니라고 확신합니다. 전에 다른 프로젝트에서 이 사실을 알고 있었습니다. 를 쓰면 .다 대신 합니다. 제가 요.어떻게 하면 이걸 없앨 수 있을까요?다른 페이지에서 이 Q와 A를 찾았는데, 버튼 포커스 스타일을 재정의하는 것이 효과적이었습니다.이 문제는 크롬이 탑재된 MacOS에만 해당될 수 있습니다. .btn:focus { outline: none; box-shadow: none; } 그러나 이는 접근성에 영향을 미치며 버튼과 입력에 대한 일관된 초점 상태가 될 때까지 권장되지 않습니다.아래 댓글에 따르면 마우스를 사용할..

부트스트랩 3 Navbar(로고 포함) 텍스트 브랜딩 대신 이미지 로고가 있는 부트스트랩 3 기본 탐색바를 사용하고 싶습니다.다른 화면 크기에 문제를 일으키지 않고 이 작업을 수행할 수 있는 적절한 방법은 무엇입니까?일반적으로 요구되는 사항이라고 생각하지만, 아직 좋은 코드 샘플을 보지 못했습니다.모든 화면 크기에 허용 가능한 디스플레이를 갖추는 것 이외에 가장 중요한 요구 사항은 작은 화면의 메뉴 접기 가능성입니다. navbar-brand 클래스가 있는 A 태그에 IMG 태그를 넣으려고 했는데 안드로이드 폰에서 메뉴가 제대로 작동하지 않았습니다.나는 navbar 수업의 높낮이도 늘려보았지만, 그것이 더 엉망이 되었습니다. 그런데 제 로고 이미지가 navbar의 높이보다 큽니다.왜 다들 힘들게 하려고 하..

스팬 요소에 대해 마진탑이 작동하지 않습니까? 누가 제가 뭘 잘못 코딩했는지 알려주실 수 있나요?모든 것이 작동하고 있습니다. 단, 상단에 여백이 없다는 것입니다. HTML: Contact Us For any questions whatsoever please contact us through the following e-mail address: info@e-mail.com Read More CSS: span.first_title { margin-top: 20px; margin-left: 12px; font-weight: bold; font-size: 24px; color: #221461; } span.second_title { margin-top: 20px; font-weight: bold; font-s..

상대적 위치 대 절대적 위치? 사이의 차이점은 무엇입니까?position: relative그리고.position: absolute CSS로? ?그리고 언제 그것들을 사용해야 합니까?절대 CSS 포지셔닝 position: absolute; 절대 위치 설정이 가장 이해하기 쉽습니다.은 CSS 신은로 CSS 합니다.position속성: position: absolute; 이 메시지는 브라우저에 문서의 일반적인 흐름에서 위치를 변경하고 페이지의 정확한 위치에 배치해야 함을 알려줍니다.HTML에서 앞이나 뒤의 요소가 웹 페이지에 배치되는 방식에는 영향을 주지 않지만 재정의하지 않는 한 부모의 위치에 따라 달라집니다. 문서 창의 맨 위에서 요소 10픽셀을 배치하려면 다음을 사용합니다.top을 로쇄로 합니다.posi..

고정/고정 왼쪽 열과 스크롤 가능한 본문으로 HTML 테이블을 만들려면 어떻게 해야 합니까? 간단한 해결책이 필요합니다.다음과 같은 다른 질문과 유사하다는 것을 알고 있습니다. 고정 헤더와 고정 열이 있는 HTML 테이블? 자바스크립트와 CSS를 사용하여 스크롤할 때 테이블의 첫 번째 행과 첫 번째 열을 잠그려면 어떻게 해야 합니까? 하지만 저는 하나의 왼쪽 열만 고정하면 되고 간단하고 스크립트가 없는 솔루션을 선호합니다.에는 "" "" "" "" "" " " " " " "를 선택할 수 .position: absolute 열 너비를 명시적으로 을 선택한 다음 를 첫번및열째(명너를로으지정시적감다싼다음그), ▁an▁in▁the▁the로 감싼다.overflow-x: scrollIE7에서 이걸 시도할 필요는 없..