[HTML&CSS] 콘텐츠(content) 영역
- Language & Solution/HTML&CSS
- 2019. 10. 7. 21:38
반응형
| 콘텐츠 영역
콘텐츠 영역(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로 텍스트, 이미지, 비디오 등 실제 내용을 포함하는 부분입니다. 콘텐츠 영역의 크기는 콘텐츠 너비 및 콘텐츠 높이로 결정되며 width와 height 속성으로 설정할 수 있습니다.
width: <크기> | <백분율> | auto
height: <크기> | <백분율> | auto
<크기> : px이나 cm 같은 단위로 지정합니다.
<백분율> : 박스모델을 포함하는 부모 요소 기준으로 너비나 높이값을 백분율로 지정합니다. (부모가 없을 때는 viewport 기준)
auto : 박스모델의 크기가 콘텐츠 양에 따라 자동으로 결정됩니다. (기본값)
참고로 CSS 박스 모델의 width 속성은 콘텐츠 영역의 너비를 말합니다. 이때 콘텐츠 영역를 계산하는 방식은 어떤 box-sizing 속성에 어떤 값을 넣었느냐에 따라 다릅니다. (box-sizing에 관한 것은 아래 링크를 참조)
[Language & Solution/HTML&CSS] - [HTML&CSS] box-sizing, float, clear
| 콘텐츠 영역 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 우선순위</title>
<style>
.box1 {
width: 200px;
height: 100px;
background: #ff362f;
}
.box2 {
width: 50%;
height: 100px;
background: #0041ff;
}
div {
margin: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
출처: https://engkimbs.tistory.com/914 [새로비 지식 저장소]
반응형
'Language & Solution > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] box-sizing, float, clear (0) | 2019.10.08 |
|---|---|
| [HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성 (0) | 2019.10.08 |
| [HTML&CSS] 테두리(border) 영역 (0) | 2019.10.07 |
| [HTML&CSS] 박스모델 (Box Model) (0) | 2019.10.07 |
| [HTML&CSS] CSS 스타일 우선순위 (2) | 2019.10.02 |
