Javascript 요소 높이 가져오기

| | | | | | | | | | | | | | | | | | | |

웹 페이지를 디자인할 때 웹 페이지에 표시되는 요소의 특정 치수를 지정하고 싶을 것입니다. 예를 들어 상자에 특정 높이가 있거나 텍스트 줄이 특정 너비로 확장되기를 원할 수 있습니다.

여기서 CSS 높이 및 너비 속성이 작동합니다. height 및 width 속성은 CSS에서 요소의 높이와 너비를 정의하는 데 사용됩니다.

이 자습서에서는 예제와 함께 CSS 높이 및 너비 속성의 기본 사항과 최소 및 최대 높이를 사용하는 방법에 대해 설명합니다. 반응형 요소를 디자인하기 위한 너비 속성. 이 튜토리얼을 마치면 CSS 높이 및 너비 속성을 사용하여 웹 페이지에서 요소의 크기를 설정하는 데 익숙해질 것입니다.

CSS 높이 및 너비

조정 웹 페이지에서 요소의 높이와 너비를 사용하여 웹 페이지에서 요소가 차지할 공간을 정의할 수 있습니다. 이렇게 하면 각 요소가 필요에 따라 올바르게 표시되도록 웹페이지 요소의 구조를 개발하는 데 도움이 됩니다.

요소가 가로 및 세로로 확장될 수 있는 정도를 정의하려면 너비와 height 속성, 각각.

width 및 height 속성을 사용하면 상자의 콘텐츠 영역에 대한 특정 너비와 높이를 설정할 수 있습니다. 즉, 너비 및 높이 속성은 상자가 포함하는 공간의 양을 제어하며 상자의 여백이나 패딩 세트에는 영향을 미치지 않습니다.

높이 및 너비 속성은 다음 구문을 사용합니다.

p>

HeightValue 및 widthValue는 다음 값 중 하나를 사용할 수 있습니다.

  • 자동: 브라우저가 자동으로 높이와 너비를 계산합니다.
  • 길이:. px, em, rem 등으로 표시되는 프레임의 너비 또는 높이.
  • 백분율: 이니셜
  • 요소가 나타납니다.
  • 상속: 상자에 대해 지정된 기본값입니다. 요소가 표시되는 상자의 너비 또는 높이와 동일한 값

높이 및 너비 속성의 기본 사항을 알았으므로 각 속성의 예를 살펴보겠습니다. 속성이 실행 중입니다.

CSS 높이 및 너비

The Pickled Apple이라는 지역 카페의 웹사이트를 디자인한다고 가정해 보겠습니다. 이 카페는 "About" 카페에 대한 간략한 설명을 포함해야 하는 웹사이트입니다.

이 영역은 너비가 200픽셀, 높이가 200픽셀이어야 하며 배경이 밝은 회색이어야 합니다. 이 크기는 우리가 추가하려는 다른 요소를 확인하기 위해 선택되었습니다. 구현할 때 웹 페이지 모양으로 변경합니다.

다음 코드를 사용하여 상자를 만들 수 있습니다.

클릭 버튼 이미지 < em>위의 코드 편집기에서 버튼을 눌러 HTML/CSS의 출력을 확인합니다.

코드를 분석해 보겠습니다. HTML 파일에서

태그. 이

태그에는 AboutBox라는 클래스 이름이 있으며 CSS 파일에서 텍스트 단락의 스타일을 지정하는 데 사용합니다.

CSS 파일에서 다음과 같은 스타일 규칙을 정의했습니다. 클래스 이름이 AboutBox인 모든 요소에 적용됩니다. 이 스타일 규칙은 요소의 높이를 200px, 너비를 200px로 설정하고 요소의 배경색을 밝은 회색으로 설정합니다.

요소 너비를 100px로 설정하려는 경우. 너비 속성을 100px로 변경할 필요가 있습니다. 또는 요소의 높이를 300px로 하려면 Height 속성을 300px로 변경할 수 있습니다.

