CSS 너비 속성은 요소 콘텐츠 영역의 너비를 정의합니다. 이 영역은 요소의 테두리, 패딩 및 여백 사이의 공간입니다. 또한 ' 값이 있는 CSS 너비 속성은 적합 콘텐츠 ” 콘텐츠에 따라 요소의 너비를 조정합니다.
본 연구에서는 CSS width 속성을 fit-content 값으로 설명한다.
fit-content 값과 함께 CSS 너비 속성을 사용하는 방법은 무엇입니까?
fit-content 값과 함께 CSS 너비 속성을 사용하려면 다음 구문을 확인하세요.
너비: 맞춤 콘텐츠
예시
HTML에서 클래스 이름이 같은 세 개의 div 요소를 추가합니다. 상자 ” 및 세 가지 클래스 “ 색상-1 ”, “ 색상-2 ', 그리고 ' 색상-3 ', 각각. 각 div 안에
요소를 추가하여 웹 페이지에 콘텐츠를 추가합니다.
< 사업부 수업 = '상자 색상-1' >
< 피 > CSS 너비 맞춤 콘텐츠 피 >
사업부 >
< 사업부 수업 = '상자 색상-2' >
< 피 > 헬로 월드 ! 피 >
사업부 >
< 사업부 수업 = '상자 색상-3' >
< 피 > 팀워크는 신뢰 구축에서 시작됩니다. 우리는 일하는 팀입니다 ~을 위한 공통 미션. 피 >
사업부 >
다음은 HTML 코드의 출력입니다.
지금까지 HTML 페이지에 대해 논의했습니다. 이제 다음 섹션에서는 HTML 요소에 다양한 CSS 스타일을 적용하여 보기 좋게 만듭니다. 진행 중인 예에서 ' 너비 ' 값을 갖는 속성 ' 적합 콘텐츠 ” CSS에서.
스타일 '상자' div
.상자 {너비: 맞춤 콘텐츠;
높이: 50px;
색상: 고스트화이트;
패딩: 6px;
여백: 2px;
글꼴 크기: 18px;
}
“ .상자 ”는 div 클래스 상자를 나타냅니다. 적용되는 속성은 다음과 같습니다.
-
- “ 너비 ' 값이 '인 속성 적합 콘텐츠 ”는 사용 가능한 공간을 사용하지만 콘텐츠를 초과하지 않습니다.
- “ 키 ”는 요소의 높이를 결정하는 속성입니다.
- “ 색상 ” 요소의 글꼴 색상을 정의합니다.
- “ 심 ” 속성은 요소의 테두리 내부 또는 콘텐츠 주변에 공간을 생성합니다.
- “ 여유 ”는 요소 주변의 공간을 결정합니다.
- “ 글꼴 크기 ” 속성은 글꼴 크기를 결정합니다.
스타일 '색상-1' div
.색상- 1 {배경색: #00ABB3;
}
“ 배경색 ” 속성이 “ .color-1 ” 디비.
스타일 '색상-2' div
.색상- 2 {배경색: #083AA9;
}
스타일 '색상-3' div
배경색: #4C6793;
}
요소의 너비가 내용과 동일하게 설정되어 있음을 알 수 있습니다.
훌륭합니다! 우리는 CSS '의 사용법을 성공적으로 배웠습니다. 너비 ' 값이 '인 속성 적합 콘텐츠 '.
결론
CSS 너비 속성을 사용하면 여러 값을 활용할 수 있습니다. 이러한 값은 백분율, 픽셀 또는 그 이상입니다. 내용에 맞게 설정하려면 ' 적합 콘텐츠 ” 값을 설정할 수 있습니다. 이 게시물은 실용적인 데모를 통해 fit-content 값으로 CSS 너비 속성을 설명했습니다.