#5 표시 속성 및 경계 속성
블록 수준 요소
자신이 속한 영역의 전체 너비를 차지하여 블록을 형성합니다.
인라인 요소
필요한 만큼만 공간을 차지합니다.
소유권 보기
요소가 블록 또는 인라인 요소로 처리되는지 여부를 정의합니다.
'추천 관련글,
국경 소유권
요소가 차지하는 영역 주위에 상자를 그릴 수 있습니다.
훈련
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
div{
border: 3px solid red;
display: none;
}
span{
border-width: 5px;
border-style: dashed;
border-color: rgb(100%, 50%, 0%);
display: inline-block;
}
</style>
</head>
<body>
<div>블록 레벨</div>
<span>인라인</span>
</body>
</html>
#6 박스 모델 1부, 박스 모델 소개
박스 모델
기본적으로 브라우저가 요소를 렌더링할 때 각 요소는 직사각형 영역을 차지합니다.
- 콘텐츠 영역 – 너비, 높이
- 실내 장식품 – 실내 장식품
- 경계 – 보더 폭
- 바깥쪽 가장자리 – 가장자리
훈련
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
div{
border: 3px soild red;
padding: 10px;
margin: 20px;
width: 200px;
height: 35px;
}
span{
width: 100px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div>요소의 콘텐츠</div>
<span>check</span>
</body>
</html>
패딩, 여백 및 테두리를 가질 수 있지만
너비와 높이는 인라인 요소에 적용되지 않습니다.
인라인 요소인 span 태그에 너비와 높이를 적용하는 방법
디스플레이: 인라인 블록;
인라인으로 배치하되 블록 요소를 포함할 수 있도록 적절한 코드를 추가합니다.