요소의 높이를 지정하는 매개변수입니다. HTML 페이지 요소의 크기를 설정하기 위한 CSS 너비 및 높이 매개변수입니다. 너비와 높이에는 무엇이 포함됩니까?
마지막 업데이트: 2016년 4월 21일
요소 크기는 너비 및 높이 속성을 사용하여 설정됩니다.
이러한 속성의 기본값은 auto 입니다. 이는 브라우저가 요소의 너비와 높이를 결정함을 의미합니다. 단위(픽셀, em) 또는 백분율을 사용하여 크기를 명시적으로 지정할 수도 있습니다.
너비: 150px; 너비: 75%; 높이: 15em;
픽셀은 정확한 너비와 높이를 정의합니다. em 측정 단위는 요소의 글꼴 높이에 따라 달라집니다. 예를 들어 요소의 글꼴 크기가 16픽셀인 경우 해당 요소의 1em은 16픽셀이 됩니다. 즉, 요소의 너비가 15em으로 설정되면 실제로는 15 * 16 = 230픽셀이 됩니다. 요소에 정의된 글꼴 크기가 없으면 상속된 매개변수 또는 기본값에서 가져옵니다.
너비 속성의 백분율 값은 컨테이너 요소의 너비를 기준으로 계산됩니다. 예를 들어 웹페이지의 body 요소 너비가 1000픽셀이고 중첩된 요소가
height 속성의 백분율 값은 width 속성과 유사하게 작동하지만 이제는 컨테이너 요소의 높이를 기준으로 높이가 계산됩니다.
예를 들어:
동시에 요소의 실제 크기는 너비 및 높이 속성에 설정된 크기와 다를 수 있습니다. 예를 들어:
스크린샷에서 볼 수 있듯이 실제로 너비 속성 값인 200px는 요소의 내부 콘텐츠 너비만 결정하며 요소 자체의 블록에 공백이 할당됩니다. 내부 내용의 너비(width 속성) + padding(padding 속성) + 테두리 너비( border-width 속성) + 외부 여백(margin 속성)과 같습니다. 즉, 요소의 너비는 230픽셀이고, 패딩을 고려한 요소 블록의 너비는 250픽셀이 됩니다.
요소의 크기를 결정할 때 이러한 계산을 고려해야 합니다.
추가 속성 세트를 사용하여 최소 및 최대 크기를 설정할 수 있습니다.
min-width : 최소 너비
max-width : 최대 너비
min-height : 최소 높이
max-height : 최대 높이
이 경우 요소의 너비는 컨테이너 요소 너비의 50%와 동일하지만 200픽셀보다 작거나 300픽셀을 초과할 수 없습니다.
블록 너비 재정의
box-sizing 속성을 사용하면 요소의 설정된 크기를 재정의할 수 있습니다. 다음 값 중 하나를 사용할 수 있습니다.
content-box: 브라우저가 요소의 실제 너비와 높이를 결정하기 위해 width 및 height 속성 값에 테두리 너비와 패딩을 추가하는 기본 속성 값
padding-box: 요소의 너비와 높이에 값의 일부로 패딩이 포함되어야 함을 웹 브라우저에 알립니다. 예를 들어 다음과 같은 스타일이 있다고 가정해 보겠습니다.
너비: 200px; 높이: 100px; 여백: 10px; 패딩: 10px; 테두리: 5px 단색 #ccc; 배경색: #eee; 상자 크기 조정: 패딩 상자;
여기서 블록 내부 콘텐츠의 실제 너비는 200px(너비) - 10px(왼쪽 패딩) - 10px(오른쪽 패딩) = 180px입니다.
대부분의 최신 브라우저는 이 속성을 지원하지 않는다는 점은 주목할 가치가 있습니다.
border-box: 요소의 너비와 높이에 해당 값의 일부로 패딩과 테두리가 포함되어야 함을 웹 브라우저에 알립니다. 예를 들어 다음과 같은 스타일이 있다고 가정해 보겠습니다.
너비: 200px; 높이: 100px; 여백: 10px; 패딩: 10px; 테두리: 5px 단색 #ccc; 배경색: #eee; 상자 크기 조정: 테두리 상자;
여기서 블록 내부 콘텐츠의 실제 너비는 200px(너비) - 10px(왼쪽 패딩) - 10px(오른쪽 패딩) - 5px(테두리 왼쪽 너비) - 5px(테두리 오른쪽 너비) = 170px입니다.
예를 들어, 상자 크기 속성 값만 다른 두 블록을 정의해 보겠습니다.
첫 번째 경우 블록 크기를 정의할 때 테두리 두께와 내부 및 외부 패딩이 너비 및 높이 속성에 추가되므로 첫 번째 블록의 크기가 커집니다.
안녕하세요, 독자 여러분! 오늘은 CSS 속성을 사용하여 웹 페이지의 블록 요소 크기를 설정하는 방법과 요소에 맞지 않는 경우 콘텐츠 표시를 구성하는 방법을 살펴보겠습니다.
너비와 높이 - CSS 요소의 너비와 높이
너비 및 높이 스타일 속성을 사용하면 블록 요소의 너비와 높이를 각각 설정할 수 있습니다.
너비: 자동|<ширина>|상속
높이: 자동|<ширина>|상속
값으로는 CSS에서 사용 가능한 모든 측정 단위(예: 픽셀(px), 인치(in), 포인트(pt) 등))를 사용할 수 있습니다.
p(폭:200px; 높이:150px)
절대 단위 외에도 요소의 상대적 크기를 백분율로 설정할 수 있습니다. 이 경우 요소의 너비와 높이는 상위 요소의 너비와 높이에 따라 달라집니다. 상위 항목을 명시적으로 지정하지 않으면 크기는 브라우저 창에 따라 달라집니다.
div (너비:40%;)
자동은 요소 크기 조정 제어를 웹 브라우저에 맡기며 기본값입니다. 이 경우 요소의 크기는 모든 내용에 완전히 맞도록 설정됩니다.
몇 가지 예를 살펴보겠습니다.
저희 자동차 홈페이지에 오신 것을 환영합니다. 여기서는 자동차, 자동차의 기술적 특성 및 특징에 관한 흥미롭고 유용한 기사를 많이 찾을 수 있습니다.
결과:
이 예에서는 div를 만들고 그 안에 텍스트가 포함된 단락 p를 중첩했습니다. div의 경우 크기를 300x300픽셀로 엄격하게 설정했습니다. p 요소는 width 및 height 속성 값이 auto와 동일하므로 스크린샷에서 볼 수 있듯이 너비는 상위 요소의 너비와 동일하게 설정되고 높이는 p 요소에 포함된 모든 텍스트에 맞도록 설정됩니다. 단락.
이제 단락 p의 CSS 설정을 변경하고 고정 크기를 설정해 보겠습니다.
레이어2(
배경: #eee;
너비:250px;
}
결과:
보시다시피, 높이 매개변수가 auto와 동일하게 유지되므로 단락의 너비는 더 좁아져 250픽셀로 동일해졌고 높이는 텍스트에 맞도록 늘어났습니다.
이제 단락의 높이와 너비를 백분율로 설정해 보겠습니다.
레이어2(
배경: #eee;
너비:50%;
높이:50%;
}
결과:
그림에서 볼 수 있듯이 p 요소의 너비는 div 요소 너비의 절반과 동일해졌습니다. 그리고 높이가 증가하여 div 높이의 75%와 같아졌습니다.
요소의 너비와 높이를 상대 단위로 지정할 때 가능한 최소 및 최대 크기를 지정해야 할 수도 있습니다. 결국, 예를 들어 브라우저 창의 크기를 조정하면 요소의 크기가 사이트의 가독성이 매우 낮아지는 크기로 줄어들거나 늘어날 수 있습니다.
min-width 및 min-heigh 속성을 사용하여 최소 너비와 높이를 정의할 수 있습니다.
최소 너비:<ширина>
최소 높이:<высота>
유사한 스타일 속성 max-width 및 max-height를 사용하면 최대 크기를 설정할 수 있습니다.
최대 너비:<ширина>
최대 높이:<высота>
높이와 너비의 최대값과 최소값을 설정할 때 요소의 크기는 최대값보다 크고 최소값보다 작아질 수 없습니다.
이 작업이 무엇인지 명확히 할 가치가 있습니다. 높이 및 너비 매개변수는 블록 태그에만 적용됩니다., 인라인 요소의 경우 이러한 매개변수는 브라우저에서 처리되지 않습니다.
요소의 높이와 너비에 대해 엄격한 매개변수를 설정하면 요소에 포함된 콘텐츠가 제한된 영역에 맞지 않을 수 있습니다.
예를 들어 위에서 설명한 예에서 단락 p의 크기를 100픽셀로 줄이겠습니다.
레이어2(
배경: #eee;
너비:100px;
높이:100px;
}
결과:
보시다시피 텍스트가 단락의 경계를 벗어나서 보기에 별로 좋지 않습니다. 이러한 상황을 방지하기 위해 CSS 규칙인 오버플로가 있습니다.
콘텐츠 숨기기(숨김, 표시) 또는 스크롤(스크롤, 자동)을 위한 오버플로 매개변수
요소의 너비와 높이가 모두 제한되면 콘텐츠 오버플로가 발생할 수 있습니다. 두 단락을 살펴보겠습니다.
첫 번째 단락 텍스트
두 번째 단락 텍스트
결과:
단락의 너비나 높이가 지정되지 않았기 때문에 브라우저는 auto 값에 대한 자체 이해를 바탕으로 독립적으로 이를 계산합니다. 결과적으로 단락은 포함된 내용에 따라 너비와 높이에서 사용 가능한 공간을 모두 차지했습니다.
이제 첫 번째 단락의 너비를 제한해 보겠습니다.
첫 번째 단락 텍스트
두 번째 단락 텍스트
결과:
단락의 너비는 예상대로 줄어들었고 높이는 전체 텍스트를 수용할 수 있도록 설정되었습니다.
이제 첫 번째 단락의 높이를 제한해 보겠습니다.
첫 번째 단락 텍스트
두 번째 단락 텍스트
결과적으로, 이렇게 제한된 단락에 텍스트가 맞지 않아 아래쪽 이웃 영역에 도달한 것으로 나타났습니다. 따라서 첫 번째 문단이나 두 번째 문단의 내용을 읽는 것은 사실상 불가능합니다. 이러한 상황에서 콘텐츠의 동작을 제어하는 것입니다. 오버플로 규칙:
오버플로: 표시|숨김|스크롤|자동|상속
기본적으로 오버플로는 표시로 설정되어 브라우저에 컨테이너에 맞지 않는 콘텐츠를 표시하도록 지시합니다. 결과는 위의 예에서 볼 수 있습니다.
규칙은 컨테이너에 맞지 않는 모든 것을 숨깁니다.
모든 내용이 맞는 경우에도 스크롤 값은 요소에 세로 및 가로 스크롤 막대를 표시합니다.
첫 번째 단락 텍스트
두 번째 단락 텍스트
컨테이너에 대한 스크롤 막대를 만들어야 하는 경우 가장 인기 있고 논리적인 솔루션은 값입니다. 자동. 이 경우 브라우저 자체는 스크롤 막대를 표시할 시기와 축을 결정합니다.
첫 번째 단락 텍스트
두 번째 단락 텍스트
결과:
스크롤 막대를 사용자 정의하려면 Overflow-x 및 Overflow-y 스타일 속성을 사용할 수도 있습니다. 이를 통해 개별 축의 스크롤 표시를 사용자 정의할 수 있습니다. 따라서 다음을 담당합니다. 수평축, 그리고 수직축.
따라서 예를 들어 가로 스크롤이 단락에 표시되지 않고 세로 스크롤이 필요한 경우에만 표시되어야 하는 경우 다음 CSS 규칙을 작성하면 됩니다.
p(오버플로-x:숨김;오버플로-y:자동;)
그리고 문제는 해결될 것입니다.
그게 다야. 다음 시간까지. 블로그 업데이트를 구독하는 것을 잊지 마세요. 소셜 네트워크 버튼을 이용해 주시면 감사하겠습니다.
높이: 100%
더 간단한 것부터 시작해 보겠습니다. 언제 사용하나요? 높이: 100%? 실제로 질문은 약간 다르게 들리는 경우가 많습니다. "내 페이지가 화면의 전체 높이를 차지하도록 하려면 어떻게 해야 합니까?" 사실이 아닌가요?이에 답하려면 다음을 이해해야 합니다. 높이: 100%상위 요소의 높이와 같습니다. 이것은 마법의 "전체 창 높이"가 아닙니다. 따라서 요소가 창 높이의 100%를 차지하도록 하려면 다음을 설정하십시오. 높이: 100%충분하지 않습니다.
왜? 그러나 컨테이너의 부모는 body 요소이고 높이 속성은 기본적으로 auto로 설정되어 있기 때문입니다. 이는 높이가 콘텐츠의 높이와 같다는 것을 의미합니다. 물론 body에 height: 100%를 추가해 볼 수도 있지만 그것만으로는 충분하지 않습니다.
왜? 그리고 body 요소의 부모가 html 요소이기 때문입니다. 이 요소의 height 속성도 auto이고 콘텐츠 크기에 맞게 늘어납니다. 하지만 이제 html 요소에 height: 100% 를 추가하면 모든 것이 작동합니다.
좀 더 명확해졌나요? 루트 html 요소는 실제로 페이지의 최상위 수준이 아니며 "뷰포트"입니다. 단순화를 위해 이것이 브라우저 창이라고 가정하겠습니다. 따라서 HTML 요소에 height: 100%를 설정하면 이는 브라우저 창과 동일한 높이가 된다는 것과 같습니다.
작은 코드 조각에서 얻은 정보를 요약해 보겠습니다.
Html, 본문, .container( 높이: 100%; )
준비가 된. 뷰포트 작동 방식에 대해 더 자세히 알아보고 싶다면 적극 권장합니다.
상위 요소에 높이 대신 최소 높이 속성이 설정되어 있으면 어떻게 되나요?
최근 Roger Johansson은 다음과 같은 문제를 설명했습니다. 높이: 100%, 이는 상위 요소에 높이가 설정되지 않았지만 최소 높이가 지정된 경우 나타납니다. 기사에서 말한 내용을 더 깊이 다루고 싶지는 않지만 곧바로 결론을 내리겠습니다. 설치해야합니다 높이: 1px하위 요소가 min-height에 지정된 전체 높이를 차지할 수 있도록 상위 요소에 대한 것입니다.부모( min-height: 300px; height: 1px; /* 자식을 최소 높이의 100%로 만드는 데 필요함 */ .child( height: 100%; )
jsFiddle의 예.
이 문제에 대한 자세한 내용은 Roger Johansson의 기사를 참조하세요.
폭: 100%
이제 다루자 너비: 100%. 먼저 약간의 설명: 속성 설정 너비: 100%, 우리는 요소가 상위 요소의 전체 너비를 차지하기를 원합니다. 모든 것이 표준입니다.작은 비밀을 하나 말씀드리겠습니다. width는 이 속성에 적합한 이름이 아닙니다. width 속성은 요소의 절대 크기가 아니라 요소 내용의 크기이며 이는 큰 차이를 만듭니다.
다음을 사용하여 요소에 패딩 및/또는 테두리를 추가하는 경우 너비: 100%, 그러면 더 이상 상위 요소에 맞지 않습니다. 패딩과 테두리가 나타났기 때문에 너비를 content-width라고 불러야 했습니다. 이제 위의 내용을 보여주는 예를 살펴보겠습니다.
부모의 너비가 25em이고, 자식의 너비가 100%(부모 너비의)이고 패딩도 1em(오른쪽에 1em, 왼쪽에 1em)이라고 가정해 보겠습니다. 가로 2em) 및 테두리 0.5em(오른쪽 0.5em, 왼쪽 0.5em, 총 가로 1em), 결과적으로 25em(100%) + 2em + 1em = 28em이 됩니다.
이 문제를 해결하는 방법에는 4가지가 있습니다. 첫 번째이자 아마도 가장 좋은 방법은 재산을 피하는 것입니다. 너비: 100%, 특히 이 경우에는 전혀 쓸모가 없기 때문입니다. 하위 요소가 블록 수준인 경우 자동으로 상위 요소의 전체 너비를 차지합니다(패딩 및 테두리 문제 없이). 그러나 인라인 블록 요소를 사용하면 이 문제를 그렇게 쉽게 해결할 수 없습니다.
우리는 교체할 수 있습니다 너비: 100%정적 크기로. 우리의 경우에는 25 - (2 + 1) = 22em입니다. 물론 너비를 수동으로 계산해야 하기 때문에 이는 잘못된 솔루션입니다. 다른쪽으로 가자!
세 번째 방법은 calc()를 사용하여 너비를 계산하는 것입니다. 너비: 계산(100% - 3em). 하지만 그것도 맞지 않습니다. 먼저 패딩 + 테두리 크기를 계산해야 합니다. 둘째, calc()는 브라우저에서 제대로 지원되지 않습니다(IE 8, Safari 5, Opera 12, Android의 기본 브라우저에서는 작동하지 않음).
네 번째 아이디어 - 속성을 활용하세요 상자 크기 조정: 테두리 상자. 패딩 및 테두리 속성을 고려하도록 요소의 너비와 높이를 계산하는 알고리즘을 변경합니다. 좋은 소식은 박스 크기 조정이 우수한 브라우저 지원(IE8+, Opera 7+)을 갖는다는 것입니다. 다른 모든 브라우저에서는 폴리필을 사용할 수 있습니다.
결론: 사용하지 마세요 너비: 100%없이 상자 크기 조정: 테두리 상자.
Z-색인을 망치지 않는 방법.
페이지의 모든 요소는 세 가지 평면에 배치됩니다. 수직 및 수평 축 외에도 추가 Z축(깊이)이 있습니다. 처음에는 모든 것이 매우 단순해 보입니다. 큰 Z-인덱스를 가진 요소는 낮은 Z-인덱스를 가진 요소 위에 위치합니다. 불행히도 모든 것이 훨씬 더 복잡합니다. 나는 z-index가 전체 역사상 가장 복잡한 CSS 속성이라고 확신합니다. 또한 CSS로 작업할 때 z-index와 관련된 문제가 다른 문제보다 더 자주 발생한다고 확신합니다. 나는 우리가 이 문제를 해결할 수 있는 가능한 방법을 밝힐 수 있기를 바랍니다.시작한다. z-index 속성은 정적 요소에 영향을 주지 않습니다. Z축을 따라 요소를 이동하려면 위치를 상대, 절대 또는 고정으로 변경해야 합니다.
z-index에 대해 이해해야 할 중요한 점은 DOM 트리의 모든 요소가 동일한 수준에 배치되지는 않는다는 것입니다. 즉, 요소의 Z-인덱스를 매우 큰 값으로 변경해도 해당 요소가 앞으로 표시된다는 보장은 없습니다. 이를 오버레이 컨텍스트라고 합니다.
간단히 말해서 오버레이 컨텍스트는 단일 html 요소를 기반으로 하는 일종의 그룹으로, 모든 하위 요소는 컨텍스트에서 동일한 위치와 동일한 Z-인덱스를 받습니다. 요소의 Z-인덱스를 변경하면 원하는 대로 다른 요소가 겹칠 수 있습니다. 동일한 오버레이 컨텍스트 내에서 요소가 정렬되는 방식은 다음과 같습니다(아래에서 위로).
- 컨텍스트를 구성하는 요소의 배경과 테두리
- 음수 Z-색인이 있는 하위 오버레이 컨텍스트(가장 작은 것부터)
- 위치가 지정되지 않은 요소
- z-index 값이 auto 또는 0인 위치 지정 요소
- 양의 Z-인덱스가 있는 위치 지정 요소(Z-인덱스가 동일한 경우 순서대로 다음 각 요소는 이전 요소 위에 위치함)
상황이 나빠질 때
지금까지 z-index의 기본 사항을 다루었으며 이를 이해하면 많은 시간을 절약할 수 있습니다. 불행히도 그 수가 충분하지 않습니다. 그러면 모든 것이 너무 단순해질 것입니다.요점은 각 오버레이 컨텍스트가 자체 z축을 갖는다는 것입니다. 예를 들어 컨텍스트 1의 요소 A와 컨텍스트 2의 요소 B는 z-인덱스를 통해 상호 작용할 수 없습니다. 이는 전체 오버레이 컨텍스트의 맨 아래에 있는 오버레이 컨텍스트의 일부인 요소 A가 매우 높은 z-인덱스 값을 사용하더라도 상위에 있는 다른 컨텍스트의 요소 B와 결코 겹칠 수 없음을 의미합니다.
하지만 더 나쁜 것은 무엇입니까? html 요소는 루트 오버레이 컨텍스트를 생성합니다. 그런 다음 자동 이외의 z-index 속성을 사용하여 정적으로 배치되지 않은 각 요소도 자체 오버레이 컨텍스트를 생성합니다. 새로운 것은 없다. 그러나 여기에서 문제가 발생하기 시작합니다. 오버레이 컨텍스트와 관련이 없는 일부 CSS 속성도 새로운 컨텍스트를 생성합니다. 예를 들어 불투명도 속성이 있습니다.
맞습니다. opacity 속성은 새로운 오버레이 컨텍스트를 생성합니다. 변환 및 원근감 속성은 동일합니다. 그래도 의미가 없지 않습니까? 예를 들어 불투명도가 1보다 작거나 변형이 있는 요소가 있는 경우 잠재적으로 문제가 발생할 수 있습니다.
불행하게도 모든 z-index 문제에는 고유한 컨텍스트(말장난 의도 없음)가 있어 보편적인 솔루션이 불가능합니다.
위의 내용을 간략하게 요약하자면 다음과 같습니다.
- Z-색인을 적용하기 전에 위치 속성을 정적이 아닌 다른 것으로 설정했는지 확인하세요.
- Z-색인 값에 5자리 이상의 숫자를 사용하지 마십시오. 완전히 의미가 없습니다. 대부분의 경우 z-index 값은 10 정도이면 충분합니다.
- 오버레이하려는 요소가 동일한 오버레이 컨텍스트에 있는지 확인하세요.
- 여전히 제대로 작동하지 않는 경우 변환이 없는지, 상위 요소의 불투명도가 더 높은지 확인하세요.
주제에 관해서는 Philip Walton의 Z-index에 대해 아무도 말하지 않은 내용과 공식 CSS 사양을 읽어 보는 것이 좋습니다.
들여쓰기 축소
내 생각에는 이것이 무슨 일이 일어나고 있는지 파악하는 데 가장 많은 시간을 빼앗는 CSS 결함 중 하나인 것 같습니다. z-index 버그와 다소 비슷하다고 할 수 있습니다. 어쨌든 패딩 축소는 두 요소의 상단 및 하단 패딩이 하나로 축소되는 경우입니다(두 요소 중 더 큰 것).다행히도 이 동작은 일반적으로 예상됩니다. 아마도 이것이 CSS 사양에 명시된 대로 작동하는 이유일 것입니다. 그러나 수직 여백이 축소되는 것을 원하지 않는 경우도 있습니다. 이를 방지하는 방법을 이해하기 위해 먼저 이런 일이 발생하는 이유를 살펴보겠습니다. 여백 축소는 세 가지 경우에 발생할 수 있습니다.
인접 요소
인접한 두 요소에 수직 패딩이 있으면 가장 큰 요소로 축소됩니다. 붕괴를 방지하는 방법에는 여러 가지가 있습니다.- 지우기: 왼쪽; 왼쪽으로 뜨다; (맞아요 동일하게 작동합니다)
- 디스플레이: 인라인 블록;
jsFiddle의 예는 수정 사항이 어떻게 작동하는지 보여줍니다.
부모 및 첫 번째/마지막 자녀
일반적으로 상위 및 하위 요소의 상단 패딩은 가장 큰 패딩으로 축소됩니다. 마지막 하위 요소와 하단 패딩에 대해서도 유사하게 작동합니다. 이 문제를 해결하는 방법에는 여러 가지가 있습니다. 대부분은 상위 요소에 다음 속성 중 하나를 추가하는 것과 관련됩니다.- 오버플로: 숨김(또는 기타, 표시되지 않음)
- 패딩: 1px(또는 0보다 큰 다른 값)
- 테두리: 1px 투명 솔리드(또는 다른 테두리)
- float: 왼쪽(오른쪽도 동일하게 작동)
jsFiddle의 예는 수정 사항이 어떻게 작동하는지 보여줍니다.
빈 블록
빈 블록에 테두리, 패딩 또는 높이가 없으면 상단 및 하단 패딩이 하나로 축소됩니다. 어쨌든 빈 블록을 사용하는 것은 나쁜 습관이므로 이런 일이 자주 발생하지 않습니다.로버트 나이먼
이 기사가 향후 문제로부터 귀하를 구할 수 있는 몇 가지 사항을 이해하는 데 도움이 되었기를 바랍니다.
그만큼 키 CSS 속성은 요소의 높이를 지정합니다. 기본적으로 이 속성은 콘텐츠 영역의 높이를 정의합니다. 그러나 box-sizing이 border-box로 설정되면 대신 테두리 영역의 높이가 결정됩니다.
이 대화형 예제의 소스는 GitHub 저장소에 저장되어 있습니다. 대화형 예제 프로젝트에 기여하고 싶다면 https://github.com/mdn/interactive-examples를 복제하고 풀 요청을 보내주세요.
min-height 및 max-height 속성은 height 를 재정의합니다.
통사론
/* 키워드 값 */ height: auto; /*가치
CSS 데이터 유형은 거리 값을 나타냅니다. 길이는 너비, 높이, 여백, 패딩, 테두리 너비, 글꼴 크기 및 텍스트 그림자와 같은 다양한 CSS 속성에서 사용할 수 있습니다.">형식적 구문
예
HTML
CSS
div ( 너비: 250px; margin-bottom: 5px; 테두리: 2px 단색 파란색; ) #더 크다 ( 높이: 50px; ) # 더 짧다 ( 높이: 25px; ) #parent ( 높이: 100px; ) #child ( 높이: 50% ;폭: 75%;결과
접근성 문제
텍스트 크기를 늘리기 위해 페이지를 확대할 때 높이로 설정된 요소가 잘리지 않거나 다른 콘텐츠를 가리지 않는지 확인하세요.
명세서
| 사양 | 상태 | 논평 |
|---|---|---|
| CSS 내부 및 외부 크기 조정 모듈 레벨 4 |
편집자의 초안 | |
| CSS 내부 및 외부 크기 조정 모듈 레벨 3 해당 사양의 "높이"에 대한 정의입니다. |
작업 초안 | max-content , min-content , fit-content 키워드를 추가했습니다. |
| CSS 전환 해당 사양의 "높이"에 대한 정의입니다. |
작업 초안 | 애니메이션 가능한 높이를 나열합니다. |
| CSS 레벨 2(개정 1) 해당 사양의 "높이"에 대한 정의입니다. |
추천 | 거리 값을 나타내는 CSS 데이터 유형에 대한 지원을 추가합니다. 길이는 너비, 높이, 여백, 패딩, 테두리 너비, 글꼴 크기 및 텍스트 그림자와 같은 다양한 CSS 속성에서 사용할 수 있습니다."> |
| CSS 레벨 1 해당 사양의 "높이"에 대한 정의입니다. |
추천 | 초기 정의. |
| 초기 값 | 자동 |
|---|---|
| 적용대상 | 대체되지 않은 인라인 요소, 테이블 열 및 열 그룹을 제외한 모든 요소 |
| 상속됨 | 아니요 |
| 백분율 | 백분율은 생성된 상자의 포함 블록 높이를 기준으로 계산됩니다. 포함 블록의 높이가 명시적으로 지정되지 않고(즉, 콘텐츠 높이에 따라 다름) 이 요소가 절대 위치에 지정되지 않은 경우 값은 다음과 같이 계산됩니다. 루트 요소의 높이 백분율은 초기 포함 블록을 기준으로 합니다. |
| 미디어 | 시각적 |
| 계산된 값 | 백분율, 자동 또는 절대 길이 |
| 애니메이션 유형 | CSS 데이터 유형은 실수, 부동 소수점 숫자로 보간됩니다.">length, CSS 데이터 유형은 실수, 부동 소수점 숫자로 보간됩니다.">퍼센트 또는 calc(); |
| 정식 순서 | 형식문법에 의해 정의된 고유하고 모호하지 않은 순서 |
브라우저 호환성
이 페이지의 호환성 표는 구조화된 데이터에서 생성되었습니다. 데이터에 기여하고 싶다면 https://github.com/mdn/browser-compat-data를 확인하고 풀 요청을 보내주세요.
GitHub에서 호환성 데이터 업데이트
| 데스크탑 | 이동하는 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 크롬 | 가장자리 | 파이어폭스 | 인터넷 익스플로러 | 오페라 | 원정 여행 | 안드로이드 웹뷰 | 안드로이드용 크롬 | 안드로이드용 파이어폭스 | 안드로이드용 오페라 | iOS의 사파리 | 삼성인터넷 | |
| 키 | 크롬 전체 지원 1 | 엣지 전체 지원 12 | Firefox 전체 지원 1 | IE 전체 지원 4 | 오페라 전체 지원 7 | 사파리 완전 지원 1 | WebView Android 전체 지원 1 | Chrome Android 전체 지원 18 | Firefox Android 전체 지원 4 | 오페라 안드로이드 10.1 완벽 지원 | Safari iOS 전체 지원 1 | 삼성 인터넷 안드로이드 전체 지원 1.0 |
| 내용에 맞게 | Chrome 전체 지원 46 | Edge 지원 안됨 아니요 | Firefox 지원되지 않음 아니요 | IE 지원 안함 아니요 | 오페라 전체 지원 33 | Safari 완전 지원 11 완전 지원 11 완전 지원 9 접두어 접두어 | 오페라 안드로이드? | Safari iOS 전체 지원 11 전체 지원 11 전체 지원 9 접두어 접두어 공급업체 접두사: -webkit-로 구현됨 | ||||
| 최대 콘텐츠 | Chrome 전체 지원 46 | Edge 지원 안됨 아니요 | 접두어 접두어 | IE 지원 안함 아니요 | 오페라 전체 지원 44 | 사파리 전체 지원 11 | WebView Android 전체 지원 46 | Chrome Android 전체 지원 46 | 접두어 접두어 공급업체 접두사: -moz-로 구현됩니다. | 삼성 인터넷 안드로이드 5.0 완벽 지원 | ||
| 최소 콘텐츠 | Chrome 전체 지원 46 | Edge 지원 안됨 아니요 | Firefox 전체 지원 66 전체 지원 66 전체 지원 3 접두어 접두어 공급업체 접두사: -moz-로 구현됩니다. | IE 지원 안함 아니요 | 오페라 전체 지원 44 | 사파리 전체 지원 11 | WebView Android 전체 지원 46 | Chrome Android 전체 지원 46 | Firefox Android 전체 지원 66 전체 지원 66 전체 지원 4 접두어 접두어 공급업체 접두사: -moz-로 구현됩니다. | Opera Android 전체 지원 43 | 사파리 iOS 11 완벽 지원 | 삼성 인터넷 안드로이드 5.0 완벽 지원 |
| 뻗기 | Chrome 전체 지원 28 웹킷 채우기 가능">대체 이름 전체 지원 28웹킷 채우기 가능">대체 이름 웹킷 채우기 가능">대체 이름 | Edge 지원 안됨 아니요 | Firefox 지원되지 않음 아니요 | IE 지원 안함 아니요 | 오페라 전체 지원 15 웹킷 채우기 가능">대체 이름 전체 지원 15웹킷 채우기 가능">대체 이름 웹킷 채우기 가능">대체 이름 비표준 이름 사용: -webkit-fill-available | 사파리 전체 지원 9 웹킷 채우기 가능">대체 이름 전체 지원 9웹킷 채우기 가능">대체 이름 웹킷 채우기 가능">대체 이름 비표준 이름 사용: -webkit-fill-available | WebView Android 전체 지원 4.4 웹킷 채우기 가능">대체 이름 4.4 전체 지원웹킷 채우기 가능">대체 이름 웹킷 채우기 가능">대체 이름 비표준 이름 사용: -webkit-fill-available | Chrome Android 전체 지원 28 웹킷 채우기 가능">대체 이름 전체 지원 28웹킷 채우기 가능">대체 이름 웹킷 채우기 가능">대체 이름 비표준 이름 사용: -webkit-fill-available | Firefox Android 지원되지 않음 아니요 | 오페라 안드로이드? | Safari iOS 전체 지원 9 웹킷 채우기 가능">대체 이름 전체 지원 9웹킷 채우기 가능">대체 이름 웹킷 채우기 가능">대체 이름 비표준 이름 사용: -webkit-fill-available | 삼성 인터넷 안드로이드 5.0 완벽 지원 웹킷 채우기 가능">대체 이름 5.0 전체 지원웹킷 채우기 가능">대체 이름 웹킷 채우기 가능">대체 이름 비표준 이름 사용: -webkit-fill-available |
전설
전폭적인 지원전폭적인 지원 지원 없음지원 없음 호환성 알 수 없음호환성 알 수 없음 비표준 이름을 사용합니다. 비표준 이름을 사용합니다. 사용하려면 공급업체 접두사 또는 다른 이름이 필요합니다. 사용하려면 공급업체 접두사 또는 다른 이름이 필요합니다.이 글에서는 CSS에서 블록의 높이를 너비의 백분율로 설정하는 방법을 살펴보겠습니다. 다양한 크기의 이미지에서 Bootstrap 캐러셀(슬라이더)을 생성하는 예를 사용하여 이 기술의 사용을 고려해 보겠습니다.
너비의 특정 비율에 해당하는 높이의 블록 생성
- 2개 블록의 HTML 구조를 만듭니다.
첫 번째 블록에는 2개의 클래스가 있습니다. 항목 반응 클래스를 사용하여 블록의 상대적 위치를 설정합니다. 이 작업은 블록 2(절대 위치 지정)가 이를 기준으로 위치하도록 수행되어야 합니다. 또한 이 클래스는 해당 요소의 콘텐츠 앞에(항목 반응형) 의사 요소를 추가하는 데에도 사용됩니다. 이 요소는 padding-top CSS 속성을 사용하여 너비를 기준으로 필요한 블록 높이를 설정합니다. 이 방법의 비결은 padding 속성을 픽셀 단위가 아니라 백분율로 표시되며 너비를 기준으로 브라우저에서 계산됩니다.. 이렇게 하면 필요한 높이의 블록을 얻을 수 있습니다. 다음 단계는 블록 2에 절대 위치를 지정하고 이를 첫 번째 블록과 정렬하는 것입니다.
- 페이지에 다음 CSS 코드를 추가합니다. .item-반응형( position:relative; /* 상대 위치 지정 */ ) .item-반응형:before(display: block; /* 요소를 블록으로 표시 */ content: "" ; /* 콘텐츠 의사 요소 */ width: 100%; /* 요소 너비 */ ) .item-16by9 ( padding-top: 56.25%; /* (9:16)*100% */ ) .item-반응형 >.content ( position: Absolute; /* 요소의 절대 위치 */ top: 0; right: 0; Bottom: 0; /* 필요한 경우 (이러한 클래스가 있는 블록의 경우) -4by3 ( padding-top: 75% ; /* (3:4)*100% */ ) .item-2by1 ( 패딩 상단: 50%; /* (1:2)*100% */ ) .item -1by1 ( 패딩 상단: 100% ; /* (1:1)*100% */ )
위 기술을 사용하여 Bootstrap 캐러셀 생성
Bootstrap에 익숙하지 않고 그것이 무엇인지 알고 싶다면 Bootstrap 소개 문서를 참조하세요.
위의 HTML 구조와 CSS 코드를 사용하여 Bootstrap 캐러셀 슬라이드를 표시하는 예를 살펴보겠습니다.
다음 파일을 이미지로 사용합니다.
- carousel_1.jpg (너비 = 736px, 높이 = 552px, 가로 세로 비율(높이 대 너비) = 1.33);
- carousel_2.jpg (너비 = 1155px, 높이 = 1280px, 가로 세로 비율(높이 대 너비) = 0.9);
- carousel_3.jpg (너비 = 1846px, 높이 = 1028px, 가로 세로 비율(높이 대 너비) = 1.8);
- carousel_4.jpg (너비 = 1140px, 높이 = 550px, 가로 세로 비율(높이 대 너비) = 2.07);
- carousel_5.jpg (너비 = 800px, 높이 = 600px, 가로 세로 비율(높이 대 너비) = 1.33);
이미지를 배경으로 설정하겠습니다. 이렇게 하면 Bootstrap 캐러셀에서 종횡비가 다른 3개의 이미지를 사용할 수 있습니다.
캐러셀의 HTML 마크업:
캐러셀 CSS 코드:
항목 반응형( position:relative; /* 상대 위치 지정 */ ) .item-반응형:before(display: block; /* 요소를 블록으로 표시 */ content: ""; /* 의사 요소 콘텐츠 */ 너비 : 100%; /* 요소 너비 */ ) .item-16by9 ( padding-top: 56.25%; /* (9:16)*100% */ ) .item-반응성>.content ( 위치: 절대; /* 요소의 절대 위치 * / /* 요소 위치 */ top: 0; left: 0; background-size: Cover !important)