모든 HTML 요소는 박스형태로 되어있다.
개발자모드(F12)를 누르고 페이지에 마우스를 올리면 박스형태로 되어 있는 것을 볼 수 있다.
사진 2번째것을 보면 개발자모드에서 우측 하단에 다이어그램으로 쉽게 볼 수 있다.
content 영역 : 280 X 60 은 contents로 내용이 직접 들어가는 공간을 말한다.
border(테두리) : 테두리 속성으로 레이아웃 영역에 영향을 미침
padding : border와 content 사이에 있는 사이 여유 공간
Margin : 마진과 다른 요소사이의 간격을 나타낸다.
BOX 모델 실습
아래 코드 실습
코드를 실행하게 되면 아래 결과처럼 나온다.
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<meta charset="utf-8">
</head>
<body>
<h1> CSS Box Model </h1>
<p class="tag1">All HTML elements can be
considered as boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:</p>
<p class="tag2">Important: When you set the width and height properties of an element with CSS,
you just set the width and height of the content area.
To calculate the full size of an element, you must also add padding,
borders and margins.</p>
</body>
</html>
각 문단의 테두리 입히기
스타일 태그 안에 h1, p1, p2 각 border : 5px solid blue; 를 추가
실행하면 각 문단의 5px 테두리가 생성된다.
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<meta charset="utf-8">
<style>
h1 {
border: 5px solid blue;
}
.tag1 {
border: 5px solid blue;
}
.tag2 {
border: 3px solid blue;
}
</style>
</head>
<body>
<h1> CSS Box Model </h1>
<p class="tag1">All HTML elements can be
considered as boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:</p>
<p class="tag2">Important: When you set the width and height properties of an element with CSS,
you just set the width and height of the content area.
To calculate the full size of an element, you must also add padding,
borders and margins.</p>
</body>
</html>
간격이 벌어지는 이유?
우측하단에 user agent style sheet은 브라우저에 따라 기본으로 설정하는 css 스타일
user agent style sheet 로 문단의 간격이 생김
간격(마진) 조정하기
마진은 다른 요소사이의 간격을 나타냄(각 구간의 간격 조정)
가운데 class tag1 위아래로 마진 간격을 40px 줘보았다.
.tag1 {
border: 5px solid blue;
margin-top: 40px;
margin-bottom: 40px;
}
Padding 조정하기
padding은 border와 content 사이에 있는 사이 여유 공간을 나타낸다.
콘텐츠를 보면 border 테두리와 딱 붙어있는 것을 볼 수 있다.
그건 padding을 지정하지 않았기 때문에 붙어있다.
콘텐츠와 테두리 간격을 위,아래,좌,우 20px로 조정하여 아래 그림처럼 띄어서 보여진다.
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<meta charset="utf-8">
<style>
h1 {
border: 5px solid blue;
}
.tag1 {
border: 5px solid blue;
margin-top: 40px;
margin-bottom: 40px;
}
.tag2 {
border: 3px solid blue;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<h1> CSS Box Model </h1>
<p class="tag1">All HTML elements can be
considered as boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:</p>
<p class="tag2">Important: When you set the width and height properties of an element with CSS,
you just set the width and height of the content area.
To calculate the full size of an element, you must also add padding,
borders and margins.</p>
</body>
</html>
'IT > @HTML' 카테고리의 다른 글
| HTML/CSS 공부하기 : Margin (2) | 2020.03.12 |
|---|---|
| HTML/CSS 공부하기 : Padding (0) | 2020.03.10 |
| JavaScript 공부하기 : 간단한 알림창 띄우기 (0) | 2020.03.04 |
| 프로그램 설치 없이 코딩하기(repl.it) (3) | 2020.03.04 |
| HTML 공부하기 : Span 태그 알아보기 (0) | 2020.02.29 |
댓글