[HTML&CSS] 콘텐츠(content) 영역

| 콘텐츠 영역


콘텐츠 영역(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 [새로비 지식 저장소]

이 글을 공유하기

댓글(0)

Designed by JB FACTORY