0056 HTML 요소(element)의 크기 계산하기
CSS의 박스 모델을 알았으니 이제 HTML 요소의 전체 크기를 계산할 수 있다.
아래의 그림을 다시 보자.
<HTML 요소의 전체 너비 계산>
margin-left
+ border-left-width
+ padding-left
+ width
+ padding-right
+ border-right-width
+ margin-right
----------------------
= HTML 요소의 전체 너비
너무 기니까 간단하게 요약하면 다음과 같다.
<HTML 요소의 전체 너비 계산 간단 요약>
좌우 마진 두께
+ 좌우 테두리 두께
+ 좌우 패딩 두께
+ 내용영역 너비(width)
----------------------
= HTML 요소의 전체 너비
<HTML 요소의 전체 높이 계산>
margin-top
+ border-top-width
+ padding-top
+ height
+ padding-bottom
+ border-bottom-width
+ margin-bottom
----------------------
= HTML 요소의 전체 높이
역시 너무 기니까 간단하게 요약하면 다음과 같다.
<HTML 요소의 전체 높이 계산 간단 요약>
상하 마진 두께
+ 상하 테두리 두께
+ 상하 패딩 두께
+ 내용 영역 높이(height)
----------------------
= HTML 요소의 전체 높이
그럼 실제 요소들의 높이와 너비를 직접 계산해보도록 하자.
문제 1) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자.
div {
width: 100px;
height : 50px;
padding: 10px;
border: 5px solid gray;
margin: 0px;
}
위의 <div> 요소의 너비는 130px, 높이는 80px이다. 계산 형식은 아래와 같다.
문제 1) <div> 요소의 너비 계산
100px(내용영역의 너비)
+ 20px(좌우 패딩)
+ 0px(좌우 마진)
+ 10px(좌우 테두리 두께)
-----------------------
= 130px
문제 1) <div> 요소의 높이 계산
50px(내용영역의 높이)
+ 20px(상하 패딩)
+ 0px(상하 마진)
+ 10px(상하 테두리 두께)
-----------------------
= 80px
문제 2) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자.
div {
width: 100px;
height : 50px;
padding: 20px 10px;
border: 5px solid red;
margin: 10px 5px;
}
위의 <div> 요소의 너비는 140px, 높이는 120px이다. 계산 형식은 아래와 같다.
문제 2) <div> 요소의 너비 계산
100px(내용 영역의 너비)
+ 20px(좌우 패딩)
+ 10px(좌우 마진)
+ 10px(좌우 테두리 두께)
-----------------------
= 140px
문제 2) <div> 요소의 높이 계산
50px(내용 영역의 높이)
+ 40px(상하 패딩)
+ 20px(상하 마진)
+ 10px(상하 테두리 두께)
-----------------------
= 120px
문제 3) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자.
div {
width: 100px;
height : 50px;
padding: 20px 15px 10px 5px;
border: 5px solid blue;
margin: 0px;
}
위의 <div> 요소의 너비는 130px, 높이는 90px이다. 계산 형식은 아래와 같다.
문제 3) <div> 요소의 너비 계산
100px(내용 영역의 너비)
+ 20px(좌우 패딩=15+5)
+ 0px(좌우 마진)
+ 10px(좌우 테두리 두께)
-----------------------
= 130px
문제 3) <div> 요소의 높이 계산
50px(내용 영역의 높이)
+ 30px(상하 패딩=20+10)
+ 0px(상하 마진)
+ 10px(상하 테두리 두께)
-----------------------
= 90px
문제 4) 다음 CSS로 설정된 <div> 요소의 너비와 높이를 계산해보자.
div {
width: 100px;
height : 50px;
padding: 5px;
border: 1px solid gray;
margin: 10px 3px 5px;
}
위의 <div> 요소의 너비는 118px, 높이는 77px이다. 계산 형식은 아래와 같다.
문제 4) <div> 요소의 너비 계산
100px(내용 영역의 너비)
+ 10px(좌우 패딩)
+ 6px(좌우 마진=3+3)
+ 2px(좌우 테두리 두께)
-----------------------
= 118px
문제 4) <div> 요소의 높이 계산
50px(내용 영역의 높이)
+ 10px(상하 패딩)
+ 15px(상하 마진=10+5)
+ 2px(상하 테두리 두께)
-----------------------
= 77px
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0056 HTML 요소(element)의 크기 계산하기.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0055 CSS의 마진(Margin)과 패딩(Padding) 영역 설정하기 (0) | 2019.02.04 |
|---|---|
| 0054 CSS 내용(content)영역 설정하기-width와 height (0) | 2019.02.02 |
| 0053 테두리 각각의 방향에서 설정하기 및 단축 속성(shorthand property) (0) | 2019.01.30 |
| 0052 CSS 테두리 두께와 색 설정하기 (0) | 2019.01.28 |
| 0051 CSS 테두리 스타일 설정하기 (0) | 2019.01.26 |