CSS 속성 최소 및 최대 길이

너비와 높이는 고정된 값입니다. 즉, 지정된 너비와 높이는 동일하게 유지되며 창의 크기를 조정하거나 다른 장치에서 웹 페이지를 보는 경우 변경되지 않습니다(예: 상위 요소 크기의 백분율과 같은 상대 높이 값을 사용하지 않는 한).

접근 가능한 환경을 디자인하려는 경우 요소의 특정 높이와 너비를 설정하는 것이 실용적이지 않을 수 있으므로 이를 이해하는 것이 중요합니다. 예를 들어 이미지 너비를 500px로 지정하면 사용자가 모바일 장치에서 사이트를 볼 경우 그림이 제대로 렌더링되지 않을 수 있으며 화면 크기가 작아질 수 있습니다.

최소값 및 최대 길이 값 .

요소를 화면 및 창 크기에 맞게 조정하려면 최소 너비, m x 너비, 최소 높이 및 최대 높이 속성을 사용할 수 있습니다. 이러한 속성을 지정하면 너비와 높이에 대해 지정된 값이 무시됩니다.

최소 높이 속성은 속성의 최소 높이를 정의합니다. 최소 높이가 지정된 경우 요소의 높이는 최소 높이 값보다 작을 수 없습니다. min-width 속성은 속성의 최소 너비를 정의하고 같은 방식으로 작동합니다.

마찬가지로 속성의 최대 높이 또는 너비를 설정하려는 경우 최대 높이와 최대 너비를 사용할 수 있으며, 각각.

이전의 커피 예제로 돌아가 보겠습니다. 사용자의 화면 크기에 따라 상자의 너비를 변경한다고 가정합니다. 최대 상자 너비는 500픽셀이어야 하며 상자는 100픽셀보다 작아서는 안 됩니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.

클릭 버튼 이미지 < em>위의 코드 편집기에서 버튼을 눌러 HTML/CSS의 출력을 확인합니다.

코드를 분석하고 채팅하겠습니다. 작동 원리 HTML 파일에서 첫 번째 예제와 동일한 텍스트를 포함하는

태그 사이에 텍스트 단락을 지정했습니다. 이 텍스트 단락과 연결된 클래스 이름은 AboutBox입니다.

CSS 파일에서 AboutBox 클래스

속성의 너비 max-는 최대 상자 너비가 500px임을 의미하는 500px로 설정됩니다. min width 속성은 100px로 설정되어 사용자가 사이트를 보고 있는 장치에 관계없이 상자가 100px보다 좁게 표시되지 않습니다. background-color 속성은 LightGray로 설정되어 상자의 배경색을 밝은 회색으로 설정합니다.

이 영역의 크기는 브라우저의 크기에 따라 변경됩니다. 따라서 브라우저 창을 더 작게 만들면 , 상자의 크기는 그에 따라 변경됩니다. 그러나 브라우저 창이 아무리 커도

태그의 너비는 500px를 초과하지 않습니다.

결론

CSS 높이 및 너비 속성 ies를 사용하면 웹 페이지에서 요소의 높이와 너비를 정의할 수 있습니다.

그러나 이러한 속성은 요소의 높이와 너비에 대해 고정된 값을 설정합니다. 브라우저 창의 크기에 따라 상자의 크기를 변경하려면 최소 높이, 최소 너비, 최대 높이 및 최대 너비 속성을 사용할 수 있습니다.

이 자습서에서는 설명했습니다. , 예제를 참조하여 CSS에서 높이와 너비의 기본, 높이와 너비 속성을 사용하는 방법, 최대 높이와 너비와 최소 일치 속성을 사용하여 웹 페이지 요소의 크기를 정의하는 방법을 참조하십시오. 이제 준비가 되었습니다. 전문가처럼 높이 및 너비 속성 사용을 시작하세요!