HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS 튜토리얼

CSS 홈 CSS 소개 CSS 구문 CSS 선택기 CSS 방법 CSS 주석 CSS 색상
그림 물감 RGB 마녀 HSL
CSS 배경
배경색 배경 이미지 배경 반복 배경 첨부 배경 속기
CSS 테두리
테두리 테두리 너비 테두리 색상 테두리 측면 국경 속기 Rounded Borders
CSS 여백
Margins Margin Collapse
CSS 패딩 CSS 높이/너비 CSS 상자 모델 CSS 개요
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS 텍스트
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS 글꼴
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS 아이콘 CSS 링크 CSS 목록 CSS 테이블
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS 디스플레이 CSS 최대 너비 CSS 위치 CSS Z-색인 CSS 오버플로 CSS 플로트
Float Clear Float Examples
CSS 인라인 블록 CSS 정렬 CSS 결합기 CSS 의사 클래스 CSS 의사 요소 CSS 불투명도 CSS 탐색 모음
Navbar Vertical Navbar Horizontal Navbar
CSS 드롭다운 CSS 이미지 갤러리 CSS 이미지 스프라이트 CSS 속성 선택기 CSS 양식 CSS 카운터 CSS 웹사이트 레이아웃 CSS 단위 CSS 특수성 CSS !중요 CSS 수학 함수

CSS 고급

CSS 둥근 모서리 CSS 테두리 이미지 CSS 배경 CSS 색상 CSS 색상 키워드 CSS 그라디언트
Linear Gradients Radial Gradients Conic Gradients
CSS 그림자
Shadow Effects Box Shadow
CSS 텍스트 효과 CSS 웹 글꼴 CSS 2D 변환 CSS 3D 변환 CSS 전환 CSS 애니메이션 CSS 도구 설명 CSS 스타일 이미지 CSS 이미지 반사 CSS 객체 맞춤 CSS 객체 위치 CSS 마스킹 CSS 버튼 CSS 페이지 매김 CSS 다중 열 CSS 사용자 인터페이스 CSS 변수
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS 상자 크기 조정 CSS 미디어 쿼리 CSS MQ 예 CSS 플렉스박스
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS 반응형

RWD 소개 RWD 뷰포트 RWD 그리드 보기 RWD 미디어 쿼리 RWD 이미지 RWD 비디오 RWD 프레임워크 RWD 템플릿

CSS 그리드

그리드 소개 그리드 컨테이너 그리드 항목

CSS SASS

SASS 튜토리얼

CSS 예제

CSS 템플릿 CSS 예제 CSS 퀴즈 CSS 연습 CSS 인증서

CSS 참조

CSS 참조 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 브라우저 지원

CSS 높이 및 너비

❮ 이전의 다음 ❯

CSS height와 width속성은 요소의 높이와 너비를 설정하는 데 사용됩니다.

CSS max-width속성은 요소의 최대 너비를 설정하는 데 사용됩니다.

이 요소는 높이가 50픽셀이고 너비가 100%입니다.

CSS 높이 및 너비 설정

height및 속성 은 width요소의 높이와 너비를 설정하는 데 사용됩니다.

높이 및 너비 속성에는 패딩, 테두리 또는 여백이 포함되지 않습니다. 요소의 패딩, 테두리 및 여백 내부 영역의 높이/너비를 설정합니다.

CSS 높이 및 너비 값

height및 속성 은 width다음 값을 가질 수 있습니다.

  • auto- 이것은 기본값입니다. 브라우저는 높이와 너비를 계산합니다.
  • length - px, cm 등의 높이/너비를 정의합니다.
  • % - 포함하는 블록의 높이/너비를 백분율로 정의합니다.
  • initial - 높이/너비를 기본값으로 설정합니다.
  • inherit - 높이/너비는 부모 값에서 상속됩니다.

CSS 높이 및 너비 예

이 요소는 높이가 200픽셀이고 너비가 50%입니다.

예시

<div> 요소의 높이와 너비를 설정합니다.

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

이 요소는 높이가 100픽셀이고 너비가 500픽셀입니다.

예시

다른 <div> 요소의 높이와 너비를 설정합니다.

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

참고:height 및 속성에는 패딩 width, 테두리 또는 여백이 포함되지 않습니다. 요소의 패딩, 테두리 및 여백 내부 영역의 높이/너비를 설정합니다!

최대 너비 설정

max-width속성은 요소의 최대 너비를 설정하는 데 사용됩니다 .

px, cm 등과 같은 길이 값 또는 포함하는 블록 의 백분율(%)로 max-width지정 하거나 없음으로 설정할 수 있습니다(기본값입니다. 최대 너비가 없음을 의미).

위와 같은 문제 <div>는 브라우저 창이 요소의 너비(500px)보다 작을 때 발생합니다. 그런 다음 브라우저는 페이지에 수평 스크롤바를 추가합니다.

이 상황에서 대신 사용하면 max-width작은 창에 대한 브라우저의 처리가 향상됩니다.

팁: 브라우저 창을 500px 너비보다 작게 드래그하여 두 div의 차이점을 확인하세요!

이 요소의 높이는 100픽셀이고 최대 너비는 500픽셀입니다.

참고: 어떤 이유로 동일한 요소에서 width속성과 속성 을 모두 사용하고 속성 값이 속성 보다 큰 경우 속성이 사용되며 속성 은 무시됩니다.max-widthwidthmax-widthmax-widthwidth

예시

이 <div> 요소는 높이가 100픽셀이고 최대 너비가 500픽셀입니다. 

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

직접 해보십시오 - 예


설정 이 예제에서는 다양한 요소의 높이와 너비를 설정하는 방법을 보여줍니다.


높이와 너비 설정 이 예제에서는 백분율 값을 사용하여 이미지의 높이와 너비를 설정하는 방법을 보여줍니다.


의 최소 ​​너비 및 최대 너비 설정 이 예제에서는 픽셀 값을 사용하여 요소의 최소 너비와 최대 너비를 설정하는 방법을 보여 줍니다.


의 최소 ​​높이 및 최대 높이 설정 이 예제에서는 픽셀 값을 사용하여 요소의 최소 높이와 최대 높이를 설정하는 방법을 보여줍니다.

연습으로 자신을 테스트하십시오

연습:

<h1> 요소의 높이를 "100px"로 설정합니다.

<style>
h1 {
  : 100px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

모든 CSS 차원 속성

Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

❮ 이전의 다음 ❯