#5 display 속성 & border 속성
블록 레벨 요소
자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
인라인 요소
자기에게 필요한 만큼의 공간만 차지한다.
display 속성
요소를 불록과 인라인 요소중 어느쪽으로 처리할지 정의한다.
border 속성
요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.
실습
<!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편, 박스모델 소개
박스 모델
브라우저가 요소를 렌더링 할 떄, 각가의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다.
- 콘텐츠 영역 - width,height
- 안쪽 여백 - padding
- 경계선 - boeder-width
- 바깥쪽 여백 - margin
실습
<!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>
padding, margin, border는 가질수 있지만,
인라인 요소에는 width와 height가 적용되지 않는다.
인라인 요소인 span 태그에 width와 height를 적용하기 위해
display: inline-block;
인라인으로 배치하되 블록요소를 가질수있게 해당 코드를 추가해준다.
'기타 > HTML, CSS 기초' 카테고리의 다른 글
| 기초 CSS (4) (0) | 2023.03.24 |
|---|---|
| 기초 CSS (2) (0) | 2023.03.21 |
| 기초 CSS (1) (0) | 2023.03.21 |
| 기초 HTML(7) (1) | 2023.03.21 |
| 기초 HTML(6) (1) | 2023.03.21 |
댓글